index.less 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import '../../input/style/mixin';
  4. @import './single';
  5. @import './multiple';
  6. @import './status';
  7. @select-prefix-cls: ~'@{ant-prefix}-select';
  8. @select-height-without-border: @input-height-base - 2 * @border-width-base;
  9. @select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
  10. .select-selector() {
  11. position: relative;
  12. background-color: @select-background;
  13. border: @border-width-base @border-style-base @select-border-color;
  14. border-radius: @control-border-radius;
  15. transition: all 0.3s @ease-in-out;
  16. input {
  17. cursor: pointer;
  18. }
  19. .@{select-prefix-cls}-show-search& {
  20. cursor: text;
  21. input {
  22. cursor: auto;
  23. }
  24. }
  25. .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
  26. .active();
  27. }
  28. .@{select-prefix-cls}-disabled& {
  29. color: @disabled-color;
  30. background: @input-disabled-bg;
  31. cursor: not-allowed;
  32. .@{select-prefix-cls}-multiple& {
  33. background: @select-multiple-disabled-background;
  34. }
  35. input {
  36. cursor: not-allowed;
  37. }
  38. }
  39. }
  40. /* Reset search input style */
  41. .select-search-input-without-border() {
  42. .@{select-prefix-cls}-selection-search-input {
  43. margin: 0;
  44. padding: 0;
  45. background: transparent;
  46. border: none;
  47. outline: none;
  48. appearance: none;
  49. &::-webkit-search-cancel-button {
  50. display: none;
  51. /* stylelint-disable-next-line property-no-vendor-prefix */
  52. -webkit-appearance: none;
  53. }
  54. }
  55. }
  56. .@{select-prefix-cls} {
  57. .reset-component();
  58. position: relative;
  59. display: inline-block;
  60. cursor: pointer;
  61. &:not(&-customize-input) &-selector {
  62. .select-selector();
  63. .select-search-input-without-border();
  64. }
  65. &:not(&-disabled):hover &-selector {
  66. .hover();
  67. }
  68. // ======================== Selection ========================
  69. &-selection-item {
  70. flex: 1;
  71. overflow: hidden;
  72. font-weight: normal;
  73. white-space: nowrap;
  74. text-overflow: ellipsis;
  75. // IE11 css hack. `*::-ms-backdrop,` is a must have
  76. @media all and (-ms-high-contrast: none) {
  77. *::-ms-backdrop,
  78. & {
  79. flex: auto;
  80. }
  81. }
  82. }
  83. // ======================= Placeholder =======================
  84. &-selection-placeholder {
  85. flex: 1;
  86. overflow: hidden;
  87. color: @input-placeholder-color;
  88. white-space: nowrap;
  89. text-overflow: ellipsis;
  90. pointer-events: none;
  91. // IE11 css hack. `*::-ms-backdrop,` is a must have
  92. @media all and (-ms-high-contrast: none) {
  93. *::-ms-backdrop,
  94. & {
  95. flex: auto;
  96. }
  97. }
  98. }
  99. // ========================== Arrow ==========================
  100. &-arrow {
  101. .iconfont-mixin();
  102. position: absolute;
  103. top: 50%;
  104. right: @control-padding-horizontal - 1px;
  105. display: flex;
  106. align-items: center;
  107. height: @font-size-sm;
  108. margin-top: (-@font-size-sm / 2);
  109. color: @disabled-color;
  110. font-size: @font-size-sm;
  111. line-height: 1;
  112. text-align: center;
  113. pointer-events: none;
  114. .@{iconfont-css-prefix} {
  115. vertical-align: top;
  116. transition: transform 0.3s;
  117. > svg {
  118. vertical-align: top;
  119. }
  120. &:not(.@{select-prefix-cls}-suffix) {
  121. pointer-events: auto;
  122. }
  123. }
  124. .@{select-prefix-cls}-disabled & {
  125. cursor: not-allowed;
  126. }
  127. > *:not(:last-child) {
  128. margin-inline-end: @padding-xs;
  129. }
  130. }
  131. // ========================== Clear ==========================
  132. &-clear {
  133. position: absolute;
  134. top: 50%;
  135. right: @control-padding-horizontal - 1px;
  136. z-index: 1;
  137. display: inline-block;
  138. width: @font-size-sm;
  139. height: @font-size-sm;
  140. margin-top: (-@font-size-sm / 2);
  141. color: @disabled-color;
  142. font-size: @font-size-sm;
  143. font-style: normal;
  144. line-height: 1;
  145. text-align: center;
  146. text-transform: none;
  147. background: @select-clear-background;
  148. cursor: pointer;
  149. opacity: 0;
  150. transition:
  151. color 0.3s ease,
  152. opacity 0.15s ease;
  153. text-rendering: auto;
  154. &::before {
  155. display: block;
  156. }
  157. &:hover {
  158. color: @text-color-secondary;
  159. }
  160. .@{select-prefix-cls}:hover & {
  161. opacity: 1;
  162. }
  163. }
  164. // ========================== Popup ==========================
  165. &-dropdown {
  166. .reset-component();
  167. position: absolute;
  168. top: -9999px;
  169. left: -9999px;
  170. z-index: @zindex-dropdown;
  171. box-sizing: border-box;
  172. padding: @select-dropdown-edge-child-vertical-padding 0;
  173. overflow: hidden;
  174. font-size: @font-size-base;
  175. // Fix select render lag of long text in chrome
  176. // https://github.com/ant-design/ant-design/issues/11456
  177. // https://github.com/ant-design/ant-design/issues/11843
  178. font-variant: initial;
  179. background-color: @select-dropdown-bg;
  180. border-radius: @border-radius-base;
  181. outline: none;
  182. box-shadow: @box-shadow-base;
  183. &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
  184. &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
  185. animation-name: antSlideUpIn;
  186. }
  187. &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
  188. &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
  189. animation-name: antSlideDownIn;
  190. }
  191. &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
  192. animation-name: antSlideUpOut;
  193. }
  194. &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
  195. animation-name: antSlideDownOut;
  196. }
  197. &-hidden {
  198. display: none;
  199. }
  200. &-empty {
  201. color: @disabled-color;
  202. }
  203. }
  204. // ========================= Options =========================
  205. .item() {
  206. position: relative;
  207. display: block;
  208. min-height: @select-dropdown-height;
  209. padding: @select-dropdown-vertical-padding @control-padding-horizontal;
  210. color: @text-color;
  211. font-weight: normal;
  212. font-size: @select-dropdown-font-size;
  213. line-height: @select-dropdown-line-height;
  214. }
  215. &-item-empty {
  216. .item();
  217. color: @disabled-color;
  218. }
  219. &-item {
  220. .item();
  221. cursor: pointer;
  222. transition: background 0.3s ease;
  223. // =========== Group ============
  224. &-group {
  225. color: @text-color-secondary;
  226. font-size: @font-size-sm;
  227. cursor: default;
  228. }
  229. // =========== Option ===========
  230. &-option {
  231. display: flex;
  232. &-content {
  233. flex: auto;
  234. overflow: hidden;
  235. white-space: nowrap;
  236. text-overflow: ellipsis;
  237. }
  238. &-state {
  239. flex: none;
  240. user-select: none;
  241. }
  242. &-active:not(&-disabled) {
  243. background-color: @select-item-active-bg;
  244. }
  245. &-selected:not(&-disabled) {
  246. color: @select-item-selected-color;
  247. font-weight: @select-item-selected-font-weight;
  248. background-color: @select-item-selected-bg;
  249. .@{select-prefix-cls}-item-option-state {
  250. color: @primary-color;
  251. }
  252. }
  253. &-disabled {
  254. &.@{select-prefix-cls}-item-option-selected {
  255. background-color: @select-multiple-disabled-background;
  256. }
  257. color: @disabled-color;
  258. cursor: not-allowed;
  259. }
  260. &-grouped {
  261. padding-left: @control-padding-horizontal * 2;
  262. }
  263. }
  264. }
  265. // ============================================================
  266. // == Size ==
  267. // ============================================================
  268. &-lg {
  269. font-size: @font-size-lg;
  270. }
  271. // no border style
  272. &-borderless &-selector {
  273. background-color: transparent !important;
  274. border-color: transparent !important;
  275. box-shadow: none !important;
  276. }
  277. &&-in-form-item {
  278. width: 100%;
  279. }
  280. // ===================== Compact Item Styles =====================
  281. .compact-item(@select-prefix-cls, ~'@{select-prefix-cls}-selector', ~'@{select-prefix-cls}-focused');
  282. }
  283. @import './rtl';