index.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import '../../input/style/mixin';
  4. @import './status';
  5. @mention-prefix-cls: ~'@{ant-prefix}-mentions';
  6. .@{mention-prefix-cls} {
  7. .reset-component();
  8. .input();
  9. position: relative;
  10. display: inline-block;
  11. height: auto;
  12. padding: 0;
  13. overflow: hidden;
  14. line-height: @line-height-base;
  15. white-space: pre-wrap;
  16. vertical-align: bottom;
  17. // =================== Status ===================
  18. &-disabled {
  19. > textarea {
  20. .disabled();
  21. }
  22. }
  23. &-focused {
  24. .active();
  25. }
  26. // ================= Input Area =================
  27. > textarea,
  28. &-measure {
  29. min-height: @input-height-base - 2px;
  30. margin: 0;
  31. padding: @input-padding-vertical-base @input-padding-horizontal-base;
  32. overflow: inherit;
  33. overflow-x: hidden;
  34. overflow-y: auto;
  35. /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  36. font-weight: inherit;
  37. font-size: inherit;
  38. font-family: inherit;
  39. font-style: inherit;
  40. font-variant: inherit;
  41. font-size-adjust: inherit;
  42. font-stretch: inherit;
  43. line-height: inherit;
  44. /* stylelint-enable declaration-block-no-redundant-longhand-properties */
  45. direction: inherit;
  46. letter-spacing: inherit;
  47. white-space: inherit;
  48. text-align: inherit;
  49. vertical-align: top;
  50. word-wrap: break-word;
  51. word-break: inherit;
  52. tab-size: inherit;
  53. }
  54. > textarea {
  55. width: 100%;
  56. border: none;
  57. outline: none;
  58. resize: none;
  59. & when (@theme = dark) {
  60. background-color: transparent;
  61. }
  62. .placeholder();
  63. }
  64. &-measure {
  65. position: absolute;
  66. top: 0;
  67. right: 0;
  68. bottom: 0;
  69. left: 0;
  70. z-index: -1;
  71. color: transparent;
  72. pointer-events: none;
  73. > span {
  74. display: inline-block;
  75. min-height: 1em;
  76. }
  77. }
  78. // ================== Dropdown ==================
  79. &-dropdown {
  80. // Ref select dropdown style
  81. .reset-component();
  82. position: absolute;
  83. top: -9999px;
  84. left: -9999px;
  85. z-index: @zindex-dropdown;
  86. box-sizing: border-box;
  87. font-size: @font-size-base;
  88. font-variant: initial;
  89. background-color: @mentions-dropdown-bg;
  90. border-radius: @border-radius-base;
  91. outline: none;
  92. box-shadow: @box-shadow-base;
  93. &-hidden {
  94. display: none;
  95. }
  96. &-menu {
  97. max-height: 250px;
  98. margin-bottom: 0;
  99. padding-left: 0; // Override default ul/ol
  100. overflow: auto;
  101. list-style: none;
  102. outline: none;
  103. &-item {
  104. position: relative;
  105. display: block;
  106. min-width: 100px;
  107. padding: 5px @control-padding-horizontal;
  108. overflow: hidden;
  109. color: @text-color;
  110. font-weight: normal;
  111. line-height: @line-height-base;
  112. white-space: nowrap;
  113. text-overflow: ellipsis;
  114. cursor: pointer;
  115. transition: background 0.3s ease;
  116. &:hover {
  117. background-color: @item-hover-bg;
  118. }
  119. &:first-child {
  120. border-radius: @border-radius-base @border-radius-base 0 0;
  121. }
  122. &:last-child {
  123. border-radius: 0 0 @border-radius-base @border-radius-base;
  124. }
  125. &-disabled {
  126. color: @disabled-color;
  127. cursor: not-allowed;
  128. &:hover {
  129. color: @disabled-color;
  130. background-color: @mentions-dropdown-menu-item-hover-bg;
  131. cursor: not-allowed;
  132. }
  133. }
  134. &-selected {
  135. color: @text-color;
  136. font-weight: @select-item-selected-font-weight;
  137. background-color: @background-color-light;
  138. }
  139. &-active {
  140. background-color: @item-hover-bg;
  141. }
  142. }
  143. }
  144. }
  145. &-suffix {
  146. position: absolute;
  147. top: 0;
  148. right: @input-padding-horizontal-base;
  149. bottom: 0;
  150. z-index: 1;
  151. display: inline-flex;
  152. align-items: center;
  153. margin: auto;
  154. }
  155. }
  156. @import './rtl';