index-pure.less 3.6 KB

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