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