vdesign-ui 0.2.20 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/README.md +58 -58
  2. package/dist/components/actionbar/index.js +8 -8
  3. package/dist/components/actionbar/index.vue +39 -39
  4. package/dist/components/actionbar/style.less +44 -44
  5. package/dist/components/actionbar-cell/index.js +7 -7
  6. package/dist/components/actionbar-cell/index.vue +42 -42
  7. package/dist/components/actions/index.js +6 -6
  8. package/dist/components/actions/index.vue +77 -77
  9. package/dist/components/actions/style.less +109 -109
  10. package/dist/components/actions-cell/index.js +6 -6
  11. package/dist/components/actions-cell/index.vue +94 -94
  12. package/dist/components/actions-cell/style.less +38 -38
  13. package/dist/components/activityviews/index.js +8 -8
  14. package/dist/components/activityviews/index.vue +192 -192
  15. package/dist/components/activityviews/style.less +161 -161
  16. package/dist/components/badge/index.js +8 -8
  17. package/dist/components/badge/index.vue +49 -49
  18. package/dist/components/badge/style.less +54 -54
  19. package/dist/components/button/index.js +8 -8
  20. package/dist/components/button/index.vue +93 -93
  21. package/dist/components/button/style.less +558 -558
  22. package/dist/components/calendar/index-element.vue +84 -84
  23. package/dist/components/calendar/index.js +7 -7
  24. package/dist/components/calendar/index.vue +53 -53
  25. package/dist/components/calendar/style.less +138 -138
  26. package/dist/components/checkbox/index.js +8 -8
  27. package/dist/components/checkbox/index.vue +161 -161
  28. package/dist/components/checkbox/style.less +288 -288
  29. package/dist/components/checkbox-group/index.js +7 -7
  30. package/dist/components/checkbox-group/index.vue +73 -73
  31. package/dist/components/common/state/index.vue +33 -33
  32. package/dist/components/common/state/style.less +47 -47
  33. package/dist/components/data-list/index.js +10 -10
  34. package/dist/components/data-list/index.vue +19 -19
  35. package/dist/components/data-list/style.less +623 -623
  36. package/dist/components/datetime-picker/index.js +7 -7
  37. package/dist/components/datetime-picker/index.vue +39 -39
  38. package/dist/components/datetime-picker/style.less +23 -23
  39. package/dist/components/dialog/index.js +8 -8
  40. package/dist/components/dialog/index.vue +164 -164
  41. package/dist/components/dialog/overlay-manager.js +18 -18
  42. package/dist/components/dialog/style.less +138 -138
  43. package/dist/components/divider/index.js +8 -8
  44. package/dist/components/divider/index.vue +54 -54
  45. package/dist/components/divider/style.less +92 -92
  46. package/dist/components/dropdown/index.js +8 -8
  47. package/dist/components/dropdown/index.vue +218 -218
  48. package/dist/components/dropdown/style.less +432 -432
  49. package/dist/components/empty/index.js +8 -8
  50. package/dist/components/empty/index.vue +138 -138
  51. package/dist/components/empty/style.less +60 -60
  52. package/dist/components/footer/index.js +6 -6
  53. package/dist/components/footer/index.vue +33 -33
  54. package/dist/components/footer/style.less +20 -20
  55. package/dist/components/footnav/index.js +6 -6
  56. package/dist/components/footnav/index.vue +93 -93
  57. package/dist/components/footnav/style.less +22 -22
  58. package/dist/components/footnav-item/index.js +6 -6
  59. package/dist/components/footnav-item/index.vue +50 -50
  60. package/dist/components/footnav-item/style.less +39 -39
  61. package/dist/components/form/index.js +6 -6
  62. package/dist/components/form/index.vue +14 -14
  63. package/dist/components/headnav/index.js +6 -6
  64. package/dist/components/headnav/index.vue +185 -185
  65. package/dist/components/headnav/style.less +231 -231
  66. package/dist/components/icon/font/iconfont.css +163 -163
  67. package/dist/components/icon/font/iconfont.js +5 -5
  68. package/dist/components/icon/index.js +9 -9
  69. package/dist/components/icon/index.vue +96 -96
  70. package/dist/components/icon/style.less +44 -44
  71. package/dist/components/input/calcTextareaHeight.js +162 -162
  72. package/dist/components/input/index.js +8 -8
  73. package/dist/components/input/index.vue +345 -345
  74. package/dist/components/input/style.less +471 -471
  75. package/dist/components/list/index.js +8 -8
  76. package/dist/components/list/index.vue +152 -152
  77. package/dist/components/list/style.less +213 -213
  78. package/dist/components/loading/index.js +6 -6
  79. package/dist/components/loading/index.vue +68 -68
  80. package/dist/components/loading/style.less +53 -53
  81. package/dist/components/mixins/clickoutside.js +81 -81
  82. package/dist/components/mixins/dom.js +41 -41
  83. package/dist/components/mixins/languageMixin.js +43 -43
  84. package/dist/components/mixins/outlineConfigPlugin.js +45 -45
  85. package/dist/components/mixins/router-link.js +22 -22
  86. package/dist/components/mixins/themeMixin.js +43 -43
  87. package/dist/components/noticebar/index.js +8 -8
  88. package/dist/components/noticebar/index.vue +258 -258
  89. package/dist/components/noticebar/style.less +333 -333
  90. package/dist/components/overlay/index.js +8 -8
  91. package/dist/components/overlay/index.vue +184 -184
  92. package/dist/components/overlay/style.less +24 -24
  93. package/dist/components/pagebreak/index.js +6 -6
  94. package/dist/components/pagebreak/index.vue +67 -67
  95. package/dist/components/pagebreak/style.less +41 -41
  96. package/dist/components/password/index.js +8 -8
  97. package/dist/components/password/index.vue +64 -64
  98. package/dist/components/popover/index.js +8 -8
  99. package/dist/components/popover/index.vue +100 -100
  100. package/dist/components/popover/style.less +346 -346
  101. package/dist/components/popover/vue-popover.vue +314 -314
  102. package/dist/components/popup/index.js +7 -7
  103. package/dist/components/popup/index.vue +165 -165
  104. package/dist/components/popup/style.less +78 -78
  105. package/dist/components/radio/index.js +8 -8
  106. package/dist/components/radio/index.vue +184 -184
  107. package/dist/components/radio/style.less +300 -300
  108. package/dist/components/radio-group/index.js +7 -7
  109. package/dist/components/radio-group/index.vue +62 -62
  110. package/dist/components/result/index.js +8 -8
  111. package/dist/components/result/index.vue +73 -73
  112. package/dist/components/result/style.less +43 -43
  113. package/dist/components/search/index.js +8 -8
  114. package/dist/components/search/index.vue +70 -70
  115. package/dist/components/selector/index.js +8 -8
  116. package/dist/components/selector/index.vue +161 -161
  117. package/dist/components/selector/style.less +484 -484
  118. package/dist/components/skeleton/index.js +6 -6
  119. package/dist/components/skeleton/index.vue +207 -207
  120. package/dist/components/skeleton/style.less +196 -196
  121. package/dist/components/slider/draggable.js +49 -49
  122. package/dist/components/slider/index.js +6 -6
  123. package/dist/components/slider/index.vue +167 -167
  124. package/dist/components/slider/style.less +99 -99
  125. package/dist/components/slider/utils.js +59 -59
  126. package/dist/components/step/index.js +7 -7
  127. package/dist/components/step/index.vue +48 -48
  128. package/dist/components/step/style.less +66 -66
  129. package/dist/components/step-item/index.js +7 -7
  130. package/dist/components/step-item/index.vue +126 -126
  131. package/dist/components/step-item/style.less +399 -399
  132. package/dist/components/stepper/index.js +8 -8
  133. package/dist/components/stepper/index.vue +150 -150
  134. package/dist/components/style/index.vue +42 -42
  135. package/dist/components/switch/index.js +8 -8
  136. package/dist/components/switch/index.vue +72 -72
  137. package/dist/components/switch/style.less +56 -56
  138. package/dist/components/tab/index.js +7 -7
  139. package/dist/components/tab/index.vue +97 -97
  140. package/dist/components/tabs/index.js +8 -8
  141. package/dist/components/tabs/index.vue +356 -356
  142. package/dist/components/tabs/style.less +504 -504
  143. package/dist/components/tag/index.js +6 -6
  144. package/dist/components/tag/index.vue +64 -64
  145. package/dist/components/tag/style.less +210 -210
  146. package/dist/components/title/index.js +8 -8
  147. package/dist/components/title/index.vue +99 -99
  148. package/dist/components/title/style.less +187 -187
  149. package/dist/components/toast/index.js +139 -139
  150. package/dist/components/toast/index.vue +50 -50
  151. package/dist/components/toast/style.less +58 -58
  152. package/dist/components/transition/index.js +8 -8
  153. package/dist/components/transition/index.vue +13 -13
  154. package/dist/components/transition/style.less +208 -208
  155. package/dist/components/upload/index.js +6 -6
  156. package/dist/components/upload/index.vue +106 -106
  157. package/dist/components/upload/style.less +147 -147
  158. package/dist/components/utils/assist.js +34 -34
  159. package/dist/components/utils/env.js +21 -21
  160. package/dist/locale/ar.js +97 -97
  161. package/dist/locale/en.js +97 -97
  162. package/dist/locale/zh.js +97 -97
  163. package/dist/token.css +9 -9
  164. package/dist/vdesign-ui.common.js +83 -83
  165. package/dist/vdesign-ui.umd.js +83 -83
  166. package/package.json +113 -113
package/dist/components/selector/style.less CHANGED
@@ -1,484 +1,484 @@
1
- @selector-prefix-cls: vd-selector;
2
-
3
- .@{selector-prefix-cls} {
4
- box-sizing: border-box;
5
- position: relative;
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- width: 100%;
10
-
11
- &__inner {
12
- display: flex;
13
- flex-wrap: nowrap;
14
- align-items: center;
15
- justify-content: center;
16
- cursor: pointer;
17
- height: 100%;
18
- width: 100%;
19
- }
20
-
21
- &__left {
22
- display: flex;
23
- align-items: center;
24
- max-width: 100%;
25
- overflow: hidden;
26
-
27
- &:focus-visible {
28
- outline: none;
29
- }
30
- }
31
-
32
- &-iconfont {
33
- flex: none;
34
- min-width: 0;
35
- }
36
-
37
- &-xl {
38
-
39
- &__title {
40
- font-size: var(--en-single-f-e-r-fontSize);
41
- font-weight: var(--en-single-f-e-r-fontWeight);
42
- color: var(--color-selector-xl-text-default);
43
- white-space: nowrap;
44
- overflow: hidden;
45
- text-overflow: ellipsis;
46
-
47
- &--active {
48
- font-size: var(--en-single-f-f-b-fontSize);
49
- font-weight: var(--en-single-f-f-b-fontWeight);
50
- color: var(--color-selector-xl-text-active);
51
- }
52
-
53
- &--disabled {
54
- font-size: var(--en-single-f-f-b-fontSize);
55
- font-weight: var(--en-single-f-f-b-fontWeight);
56
- color: var(--color-selector-xl-text-disable);
57
- }
58
- }
59
-
60
- &__icon {
61
- display: flex;
62
- font-size: var(--icon-selector-xl);
63
- margin-inline-end: var(--spacing-selector-xl-margin_y);
64
-
65
- &--disabled {
66
- opacity: var(--opacity-30);
67
- }
68
- }
69
-
70
- &__arrow {
71
- font-size: var(--icon-small);
72
- margin-inline-start: var(--spacing-selector-l-margin_y);
73
- color: var(--color-selector-icon_down-default);
74
- transition: transform .3s;
75
-
76
- &--active {
77
- color: var(--color-selector-icon_down-active);
78
- }
79
-
80
- &--disabled {
81
- color: var(--color-selector-icon_down-disable);
82
- }
83
- }
84
-
85
- }
86
-
87
- &-l {
88
-
89
- &__title {
90
- font-size: var(--en-single-f-d-r-fontSize);
91
- font-weight: var(--en-single-f-d-r-fontWeight);
92
- color: var(--color-selector-l-text-default);
93
- white-space: nowrap;
94
- overflow: hidden;
95
- text-overflow: ellipsis;
96
-
97
- &--active {
98
- font-size: var(--en-single-f-d-s-fontSize);
99
- font-weight: var(--en-single-f-d-s-fontWeight);
100
- color: var(--color-selector-l-text-active);
101
- }
102
-
103
- &--disabled {
104
- font-size: var(--en-single-f-d-s-fontSize);
105
- font-weight: var(--en-single-f-d-s-fontWeight);
106
- color: var(--color-selector-l-text-disable);
107
- }
108
- }
109
-
110
- &__icon {
111
- display: flex;
112
- font-size: var(--icon-selector-l);
113
- margin-inline-end: var(--spacing-selector-l-margin_y);
114
-
115
- &--disabled {
116
- opacity: var(--opacity-30);
117
- }
118
- }
119
-
120
- &__arrow {
121
- font-size: var(--icon-small);
122
- margin-inline-start: var(--spacing-selector-l-margin_y);
123
- color: var(--color-selector-icon_down-default);
124
- transition: transform .3s;
125
-
126
- &--active {
127
- color: var(--color-selector-icon_down-active);
128
- }
129
-
130
- &--disabled {
131
- color: var(--color-selector-icon_down-disable);
132
- }
133
- }
134
- }
135
-
136
- &-m {
137
-
138
- &__title {
139
- font-size: var(--en-single-f-c-r-fontSize);
140
- font-weight: var(--en-single-f-c-r-fontWeight);
141
- color: var(--color-selector-m-text-default);
142
- white-space: nowrap;
143
- overflow: hidden;
144
- text-overflow: ellipsis;
145
-
146
- &--active {
147
- font-size: var(--en-single-f-c-s-fontSize);
148
- font-weight: var(--en-single-f-c-s-fontWeight);
149
- color: var(--color-selector-m-text-active);
150
- }
151
-
152
- &--disabled {
153
- font-size: var(--en-single-f-c-s-fontSize);
154
- font-weight: var(--en-single-f-c-s-fontWeight);
155
- color: var(--color-selector-m-text-disable);
156
- }
157
- }
158
-
159
- &__icon {
160
- display: flex;
161
- font-size: var(--icon-selector-m);
162
- margin-inline-end: var(--spacing-selector-m-margin_y);
163
-
164
- &--disabled {
165
- opacity: var(--opacity-30);
166
- }
167
- }
168
-
169
- &__arrow {
170
- font-size: var(--icon-small);
171
- margin-inline-start: var(--spacing-selector-m-margin_y);
172
- color: var(--color-selector-icon_down-default);
173
- transition: transform .3s;
174
-
175
- &--active {
176
- color: var(--color-selector-icon_down-active);
177
- }
178
-
179
- &--disabled {
180
- color: var(--color-selector-icon_down-disable);
181
- }
182
- }
183
- }
184
-
185
- &-s {
186
-
187
- &__title {
188
- font-size: var(--en-single-f-b-r-fontSize);
189
- font-weight: var(--en-single-f-b-r-fontWeight);
190
- color: var(--color-selector-s-text-default);
191
- white-space: nowrap;
192
- overflow: hidden;
193
- text-overflow: ellipsis;
194
-
195
- &--active {
196
- font-size: var(--en-single-f-b-r-fontSize);
197
- font-weight: var(--en-single-f-b-r-fontWeight);
198
- color: var(--color-selector-s-text-active);
199
- }
200
-
201
- &--disabled {
202
- font-size: var(--en-single-f-b-r-fontSize);
203
- font-weight: var(--en-single-f-b-r-fontWeight);
204
- color: var(--color-selector-s-text-disable);
205
- }
206
- }
207
-
208
- &__icon {
209
- display: flex;
210
- font-size: var(--icon-selector-s);
211
- margin-inline-end: var(--spacing-selector-s-margin_y);
212
-
213
- &--disabled {
214
- opacity: var(--opacity-30);
215
- }
216
- }
217
-
218
- &__arrow {
219
- font-size: var(--icon-extra-small);
220
- margin-inline-start: var(--spacing-selector-s-margin_y);
221
- color: var(--color-selector-icon_down-default);
222
- transition: transform .3s;
223
-
224
- &--active {
225
- color: var(--color-selector-icon_down-active);
226
- }
227
-
228
- &--disabled {
229
- color: var(--color-selector-icon_down-disable);
230
- }
231
- }
232
- }
233
-
234
- &-form {
235
- width: var(--width-selector-form);
236
- height: var(--height-selector-form);
237
- padding-inline-start: var(--spacing-selector-padding_y);
238
- padding-inline-end: var(--spacing-selector-padding_y);
239
- background-color: var(--color-selector-form-bg-default);
240
- border-radius: var(--radius-selector-form);
241
- justify-content: space-between;
242
-
243
- .@{selector-prefix-cls}__inner {
244
- justify-content: space-between;
245
- }
246
-
247
- &--active {
248
- background-color: var(--color-selector-form-bg-active);
249
- }
250
-
251
- &--disabled {
252
- background-color: var(--color-selector-form-bg-disable);
253
- }
254
-
255
- &__title {
256
- font-size: var(--en-single-f-d-r-fontSize);
257
- font-weight: var(--en-single-f-d-r-fontWeight);
258
- color: var(--color-selector-form-text-default);
259
- white-space: nowrap;
260
- overflow: hidden;
261
- text-overflow: ellipsis;
262
-
263
- &--active {
264
- font-size: var(--en-single-f-d-s-fontSize);
265
- font-weight: var(--en-single-f-d-s-fontWeight);
266
- color: var(--color-selector-xl-text-active);
267
- }
268
-
269
- &--disabled {
270
- font-size: var(--en-single-f-d-s-fontSize);
271
- font-weight: var(--en-single-f-d-s-fontWeight);
272
- color: var(--color-selector-xl-text-disable);
273
- }
274
- }
275
-
276
- &__icon {
277
- font-size: var(--icon-selector-l);
278
- margin-inline-end: var(--spacing-selector-icon-margin_right);
279
-
280
- &--disabled {
281
- opacity: var(--opacity-30);
282
- }
283
- }
284
-
285
- &__arrow {
286
- font-size: var(--icon-small);
287
- margin-inline-start: var(--spacing-selector-down-margin_left);
288
- color: var(--color-selector-icon_down-default);
289
- transition: transform .3s;
290
-
291
- &--active {
292
- color: var(--color-selector-icon_down-active);
293
- }
294
-
295
- &--disabled {
296
- color: var(--color-selector-icon_down-disable);
297
- }
298
- }
299
- }
300
-
301
- &--slot {
302
- position: absolute;
303
- top: 100%;
304
- display: none;
305
- }
306
-
307
- &--active {
308
- .@{selector-prefix-cls}-xl {
309
-
310
- &__title {
311
- font-size: var(--en-single-f-f-b-fontSize);
312
- font-weight: var(--en-single-f-f-b-fontWeight);
313
- color: var(--color-selector-xl-text-active);
314
- }
315
-
316
- &__arrow {
317
- color: var(--color-selector-icon_down-active);
318
- transition: transform .3s;
319
- }
320
-
321
- }
322
-
323
- .@{selector-prefix-cls}-l {
324
-
325
- &__title {
326
- font-size: var(--en-single-f-d-s-fontSize);
327
- font-weight: var(--en-single-f-d-s-fontWeight);
328
- color: var(--color-selector-l-text-active);
329
- }
330
-
331
- &__arrow {
332
- color: var(--color-selector-icon_down-active);
333
- transition: transform .3s;
334
- }
335
-
336
- }
337
-
338
- .@{selector-prefix-cls}-m {
339
-
340
- &__title {
341
- font-size: var(--en-single-f-c-s-fontSize);
342
- font-weight: var(--en-single-f-c-s-fontWeight);
343
- color: var(--color-selector-m-text-active);
344
- }
345
-
346
- &__arrow {
347
- color: var(--color-selector-icon_down-active);
348
- transition: transform .3s;
349
- }
350
- }
351
-
352
- .@{selector-prefix-cls}-s {
353
-
354
- &__title {
355
- font-size: var(--en-single-f-b-r-fontSize);
356
- font-weight: var(--en-single-f-b-r-fontWeight);
357
- color: var(--color-selector-s-text-active);
358
- }
359
-
360
- &__arrow {
361
- color: var(--color-selector-icon_down-active);
362
- transition: transform .3s;
363
- }
364
-
365
- }
366
-
367
- .@{selector-prefix-cls}-form {
368
- background-color: var(--color-selector-form-bg-active);
369
-
370
- &__title {
371
- font-size: var(--en-single-f-d-s-fontSize);
372
- font-weight: var(--en-single-f-d-s-fontWeight);
373
- color: var(--color-selector-xl-text-active);
374
- }
375
-
376
- &__arrow {
377
- color: var(--color-selector-icon_down-active);
378
- transition: transform .3s;
379
- }
380
- }
381
-
382
- .@{selector-prefix-cls}--slot {
383
- display: block;
384
- }
385
- }
386
-
387
- &--disabled {
388
- .@{selector-prefix-cls}-xl {
389
-
390
- &__title {
391
- font-size: var(--en-single-f-f-b-fontSize);
392
- font-weight: var(--en-single-f-f-b-fontWeight);
393
- color: var(--color-selector-xl-text-disable);
394
- }
395
-
396
- &__icon {
397
- opacity: var(--opacity-30);
398
- }
399
-
400
- &__arrow {
401
- color: var(--color-selector-icon_down-disable);
402
- }
403
-
404
-
405
- }
406
-
407
- .@{selector-prefix-cls}-l {
408
-
409
- &__title {
410
- font-size: var(--en-single-f-d-s-fontSize);
411
- font-weight: var(--en-single-f-d-s-fontWeight);
412
- color: var(--color-selector-l-text-disable);
413
- }
414
-
415
- &__icon {
416
- opacity: var(--opacity-30);
417
- }
418
-
419
- &__arrow {
420
- color: var(--color-selector-icon_down-disable);
421
- }
422
-
423
- }
424
-
425
- .@{selector-prefix-cls}-m {
426
-
427
- &__title {
428
- font-size: var(--en-single-f-c-s-fontSize);
429
- font-weight: var(--en-single-f-c-s-fontWeight);
430
- color: var(--color-selector-m-text-disable);
431
- }
432
-
433
- &__icon {
434
- opacity: var(--opacity-30);
435
- }
436
-
437
- &__arrow {
438
- color: var(--color-selector-icon_down-disable);
439
- }
440
-
441
- }
442
-
443
- .@{selector-prefix-cls}-s {
444
-
445
- &__title {
446
- font-size: var(--en-single-f-b-r-fontSize);
447
- font-weight: var(--en-single-f-b-r-fontWeight);
448
- color: var(--color-selector-s-text-disable);
449
- }
450
-
451
- &__icon {
452
- opacity: var(--opacity-30);
453
- }
454
-
455
- &__arrow {
456
- color: var(--color-selector-icon_down-disable);
457
- }
458
-
459
- }
460
-
461
- .@{selector-prefix-cls}-form {
462
- background-color: var(--color-selector-form-bg-disable);
463
-
464
- &__title {
465
- font-size: var(--en-single-f-d-s-fontSize);
466
- font-weight: var(--en-single-f-d-s-fontWeight);
467
- color: var(--color-selector-xl-text-disable);
468
- }
469
-
470
- &__icon {
471
- opacity: var(--opacity-30);
472
- }
473
-
474
- &__arrow {
475
- color: var(--color-selector-icon_down-disable);
476
- }
477
- }
478
- }
479
-
480
- &__arrow--active {
481
- transform: rotate(180deg);
482
- transform-origin: center;
483
- }
484
- }
1
+ @selector-prefix-cls: vd-selector;
2
+
3
+ .@{selector-prefix-cls} {
4
+ box-sizing: border-box;
5
+ position: relative;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ width: 100%;
10
+
11
+ &__inner {
12
+ display: flex;
13
+ flex-wrap: nowrap;
14
+ align-items: center;
15
+ justify-content: center;
16
+ cursor: pointer;
17
+ height: 100%;
18
+ width: 100%;
19
+ }
20
+
21
+ &__left {
22
+ display: flex;
23
+ align-items: center;
24
+ max-width: 100%;
25
+ overflow: hidden;
26
+
27
+ &:focus-visible {
28
+ outline: none;
29
+ }
30
+ }
31
+
32
+ &-iconfont {
33
+ flex: none;
34
+ min-width: 0;
35
+ }
36
+
37
+ &-xl {
38
+
39
+ &__title {
40
+ font-size: var(--en-single-f-e-r-fontSize);
41
+ font-weight: var(--en-single-f-e-r-fontWeight);
42
+ color: var(--color-selector-xl-text-default);
43
+ white-space: nowrap;
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+
47
+ &--active {
48
+ font-size: var(--en-single-f-f-b-fontSize);
49
+ font-weight: var(--en-single-f-f-b-fontWeight);
50
+ color: var(--color-selector-xl-text-active);
51
+ }
52
+
53
+ &--disabled {
54
+ font-size: var(--en-single-f-f-b-fontSize);
55
+ font-weight: var(--en-single-f-f-b-fontWeight);
56
+ color: var(--color-selector-xl-text-disable);
57
+ }
58
+ }
59
+
60
+ &__icon {
61
+ display: flex;
62
+ font-size: var(--icon-selector-xl);
63
+ margin-inline-end: var(--spacing-selector-xl-margin_y);
64
+
65
+ &--disabled {
66
+ opacity: var(--opacity-30);
67
+ }
68
+ }
69
+
70
+ &__arrow {
71
+ font-size: var(--icon-small);
72
+ margin-inline-start: var(--spacing-selector-l-margin_y);
73
+ color: var(--color-selector-icon_down-default);
74
+ transition: transform .3s;
75
+
76
+ &--active {
77
+ color: var(--color-selector-icon_down-active);
78
+ }
79
+
80
+ &--disabled {
81
+ color: var(--color-selector-icon_down-disable);
82
+ }
83
+ }
84
+
85
+ }
86
+
87
+ &-l {
88
+
89
+ &__title {
90
+ font-size: var(--en-single-f-d-r-fontSize);
91
+ font-weight: var(--en-single-f-d-r-fontWeight);
92
+ color: var(--color-selector-l-text-default);
93
+ white-space: nowrap;
94
+ overflow: hidden;
95
+ text-overflow: ellipsis;
96
+
97
+ &--active {
98
+ font-size: var(--en-single-f-d-s-fontSize);
99
+ font-weight: var(--en-single-f-d-s-fontWeight);
100
+ color: var(--color-selector-l-text-active);
101
+ }
102
+
103
+ &--disabled {
104
+ font-size: var(--en-single-f-d-s-fontSize);
105
+ font-weight: var(--en-single-f-d-s-fontWeight);
106
+ color: var(--color-selector-l-text-disable);
107
+ }
108
+ }
109
+
110
+ &__icon {
111
+ display: flex;
112
+ font-size: var(--icon-selector-l);
113
+ margin-inline-end: var(--spacing-selector-l-margin_y);
114
+
115
+ &--disabled {
116
+ opacity: var(--opacity-30);
117
+ }
118
+ }
119
+
120
+ &__arrow {
121
+ font-size: var(--icon-small);
122
+ margin-inline-start: var(--spacing-selector-l-margin_y);
123
+ color: var(--color-selector-icon_down-default);
124
+ transition: transform .3s;
125
+
126
+ &--active {
127
+ color: var(--color-selector-icon_down-active);
128
+ }
129
+
130
+ &--disabled {
131
+ color: var(--color-selector-icon_down-disable);
132
+ }
133
+ }
134
+ }
135
+
136
+ &-m {
137
+
138
+ &__title {
139
+ font-size: var(--en-single-f-c-r-fontSize);
140
+ font-weight: var(--en-single-f-c-r-fontWeight);
141
+ color: var(--color-selector-m-text-default);
142
+ white-space: nowrap;
143
+ overflow: hidden;
144
+ text-overflow: ellipsis;
145
+
146
+ &--active {
147
+ font-size: var(--en-single-f-c-s-fontSize);
148
+ font-weight: var(--en-single-f-c-s-fontWeight);
149
+ color: var(--color-selector-m-text-active);
150
+ }
151
+
152
+ &--disabled {
153
+ font-size: var(--en-single-f-c-s-fontSize);
154
+ font-weight: var(--en-single-f-c-s-fontWeight);
155
+ color: var(--color-selector-m-text-disable);
156
+ }
157
+ }
158
+
159
+ &__icon {
160
+ display: flex;
161
+ font-size: var(--icon-selector-m);
162
+ margin-inline-end: var(--spacing-selector-m-margin_y);
163
+
164
+ &--disabled {
165
+ opacity: var(--opacity-30);
166
+ }
167
+ }
168
+
169
+ &__arrow {
170
+ font-size: var(--icon-small);
171
+ margin-inline-start: var(--spacing-selector-m-margin_y);
172
+ color: var(--color-selector-icon_down-default);
173
+ transition: transform .3s;
174
+
175
+ &--active {
176
+ color: var(--color-selector-icon_down-active);
177
+ }
178
+
179
+ &--disabled {
180
+ color: var(--color-selector-icon_down-disable);
181
+ }
182
+ }
183
+ }
184
+
185
+ &-s {
186
+
187
+ &__title {
188
+ font-size: var(--en-single-f-b-r-fontSize);
189
+ font-weight: var(--en-single-f-b-r-fontWeight);
190
+ color: var(--color-selector-s-text-default);
191
+ white-space: nowrap;
192
+ overflow: hidden;
193
+ text-overflow: ellipsis;
194
+
195
+ &--active {
196
+ font-size: var(--en-single-f-b-r-fontSize);
197
+ font-weight: var(--en-single-f-b-r-fontWeight);
198
+ color: var(--color-selector-s-text-active);
199
+ }
200
+
201
+ &--disabled {
202
+ font-size: var(--en-single-f-b-r-fontSize);
203
+ font-weight: var(--en-single-f-b-r-fontWeight);
204
+ color: var(--color-selector-s-text-disable);
205
+ }
206
+ }
207
+
208
+ &__icon {
209
+ display: flex;
210
+ font-size: var(--icon-selector-s);
211
+ margin-inline-end: var(--spacing-selector-s-margin_y);
212
+
213
+ &--disabled {
214
+ opacity: var(--opacity-30);
215
+ }
216
+ }
217
+
218
+ &__arrow {
219
+ font-size: var(--icon-extra-small);
220
+ margin-inline-start: var(--spacing-selector-s-margin_y);
221
+ color: var(--color-selector-icon_down-default);
222
+ transition: transform .3s;
223
+
224
+ &--active {
225
+ color: var(--color-selector-icon_down-active);
226
+ }
227
+
228
+ &--disabled {
229
+ color: var(--color-selector-icon_down-disable);
230
+ }
231
+ }
232
+ }
233
+
234
+ &-form {
235
+ width: var(--width-selector-form);
236
+ height: var(--height-selector-form);
237
+ padding-inline-start: var(--spacing-selector-padding_y);
238
+ padding-inline-end: var(--spacing-selector-padding_y);
239
+ background-color: var(--color-selector-form-bg-default);
240
+ border-radius: var(--radius-selector-form);
241
+ justify-content: space-between;
242
+
243
+ .@{selector-prefix-cls}__inner {
244
+ justify-content: space-between;
245
+ }
246
+
247
+ &--active {
248
+ background-color: var(--color-selector-form-bg-active);
249
+ }
250
+
251
+ &--disabled {
252
+ background-color: var(--color-selector-form-bg-disable);
253
+ }
254
+
255
+ &__title {
256
+ font-size: var(--en-single-f-d-r-fontSize);
257
+ font-weight: var(--en-single-f-d-r-fontWeight);
258
+ color: var(--color-selector-form-text-default);
259
+ white-space: nowrap;
260
+ overflow: hidden;
261
+ text-overflow: ellipsis;
262
+
263
+ &--active {
264
+ font-size: var(--en-single-f-d-s-fontSize);
265
+ font-weight: var(--en-single-f-d-s-fontWeight);
266
+ color: var(--color-selector-xl-text-active);
267
+ }
268
+
269
+ &--disabled {
270
+ font-size: var(--en-single-f-d-s-fontSize);
271
+ font-weight: var(--en-single-f-d-s-fontWeight);
272
+ color: var(--color-selector-xl-text-disable);
273
+ }
274
+ }
275
+
276
+ &__icon {
277
+ font-size: var(--icon-selector-l);
278
+ margin-inline-end: var(--spacing-selector-icon-margin_right);
279
+
280
+ &--disabled {
281
+ opacity: var(--opacity-30);
282
+ }
283
+ }
284
+
285
+ &__arrow {
286
+ font-size: var(--icon-small);
287
+ margin-inline-start: var(--spacing-selector-down-margin_left);
288
+ color: var(--color-selector-icon_down-default);
289
+ transition: transform .3s;
290
+
291
+ &--active {
292
+ color: var(--color-selector-icon_down-active);
293
+ }
294
+
295
+ &--disabled {
296
+ color: var(--color-selector-icon_down-disable);
297
+ }
298
+ }
299
+ }
300
+
301
+ &--slot {
302
+ position: absolute;
303
+ top: 100%;
304
+ display: none;
305
+ }
306
+
307
+ &--active {
308
+ .@{selector-prefix-cls}-xl {
309
+
310
+ &__title {
311
+ font-size: var(--en-single-f-f-b-fontSize);
312
+ font-weight: var(--en-single-f-f-b-fontWeight);
313
+ color: var(--color-selector-xl-text-active);
314
+ }
315
+
316
+ &__arrow {
317
+ color: var(--color-selector-icon_down-active);
318
+ transition: transform .3s;
319
+ }
320
+
321
+ }
322
+
323
+ .@{selector-prefix-cls}-l {
324
+
325
+ &__title {
326
+ font-size: var(--en-single-f-d-s-fontSize);
327
+ font-weight: var(--en-single-f-d-s-fontWeight);
328
+ color: var(--color-selector-l-text-active);
329
+ }
330
+
331
+ &__arrow {
332
+ color: var(--color-selector-icon_down-active);
333
+ transition: transform .3s;
334
+ }
335
+
336
+ }
337
+
338
+ .@{selector-prefix-cls}-m {
339
+
340
+ &__title {
341
+ font-size: var(--en-single-f-c-s-fontSize);
342
+ font-weight: var(--en-single-f-c-s-fontWeight);
343
+ color: var(--color-selector-m-text-active);
344
+ }
345
+
346
+ &__arrow {
347
+ color: var(--color-selector-icon_down-active);
348
+ transition: transform .3s;
349
+ }
350
+ }
351
+
352
+ .@{selector-prefix-cls}-s {
353
+
354
+ &__title {
355
+ font-size: var(--en-single-f-b-r-fontSize);
356
+ font-weight: var(--en-single-f-b-r-fontWeight);
357
+ color: var(--color-selector-s-text-active);
358
+ }
359
+
360
+ &__arrow {
361
+ color: var(--color-selector-icon_down-active);
362
+ transition: transform .3s;
363
+ }
364
+
365
+ }
366
+
367
+ .@{selector-prefix-cls}-form {
368
+ background-color: var(--color-selector-form-bg-active);
369
+
370
+ &__title {
371
+ font-size: var(--en-single-f-d-s-fontSize);
372
+ font-weight: var(--en-single-f-d-s-fontWeight);
373
+ color: var(--color-selector-xl-text-active);
374
+ }
375
+
376
+ &__arrow {
377
+ color: var(--color-selector-icon_down-active);
378
+ transition: transform .3s;
379
+ }
380
+ }
381
+
382
+ .@{selector-prefix-cls}--slot {
383
+ display: block;
384
+ }
385
+ }
386
+
387
+ &--disabled {
388
+ .@{selector-prefix-cls}-xl {
389
+
390
+ &__title {
391
+ font-size: var(--en-single-f-f-b-fontSize);
392
+ font-weight: var(--en-single-f-f-b-fontWeight);
393
+ color: var(--color-selector-xl-text-disable);
394
+ }
395
+
396
+ &__icon {
397
+ opacity: var(--opacity-30);
398
+ }
399
+
400
+ &__arrow {
401
+ color: var(--color-selector-icon_down-disable);
402
+ }
403
+
404
+
405
+ }
406
+
407
+ .@{selector-prefix-cls}-l {
408
+
409
+ &__title {
410
+ font-size: var(--en-single-f-d-s-fontSize);
411
+ font-weight: var(--en-single-f-d-s-fontWeight);
412
+ color: var(--color-selector-l-text-disable);
413
+ }
414
+
415
+ &__icon {
416
+ opacity: var(--opacity-30);
417
+ }
418
+
419
+ &__arrow {
420
+ color: var(--color-selector-icon_down-disable);
421
+ }
422
+
423
+ }
424
+
425
+ .@{selector-prefix-cls}-m {
426
+
427
+ &__title {
428
+ font-size: var(--en-single-f-c-s-fontSize);
429
+ font-weight: var(--en-single-f-c-s-fontWeight);
430
+ color: var(--color-selector-m-text-disable);
431
+ }
432
+
433
+ &__icon {
434
+ opacity: var(--opacity-30);
435
+ }
436
+
437
+ &__arrow {
438
+ color: var(--color-selector-icon_down-disable);
439
+ }
440
+
441
+ }
442
+
443
+ .@{selector-prefix-cls}-s {
444
+
445
+ &__title {
446
+ font-size: var(--en-single-f-b-r-fontSize);
447
+ font-weight: var(--en-single-f-b-r-fontWeight);
448
+ color: var(--color-selector-s-text-disable);
449
+ }
450
+
451
+ &__icon {
452
+ opacity: var(--opacity-30);
453
+ }
454
+
455
+ &__arrow {
456
+ color: var(--color-selector-icon_down-disable);
457
+ }
458
+
459
+ }
460
+
461
+ .@{selector-prefix-cls}-form {
462
+ background-color: var(--color-selector-form-bg-disable);
463
+
464
+ &__title {
465
+ font-size: var(--en-single-f-d-s-fontSize);
466
+ font-weight: var(--en-single-f-d-s-fontWeight);
467
+ color: var(--color-selector-xl-text-disable);
468
+ }
469
+
470
+ &__icon {
471
+ opacity: var(--opacity-30);
472
+ }
473
+
474
+ &__arrow {
475
+ color: var(--color-selector-icon_down-disable);
476
+ }
477
+ }
478
+ }
479
+
480
+ &__arrow--active {
481
+ transform: rotate(180deg);
482
+ transform-origin: center;
483
+ }
484
+ }