select.scss 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. @use 'sass:map';
  2. @use 'mixins/mixins' as *;
  3. @use 'mixins/utils' as *;
  4. @use 'mixins/var' as *;
  5. @use 'common/var' as *;
  6. @use './select-dropdown.scss';
  7. @use './option.scss';
  8. @use './option-group.scss';
  9. @mixin mixed-input-border($color) {
  10. box-shadow: 0 0 0 1px $color inset;
  11. }
  12. @include b(select) {
  13. @include set-component-css-var('select', $select);
  14. }
  15. @include b(select) {
  16. display: inline-block;
  17. position: relative;
  18. vertical-align: middle;
  19. width: getCssVar('select-width');
  20. @include e(wrapper) {
  21. display: flex;
  22. align-items: center;
  23. position: relative;
  24. box-sizing: border-box;
  25. cursor: pointer;
  26. text-align: left;
  27. font-size: map.get($input-font-size, 'default');
  28. padding: map.get($select-wrapper-padding, 'default');
  29. gap: map.get($select-item-gap, 'default');
  30. min-height: map.get($input-height, 'default');
  31. line-height: map.get($select-item-height, 'default');
  32. border-radius: getCssVar('border-radius-base');
  33. background-color: getCssVar('fill-color', 'blank');
  34. transition: getCssVar('transition', 'duration');
  35. transform: translate3d(0, 0, 0);
  36. @include mixed-input-border(#{getCssVar('border-color')});
  37. @include when(filterable) {
  38. cursor: text;
  39. }
  40. @include when(focused) {
  41. @include mixed-input-border(#{getCssVar('color-primary')});
  42. }
  43. @include when(hovering) {
  44. &:not(.is-focused) {
  45. @include mixed-input-border(#{getCssVar('border-color-hover')});
  46. }
  47. }
  48. @include when(disabled) {
  49. cursor: not-allowed;
  50. background-color: getCssVar('fill-color', 'light');
  51. color: getCssVar('text-color', 'placeholder');
  52. @include mixed-input-border(#{getCssVar('select-disabled-border')});
  53. &:hover {
  54. @include mixed-input-border(#{getCssVar('select-disabled-border')});
  55. }
  56. &.is-focus {
  57. @include mixed-input-border(#{getCssVar('input-focus-border-color')});
  58. }
  59. @include e(selected-item) {
  60. color: getCssVar('select-disabled-color');
  61. }
  62. @include e(caret) {
  63. cursor: not-allowed;
  64. }
  65. .#{$namespace}-tag {
  66. cursor: not-allowed;
  67. }
  68. }
  69. }
  70. @include e(prefix) {
  71. display: flex;
  72. align-items: center;
  73. flex-shrink: 0;
  74. gap: map.get($select-item-gap, 'default');
  75. color: var(
  76. #{getCssVarName('input-icon-color')},
  77. map.get($input, 'icon-color')
  78. );
  79. }
  80. @include e(suffix) {
  81. display: flex;
  82. align-items: center;
  83. flex-shrink: 0;
  84. gap: map.get($select-item-gap, 'default');
  85. color: var(
  86. #{getCssVarName('input-icon-color')},
  87. map.get($input, 'icon-color')
  88. );
  89. }
  90. @include e(caret) {
  91. color: getCssVar('select-input-color');
  92. font-size: getCssVar('select-input-font-size');
  93. transition: getCssVar('transition', 'duration');
  94. transform: rotateZ(0deg);
  95. cursor: pointer;
  96. @include when(reverse) {
  97. transform: rotateZ(180deg);
  98. }
  99. }
  100. @include e(selection) {
  101. position: relative;
  102. display: flex;
  103. flex-wrap: wrap;
  104. align-items: center;
  105. flex: 1;
  106. min-width: 0;
  107. gap: map.get($select-item-gap, 'default');
  108. @include when(near) {
  109. margin-left: map.get($select-near-margin-left, 'default');
  110. }
  111. .#{$namespace}-tag {
  112. cursor: pointer;
  113. border-color: transparent;
  114. &.#{$namespace}-tag--plain {
  115. border-color: getCssVar('tag', 'border-color');
  116. }
  117. .#{$namespace}-tag__content {
  118. min-width: 0;
  119. }
  120. }
  121. }
  122. @include e(selected-item) {
  123. display: flex;
  124. flex-wrap: wrap;
  125. user-select: none;
  126. }
  127. @include e(tags-text) {
  128. display: block;
  129. line-height: normal;
  130. @include utils-ellipsis;
  131. }
  132. @include e(placeholder) {
  133. position: absolute;
  134. display: block;
  135. top: 50%;
  136. transform: translateY(-50%);
  137. width: 100%;
  138. @include utils-ellipsis;
  139. color: var(
  140. #{getCssVarName('input-text-color')},
  141. map.get($input, 'text-color')
  142. );
  143. @include when(transparent) {
  144. user-select: none;
  145. color: getCssVar('text-color', 'placeholder');
  146. }
  147. }
  148. @include e(popper) {
  149. @include picker-popper(
  150. map.get($select-dropdown, 'bg-color'),
  151. map.get($select-dropdown, 'border'),
  152. map.get($select-dropdown, 'shadow')
  153. );
  154. }
  155. @include e(input-wrapper) {
  156. max-width: 100%;
  157. @include when(hidden) {
  158. // Out of the document flow
  159. position: absolute;
  160. opacity: 0;
  161. }
  162. }
  163. @include e(input) {
  164. border: none;
  165. outline: none;
  166. padding: 0;
  167. color: getCssVar('select-multiple-input-color');
  168. font-size: inherit;
  169. font-family: inherit;
  170. appearance: none;
  171. height: map.get($select-item-height, 'default');
  172. max-width: 100%;
  173. background-color: transparent;
  174. @include when(disabled) {
  175. cursor: not-allowed;
  176. }
  177. }
  178. @include e(input-calculator) {
  179. position: absolute;
  180. left: 0;
  181. top: 0;
  182. max-width: 100%;
  183. visibility: hidden;
  184. white-space: pre;
  185. overflow: hidden;
  186. }
  187. @each $size in (large, small) {
  188. @include m($size) {
  189. @include e(wrapper) {
  190. gap: map.get($select-item-gap, $size);
  191. padding: map.get($select-wrapper-padding, $size);
  192. min-height: map.get($input-height, $size);
  193. line-height: map.get($select-item-height, $size);
  194. font-size: map.get($input-font-size, $size);
  195. }
  196. @include e(selection) {
  197. gap: map.get($select-item-gap, $size);
  198. @include when(near) {
  199. margin-left: map.get($select-near-margin-left, $size);
  200. }
  201. }
  202. @include e(prefix) {
  203. gap: map.get($select-item-gap, $size);
  204. }
  205. @include e(suffix) {
  206. gap: map.get($select-item-gap, $size);
  207. }
  208. @include e(input) {
  209. height: map.get($select-item-height, $size);
  210. }
  211. }
  212. }
  213. }