t20-common-lib 0.9.14 → 0.10.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 (41) hide show
  1. package/package.json +64 -86
  2. package/packages/branch-bank-select/index.js +8 -8
  3. package/packages/branch-bank-select/src/main.vue +179 -179
  4. package/packages/common-collapse/index.js +8 -8
  5. package/packages/common-collapse/src/main.vue +147 -147
  6. package/packages/form-page/index.js +8 -8
  7. package/packages/form-page/src/main.vue +55 -55
  8. package/packages/input-number/index.js +8 -0
  9. package/packages/input-number/src/main.vue +184 -0
  10. package/packages/main-page/index.js +8 -8
  11. package/packages/main-page/src/main.vue +43 -43
  12. package/packages/multi-currency-statistics/index.js +8 -8
  13. package/packages/multi-currency-statistics/src/main.vue +229 -229
  14. package/packages/page-header/index.js +8 -8
  15. package/packages/page-header/src/main.vue +95 -95
  16. package/packages/statis-card/index.js +8 -8
  17. package/packages/statis-card/src/main.vue +250 -250
  18. package/packages/tab-page/index.js +8 -8
  19. package/packages/tab-page/src/main.vue +101 -101
  20. package/packages/tab-pane/index.js +8 -8
  21. package/packages/tab-pane/src/main.vue +185 -185
  22. package/packages/table-page/index.js +8 -8
  23. package/packages/table-page/src/main.vue +42 -42
  24. package/packages/theme-chalk/src/common/element-variables.scss +1045 -1045
  25. package/packages/theme-chalk/src/common/normalize.scss +869 -869
  26. package/packages/theme-chalk/src/index.scss +8 -8
  27. package/src/api/common.js +20 -20
  28. package/src/i18n.json +4 -4
  29. package/src/index.js +75 -71
  30. package/src/store/index.js +25 -25
  31. package/src/store/modules/user.js +42 -42
  32. package/src/utils/asciiWidth.js +107 -107
  33. package/src/utils/common.js +12 -12
  34. package/src/utils/date.js +43 -43
  35. package/src/utils/exportFile.js +6 -6
  36. package/src/utils/i18n/cn2hk.json +1270 -1270
  37. package/src/utils/i18n/index.js +69 -69
  38. package/src/utils/repairElementUI.js +141 -141
  39. package/src/utils/tableCellUtils.js +54 -54
  40. package/src/utils/tableheaderFilterpanel.vue +257 -257
  41. package/style/index.css +25 -25
package/packages/theme-chalk/src/common/element-variables.scss CHANGED
@@ -1,1046 +1,1046 @@
1
- /* Element Chalk Variables */
2
-
3
- // Special comment for theme configurator
4
- // type|skipAutoTranslation|Category|Order
5
- // skipAutoTranslation 1
6
- /* Transition
7
- -------------------------- */
8
- $--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
9
- $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
10
- $--fade-linear-transition: opacity 200ms linear !default;
11
- $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
12
- $--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
13
- $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
14
-
15
- $--body-background: #f0f2f5 !default;
16
- /* Color
17
- -------------------------- */
18
- /// color|1|Brand Color|0
19
- $--color-primary: #007aff !default;
20
- /// color|1|Background Color|4
21
- $--color-white: #ffffff !default;
22
- /// color|1|Background Color|4
23
- $--color-black: #000000 !default;
24
- $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
25
- /* #1a87ff */
26
- $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
27
- /* #3395ff */
28
- $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
29
- /* #4da2ff */
30
- $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
31
- /* #66afff */
32
- $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
33
- /* #80bdff */
34
- $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
35
- /* #99caff */
36
- $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
37
- /* #b3d7ff */
38
- $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
39
- /* #cce4ff */
40
- $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
41
- /* #e6f2ff */
42
- /// color|1|Functional Color|1
43
- $--color-success: #48d2a0;
44
- /// color|1|Functional Color|1
45
- $--color-warning: #ff9933;
46
- /// color|1|Functional Color|1
47
- $--color-danger: #ff3b30;
48
- /// color|1|Functional Color|1
49
- $--color-info: #666666;
50
-
51
- $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
52
- $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
53
- $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
54
- $--color-info-light: mix($--color-white, $--color-info, 80%) !default;
55
-
56
- $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
57
- $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
58
- $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
59
- $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
60
-
61
- $--color-primary-hover: mix($--color-black, $--color-primary, 10%) !default;
62
- $--color-success-hover: mix($--color-black, $--color-success, 10%) !default;
63
- $--color-warning-hover: mix($--color-black, $--color-warning, 10%) !default;
64
- $--color-danger-hover: mix($--color-black, $--color-danger, 10%) !default;
65
- $--color-info-hover: mix($--color-black, $--color-info, 10%) !default;
66
-
67
- /// color|1|Font Color|2
68
- $--color-text-primary: #333333;
69
- /// color|1|Font Color|2
70
- $--color-text-regular: #666666;
71
- /// color|1|Font Color|2
72
- $--color-text-secondary: #999999;
73
- /// color|1|Font Color|2
74
- $--color-text-placeholder: #cccccc;
75
- /// color|1|Border Color|3
76
- $--border-color-base: #dcdfe6 !default;
77
- /// color|1|Border Color|3
78
- $--border-color-light: #e4e7ed !default;
79
- /// color|1|Border Color|3
80
- $--border-color-lighter: #ebeef5 !default;
81
- /// color|1|Border Color|3
82
- $--border-color-extra-light: #f2f6fc !default;
83
-
84
- // Background
85
- /// color|1|Background Color|4
86
- $--background-color-base: #f5f5f5 !default;
87
-
88
- /* Link
89
- -------------------------- */
90
- $--link-color: $--color-primary-light-2 !default;
91
- $--link-hover-color: $--color-primary !default;
92
-
93
- /* Border
94
- -------------------------- */
95
- $--border-width-base: 1px !default;
96
- $--border-style-base: solid !default;
97
- $--border-color-hover: $--color-text-placeholder !default;
98
- $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
99
- /// borderRadius|1|Radius|0
100
- $--border-radius-base: 4px !default;
101
- /// borderRadius|1|Radius|0
102
- $--border-radius-small: 2px !default;
103
- /// borderRadius|1|Radius|0
104
- $--border-radius-circle: 100% !default;
105
- /// borderRadius|1|Radius|0
106
- $--border-radius-zero: 0 !default;
107
-
108
- // Box-shadow
109
- /// boxShadow|1|Shadow|1
110
- $--box-shadow-base: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
111
- // boxShadow|1|Shadow|1
112
- $--box-shadow-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
113
- /// boxShadow|1|Shadow|1
114
- $--box-shadow-light: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
115
-
116
- /* Fill
117
- -------------------------- */
118
- $--fill-base: $--color-white !default;
119
-
120
- /* Typography
121
- -------------------------- */
122
- $--font-path: 'fonts' !default;
123
- $--font-display: 'auto' !default;
124
- /// fontSize|1|Font Size|0
125
- $--font-size-extra-large: 20px !default;
126
- /// fontSize|1|Font Size|0
127
- $--font-size-large: 18px !default;
128
- /// fontSize|1|Font Size|0
129
- $--font-size-medium: 16px !default;
130
- /// fontSize|1|Font Size|0
131
- $--font-size-base: 14px !default;
132
- /// fontSize|1|Font Size|0
133
- $--font-size-small: 12px;
134
- /// fontSize|1|Font Size|0
135
- $--font-size-extra-small: 10px !default;
136
- /// fontWeight|1|Font Weight|1
137
- $--font-weight-bold: 600 !default;
138
- $--font-weight-primary: 400 !default;
139
- /// fontWeight|1|Font Weight|1
140
- $--font-weight-secondary: 100 !default;
141
- /// fontLineHeight|1|Line Height|2
142
- $--font-line-height-primary: 1.5;
143
- /// fontLineHeight|1|Line Height|2
144
- $--font-line-height-secondary: 1.5;
145
- $--font-color-disabled-base: #bbb !default;
146
- /* Size
147
- -------------------------- */
148
- $--size-base: 14px !default;
149
-
150
- /* z-index
151
- -------------------------- */
152
- $--index-normal: 1 !default;
153
- $--index-top: 1000 !default;
154
- $--index-popper: 2000 !default;
155
-
156
- /* Disable base
157
- -------------------------- */
158
- $--disabled-fill-base: $--background-color-base !default;
159
- $--disabled-color-base: $--color-text-placeholder !default;
160
- $--disabled-border-base: $--border-color-light !default;
161
-
162
- /* Icon
163
- -------------------------- */
164
- $--icon-color: #666 !default;
165
- $--icon-color-base: $--color-info !default;
166
-
167
- /* Checkbox
168
- -------------------------- */
169
- /// fontSize||Font|1
170
- $--checkbox-font-size: 14px !default;
171
- /// fontWeight||Font|1
172
- $--checkbox-font-weight: $--font-weight-primary !default;
173
- /// color||Color|0
174
- $--checkbox-font-color: $--color-text-regular !default;
175
- $--checkbox-input-height: 14px !default;
176
- $--checkbox-input-width: 14px !default;
177
- /// borderRadius||Border|2
178
- $--checkbox-border-radius: $--border-radius-small !default;
179
- /// color||Color|0
180
- $--checkbox-background-color: $--color-white !default;
181
- $--checkbox-input-border: $--border-base !default;
182
-
183
- /// color||Color|0
184
- $--checkbox-disabled-border-color: $--border-color-base !default;
185
- $--checkbox-disabled-input-fill: #edf2fc !default;
186
- $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
187
-
188
- $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
189
- $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
190
- $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
191
-
192
- /// color||Color|0
193
- $--checkbox-checked-font-color: #666666;
194
- $--checkbox-checked-input-border-color: $--color-primary !default;
195
- /// color||Color|0
196
- $--checkbox-checked-background-color: $--color-primary !default;
197
- $--checkbox-checked-icon-color: $--fill-base !default;
198
-
199
- $--checkbox-input-border-color-hover: $--color-primary !default;
200
- /// height||Other|4
201
- $--checkbox-bordered-height: 40px !default;
202
- /// padding||Spacing|3
203
- $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
204
- /// padding||Spacing|3
205
- $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
206
- /// padding||Spacing|3
207
- $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
208
- /// padding||Spacing|3
209
- $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
210
- $--checkbox-bordered-medium-input-height: 14px !default;
211
- $--checkbox-bordered-medium-input-width: 14px !default;
212
- /// height||Other|4
213
- $--checkbox-bordered-medium-height: 36px !default;
214
- $--checkbox-bordered-small-input-height: 12px !default;
215
- $--checkbox-bordered-small-input-width: 12px !default;
216
- /// height||Other|4
217
- $--checkbox-bordered-small-height: 32px !default;
218
- $--checkbox-bordered-mini-input-height: 12px !default;
219
- $--checkbox-bordered-mini-input-width: 12px !default;
220
- /// height||Other|4
221
- $--checkbox-bordered-mini-height: 28px !default;
222
-
223
- /// color||Color|0
224
- $--checkbox-button-checked-background-color: $--color-primary !default;
225
- /// color||Color|0
226
- $--checkbox-button-checked-font-color: $--color-white !default;
227
- /// color||Color|0
228
- $--checkbox-button-checked-border-color: $--color-primary !default;
229
-
230
- /* Radio
231
- -------------------------- */
232
- /// fontSize||Font|1
233
- $--radio-font-size: $--font-size-base !default;
234
- /// fontWeight||Font|1
235
- $--radio-font-weight: $--font-weight-primary !default;
236
- /// color||Color|0
237
- $--radio-font-color: $--color-text-regular !default;
238
- $--radio-input-height: 14px !default;
239
- $--radio-input-width: 14px !default;
240
- /// borderRadius||Border|2
241
- $--radio-input-border-radius: $--border-radius-circle !default;
242
- /// color||Color|0
243
- $--radio-input-background-color: #ffffff;
244
- $--radio-input-border: $--border-base !default;
245
- /// color||Color|0
246
- $--radio-input-border-color: $--border-color-base !default;
247
- /// color||Color|0
248
- $--radio-icon-color: $--color-white !default;
249
-
250
- $--radio-disabled-input-border-color: $--disabled-border-base !default;
251
- $--radio-disabled-input-fill: $--disabled-fill-base !default;
252
- $--radio-disabled-icon-color: $--disabled-fill-base !default;
253
-
254
- $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
255
- $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
256
- $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
257
-
258
- /// color||Color|0
259
- $--radio-checked-font-color: #666666;
260
- /// color||Color|0
261
- $--radio-checked-input-border-color: $--color-primary !default;
262
- /// color||Color|0
263
- $--radio-checked-input-background-color: #ffffff;
264
- /// color||Color|0
265
- $--radio-checked-icon-color: #ffffff;
266
-
267
- $--radio-input-border-color-hover: $--color-primary !default;
268
-
269
- $--radio-bordered-height: 40px !default;
270
- $--radio-bordered-padding: 12px 20px 0 10px !default;
271
- $--radio-bordered-medium-padding: 10px 20px 0 10px !default;
272
- $--radio-bordered-small-padding: 8px 15px 0 10px !default;
273
- $--radio-bordered-mini-padding: 6px 15px 0 10px !default;
274
- $--radio-bordered-medium-input-height: 14px !default;
275
- $--radio-bordered-medium-input-width: 14px !default;
276
- $--radio-bordered-medium-height: 36px !default;
277
- $--radio-bordered-small-input-height: 12px !default;
278
- $--radio-bordered-small-input-width: 12px !default;
279
- $--radio-bordered-small-height: 32px !default;
280
- $--radio-bordered-mini-input-height: 12px !default;
281
- $--radio-bordered-mini-input-width: 12px !default;
282
- $--radio-bordered-mini-height: 28px !default;
283
-
284
- /// fontSize||Font|1
285
- $--radio-button-font-size: $--font-size-base !default;
286
- /// color||Color|0
287
- $--radio-button-checked-background-color: $--color-primary !default;
288
- /// color||Color|0
289
- $--radio-button-checked-font-color: $--color-white !default;
290
- /// color||Color|0
291
- $--radio-button-checked-border-color: $--color-primary !default;
292
- $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
293
-
294
- /* Select
295
- -------------------------- */
296
- $--select-border-color-hover: $--border-color-hover !default;
297
- $--select-disabled-border: $--disabled-border-base !default;
298
- /// fontSize||Font|1
299
- $--select-font-size: $--font-size-base !default;
300
- $--select-close-hover-color: $--color-text-secondary !default;
301
-
302
- $--select-input-color: $--color-text-placeholder !default;
303
- $--select-multiple-input-color: #666 !default;
304
- /// color||Color|0
305
- $--select-input-focus-border-color: $--color-primary !default;
306
- /// fontSize||Font|1
307
- $--select-input-font-size: 14px !default;
308
-
309
- $--select-option-color: $--color-text-regular !default;
310
- $--select-option-disabled-color: $--color-text-placeholder !default;
311
- $--select-option-disabled-background: $--color-white !default;
312
- /// height||Other|4
313
- $--select-option-height: 32px;
314
- $--select-option-hover-background: $--background-color-base !default;
315
- /// color||Color|0
316
- $--select-option-selected-font-color: $--color-primary !default;
317
- $--select-option-selected-hover: $--background-color-base !default;
318
-
319
- $--select-group-color: $--color-info !default;
320
- $--select-group-height: 30px !default;
321
- $--select-group-font-size: 12px !default;
322
-
323
- $--select-dropdown-background: $--color-white !default;
324
- $--select-dropdown-shadow: $--box-shadow-light !default;
325
- $--select-dropdown-empty-color: #999 !default;
326
- /// height||Other|4
327
- $--select-dropdown-max-height: 274px !default;
328
- $--select-dropdown-padding: 6px 0 !default;
329
- $--select-dropdown-empty-padding: 10px 0 !default;
330
- $--select-dropdown-border: solid 1px $--border-color-light !default;
331
-
332
- /* Alert
333
- -------------------------- */
334
- $--alert-padding: 8px 16px !default;
335
- /// borderRadius||Border|2
336
- $--alert-border-radius: $--border-radius-base !default;
337
- /// fontSize||Font|1
338
- $--alert-title-font-size: 13px !default;
339
- /// fontSize||Font|1
340
- $--alert-description-font-size: 12px !default;
341
- /// fontSize||Font|1
342
- $--alert-close-font-size: 12px !default;
343
- /// fontSize||Font|1
344
- $--alert-close-customed-font-size: 13px !default;
345
-
346
- $--alert-success-color: $--color-success-lighter !default;
347
- $--alert-info-color: $--color-info-lighter !default;
348
- $--alert-warning-color: $--color-warning-lighter !default;
349
- $--alert-danger-color: $--color-danger-lighter !default;
350
-
351
- /// height||Other|4
352
- $--alert-icon-size: 16px !default;
353
- /// height||Other|4
354
- $--alert-icon-large-size: 28px !default;
355
-
356
- /* MessageBox
357
- -------------------------- */
358
- /// color||Color|0
359
- $--messagebox-title-color: $--color-text-primary !default;
360
- $--msgbox-width: 420px !default;
361
- $--msgbox-border-radius: 4px !default;
362
- /// fontSize||Font|1
363
- $--messagebox-font-size: $--font-size-medium !default;
364
- /// fontSize||Font|1
365
- $--messagebox-content-font-size: $--font-size-base !default;
366
- /// color||Color|0
367
- $--messagebox-content-color: $--color-text-regular !default;
368
- /// fontSize||Font|1
369
- $--messagebox-error-font-size: 12px !default;
370
- $--msgbox-padding-primary: 15px !default;
371
- /// color||Color|0
372
- $--messagebox-success-color: $--color-success !default;
373
- /// color||Color|0
374
- $--messagebox-info-color: $--color-info !default;
375
- /// color||Color|0
376
- $--messagebox-warning-color: $--color-warning !default;
377
- /// color||Color|0
378
- $--messagebox-danger-color: $--color-danger !default;
379
-
380
- /* Message
381
- -------------------------- */
382
- $--message-shadow: $--box-shadow-base !default;
383
- $--message-min-width: 380px !default;
384
- $--message-background-color: #edf2fc !default;
385
- $--message-padding: 15px 15px 15px 20px !default;
386
- /// color||Color|0
387
- $--message-close-icon-color: $--color-text-placeholder !default;
388
- /// height||Other|4
389
- $--message-close-size: 16px !default;
390
- /// color||Color|0
391
- $--message-close-hover-color: $--color-text-secondary !default;
392
-
393
- /// color||Color|0
394
- $--message-success-font-color: $--color-success !default;
395
- /// color||Color|0
396
- $--message-info-font-color: $--color-info !default;
397
- /// color||Color|0
398
- $--message-warning-font-color: $--color-warning !default;
399
- /// color||Color|0
400
- $--message-danger-font-color: $--color-danger !default;
401
-
402
- /* Notification
403
- -------------------------- */
404
- $--notification-width: 330px !default;
405
- /// padding||Spacing|3
406
- $--notification-padding: 14px 26px 14px 13px !default;
407
- $--notification-radius: 8px !default;
408
- $--notification-shadow: $--box-shadow-light !default;
409
- /// color||Color|0
410
- $--notification-border-color: $--border-color-lighter !default;
411
- $--notification-icon-size: 24px !default;
412
- $--notification-close-font-size: $--message-close-size !default;
413
- $--notification-group-margin-left: 13px !default;
414
- $--notification-group-margin-right: 8px !default;
415
- /// fontSize||Font|1
416
- $--notification-content-font-size: $--font-size-base !default;
417
- /// color||Color|0
418
- $--notification-content-color: $--color-text-regular !default;
419
- /// fontSize||Font|1
420
- $--notification-title-font-size: 16px !default;
421
- /// color||Color|0
422
- $--notification-title-color: $--color-text-primary !default;
423
-
424
- /// color||Color|0
425
- $--notification-close-color: $--color-text-secondary !default;
426
- /// color||Color|0
427
- $--notification-close-hover-color: $--color-text-regular !default;
428
-
429
- /// color||Color|0
430
- $--notification-success-icon-color: $--color-success !default;
431
- /// color||Color|0
432
- $--notification-info-icon-color: $--color-info !default;
433
- /// color||Color|0
434
- $--notification-warning-icon-color: $--color-warning !default;
435
- /// color||Color|0
436
- $--notification-danger-icon-color: $--color-danger !default;
437
-
438
- /* Input
439
- -------------------------- */
440
- $--input-font-size: $--font-size-base !default;
441
- /// color||Color|0
442
- $--input-font-color: $--color-text-regular !default;
443
- /// height||Other|4
444
- $--input-width: 224px;
445
-
446
- $--input-max-width: 356px;
447
- /// height||Other|4
448
- $--input-height: 32px;
449
- $--input-border: $--border-base !default;
450
- $--input-border-color: $--border-color-base !default;
451
- /// borderRadius||Border|2
452
- $--input-border-radius: $--border-radius-base !default;
453
- $--input-border-color-hover: $--border-color-hover !default;
454
- /// color||Color|0
455
- $--input-background-color: $--color-white !default;
456
- $--input-fill-disabled: $--disabled-fill-base !default;
457
- $--input-color-disabled: $--font-color-disabled-base !default;
458
- /// color||Color|0
459
- $--input-icon-color: $--color-text-placeholder !default;
460
- /// color||Color|0
461
- $--input-placeholder-color: $--color-text-placeholder !default;
462
- $--input-max-width: 314px !default;
463
-
464
- $--input-hover-border: $--border-color-hover !default;
465
- $--input-clear-hover-color: $--color-text-secondary !default;
466
-
467
- $--input-focus-border: $--color-primary !default;
468
- $--input-focus-fill: $--color-white !default;
469
-
470
- $--input-disabled-fill: $--disabled-fill-base !default;
471
- $--input-disabled-border: $--disabled-border-base !default;
472
- $--input-disabled-color: $--disabled-color-base !default;
473
- $--input-disabled-placeholder-color: $--color-text-placeholder !default;
474
-
475
- /// fontSize||Font|1
476
- $--input-medium-font-size: 14px !default;
477
- /// height||Other|4
478
- $--input-medium-height: 32px;
479
- /// fontSize||Font|1
480
- $--input-small-font-size: 14px;
481
- /// height||Other|4
482
- $--input-small-height: 32px !default;
483
- /// fontSize||Font|1
484
- $--input-mini-font-size: 14px;
485
- /// height||Other|4
486
- $--input-mini-height: 28px !default;
487
-
488
- /* Cascader
489
- -------------------------- */
490
- /// color||Color|0
491
- $--cascader-menu-font-color: $--color-text-regular !default;
492
- /// color||Color|0
493
- $--cascader-menu-selected-font-color: $--color-primary !default;
494
- $--cascader-menu-fill: $--fill-base !default;
495
- $--cascader-menu-font-size: $--font-size-base !default;
496
- $--cascader-menu-radius: $--border-radius-base !default;
497
- $--cascader-menu-border: solid 1px $--border-color-light !default;
498
- $--cascader-menu-shadow: $--box-shadow-light !default;
499
- $--cascader-node-background-hover: $--background-color-base !default;
500
- $--cascader-node-color-disabled: $--color-text-placeholder !default;
501
- $--cascader-color-empty: $--color-text-placeholder !default;
502
- $--cascader-tag-background: #f0f2f5;
503
-
504
- /* Group
505
- -------------------------- */
506
- $--group-option-flex: 0 0 (1/5) * 100% !default;
507
- $--group-option-offset-bottom: 12px !default;
508
- $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
509
- $--group-title-color: $--color-black !default;
510
- $--group-title-font-size: $--font-size-base !default;
511
- $--group-title-width: 66px !default;
512
-
513
- /* Tab
514
- -------------------------- */
515
- $--tab-font-size: $--font-size-base !default;
516
- $--tab-border-line: 1px solid #e4e4e4 !default;
517
- $--tab-header-color-active: $--color-text-secondary !default;
518
- $--tab-header-color-hover: $--color-text-regular !default;
519
- $--tab-header-color: $--color-text-regular !default;
520
- $--tab-header-fill-active: rgba($--color-black, 0.06) !default;
521
- $--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
522
- $--tab-vertical-header-width: 90px !default;
523
- $--tab-vertical-header-count-color: $--color-white !default;
524
- $--tab-vertical-header-count-fill: $--color-text-secondary !default;
525
-
526
- /* Button
527
- -------------------------- */
528
- /// fontSize||Font|1
529
- $--button-font-size: $--font-size-base !default;
530
- /// fontWeight||Font|1
531
- $--button-font-weight: $--font-weight-primary !default;
532
- /// borderRadius||Border|2
533
- $--button-border-radius: $--border-radius-base !default;
534
- /// padding||Spacing|3
535
- $--button-padding-vertical: 8px;
536
- /// padding||Spacing|3
537
- $--button-padding-horizontal: 7px;
538
-
539
- /// fontSize||Font|1
540
- $--button-medium-font-size: $--font-size-base !default;
541
- /// borderRadius||Border|2
542
- $--button-medium-border-radius: $--border-radius-base !default;
543
- /// padding||Spacing|3
544
- $--button-medium-padding-vertical: 8px;
545
- /// padding||Spacing|3
546
- $--button-medium-padding-horizontal: 7px;
547
-
548
- /// fontSize||Font|1
549
- $--button-small-font-size: 14px;
550
- $--button-small-border-radius: $--border-radius-base !default;
551
- /// padding||Spacing|3
552
- $--button-small-padding-vertical: 8px;
553
- /// padding||Spacing|3
554
- $--button-small-padding-horizontal: 7px;
555
- /// fontSize||Font|1
556
- $--button-mini-font-size: 14px;
557
- $--button-mini-border-radius: $--border-radius-base !default;
558
- /// padding||Spacing|3
559
- $--button-mini-padding-vertical: 5px;
560
- /// padding||Spacing|3
561
- $--button-mini-padding-horizontal: 7px;
562
-
563
- /// color||Color|0
564
- $--button-default-font-color: #333333;
565
- /// color||Color|0
566
- $--button-default-background-color: #ffffff;
567
- /// color||Color|0
568
- $--button-default-border-color: #dddddd;
569
-
570
- /// color||Color|0
571
- $--button-disabled-font-color: #cccccc;
572
- /// color||Color|0
573
- $--button-disabled-background-color: #eeeeee;
574
- /// color||Color|0
575
- $--button-disabled-border-color: #dddddd;
576
-
577
- /// color||Color|0
578
- $--button-primary-border-color: $--color-primary !default;
579
- /// color||Color|0
580
- $--button-primary-font-color: $--color-white !default;
581
- /// color||Color|0
582
- $--button-primary-background-color: $--color-primary !default;
583
- /// color||Color|0
584
- $--button-success-border-color: $--color-success !default;
585
- /// color||Color|0
586
- $--button-success-font-color: $--color-white !default;
587
- /// color||Color|0
588
- $--button-success-background-color: $--color-success !default;
589
- /// color||Color|0
590
- $--button-warning-border-color: $--color-warning !default;
591
- /// color||Color|0
592
- $--button-warning-font-color: $--color-white !default;
593
- /// color||Color|0
594
- $--button-warning-background-color: $--color-warning !default;
595
- /// color||Color|0
596
- $--button-danger-border-color: #ff3b30;
597
- /// color||Color|0
598
- $--button-danger-font-color: $--color-white !default;
599
- /// color||Color|0
600
- $--button-danger-background-color: #ff3b30;
601
- /// color||Color|0
602
- $--button-info-border-color: $--color-info !default;
603
- /// color||Color|0
604
- $--button-info-font-color: $--color-white !default;
605
- /// color||Color|0
606
- $--button-info-background-color: $--color-info !default;
607
-
608
- $--button-hover-tint-percent: 20% !default;
609
- $--button-active-shade-percent: 10% !default;
610
-
611
- /* cascader
612
- -------------------------- */
613
- $--cascader-height: 200px !default;
614
-
615
- /* Switch
616
- -------------------------- */
617
- /// color||Color|0
618
- $--switch-on-color: $--color-primary !default;
619
- /// color||Color|0
620
- $--switch-off-color: #cccccc;
621
- /// fontSize||Font|1
622
- $--switch-font-size: $--font-size-base !default;
623
- $--switch-core-border-radius: 10px !default;
624
- // height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
625
- $--switch-width: 40px !default;
626
- // height||Other|4
627
- $--switch-height: 20px !default;
628
- // height||Other|4
629
- $--switch-button-size: 16px !default;
630
-
631
- /* Dialog
632
- -------------------------- */
633
- $--dialog-background-color: $--color-white !default;
634
- $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
635
- /// fontSize||Font|1
636
- $--dialog-title-font-size: $--font-size-medium !default;
637
- /// fontSize||Font|1
638
- $--dialog-content-font-size: 14px !default;
639
- /// fontLineHeight||LineHeight|2
640
- $--dialog-font-line-height: $--font-line-height-primary !default;
641
- /// padding||Spacing|3
642
- $--dialog-padding-primary: 16px !default;
643
-
644
- /* Table
645
- -------------------------- */
646
- /// color||Color|0
647
- $--table-border-color: $--border-color-lighter !default;
648
- $--table-border: 1px solid $--table-border-color !default;
649
- /// color||Color|0
650
- $--table-font-color: #333333;
651
- /// color||Color|0
652
- $--table-header-font-color: #333333;
653
- /// color||Color|0
654
- $--table-row-hover-background-color: #fafafa;
655
- $--table-current-row-background-color: $--color-primary-light-9 !default;
656
- /// color||Color|0
657
- $--table-header-background-color: #f5f5f5;
658
- $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
659
-
660
- /* Pagination
661
- -------------------------- */
662
- /// fontSize||Font|1
663
- $--pagination-font-size: 13px !default;
664
- /// color||Color|0
665
- $--pagination-background-color: $--color-white !default;
666
- /// color||Color|0
667
- $--pagination-font-color: $--color-text-primary !default;
668
- $--pagination-border-radius: 3px !default;
669
- /// color||Color|0
670
- $--pagination-button-color: $--color-text-primary !default;
671
- /// height||Other|4
672
- $--pagination-button-width: 26px;
673
- /// height||Other|4
674
- $--pagination-button-height: 26px;
675
- /// color||Color|0
676
- $--pagination-button-disabled-color: $--color-text-placeholder !default;
677
- /// color||Color|0
678
- $--pagination-button-disabled-background-color: $--color-white !default;
679
- /// color||Color|0
680
- $--pagination-hover-color: $--color-primary !default;
681
-
682
- /* Popup
683
- -------------------------- */
684
- /// color||Color|0
685
- $--popup-modal-background-color: $--color-black !default;
686
- /// opacity||Other|1
687
- $--popup-modal-opacity: 0.4 !default;
688
-
689
- /* Popover
690
- -------------------------- */
691
- /// color||Color|0
692
- $--popover-background-color: $--color-white !default;
693
- /// fontSize||Font|1
694
- $--popover-font-size: $--font-size-base !default;
695
- /// color||Color|0
696
- $--popover-border-color: $--border-color-lighter !default;
697
- $--popover-arrow-size: 6px !default;
698
- /// padding||Spacing|3
699
- $--popover-padding: 12px !default;
700
- $--popover-padding-large: 18px 20px !default;
701
- /// fontSize||Font|1
702
- $--popover-title-font-size: 16px !default;
703
- /// color||Color|0
704
- $--popover-title-font-color: $--color-text-primary !default;
705
-
706
- /* Tooltip
707
- -------------------------- */
708
- /// color|1|Color|0
709
- $--tooltip-fill: $--color-text-primary !default;
710
- /// color|1|Color|0
711
- $--tooltip-color: $--color-white !default;
712
- /// fontSize||Font|1
713
- $--tooltip-font-size: 12px !default;
714
- /// color||Color|0
715
- $--tooltip-border-color: $--color-text-primary !default;
716
- $--tooltip-arrow-size: 6px !default;
717
- /// padding||Spacing|3
718
- $--tooltip-padding: 10px !default;
719
-
720
- /* Tag
721
- -------------------------- */
722
- /// color||Color|0
723
- $--tag-info-color: $--color-info !default;
724
- /// color||Color|0
725
- $--tag-primary-color: $--color-primary !default;
726
- /// color||Color|0
727
- $--tag-success-color: $--color-success !default;
728
- /// color||Color|0
729
- $--tag-warning-color: $--color-warning !default;
730
- /// color||Color|0
731
- $--tag-danger-color: $--color-danger !default;
732
- /// fontSize||Font|1
733
- $--tag-font-size: 12px !default;
734
- $--tag-border-radius: 4px !default;
735
- $--tag-padding: 0 10px !default;
736
-
737
- /* Tree
738
- -------------------------- */
739
- /// color||Color|0
740
- $--tree-node-hover-background-color: $--background-color-base !default;
741
- /// color||Color|0
742
- $--tree-font-color: $--color-text-regular !default;
743
- /// color||Color|0
744
- $--tree-expand-icon-color: $--color-text-placeholder !default;
745
-
746
- /* Dropdown
747
- -------------------------- */
748
- $--dropdown-menu-box-shadow: $--box-shadow-light !default;
749
- $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
750
- $--dropdown-menuItem-hover-color: $--link-color !default;
751
-
752
- /* Badge
753
- -------------------------- */
754
- /// color||Color|0
755
- $--badge-background-color: $--color-danger !default;
756
- $--badge-radius: 10px !default;
757
- /// fontSize||Font|1
758
- $--badge-font-size: 12px !default;
759
- /// padding||Spacing|3
760
- $--badge-padding: 5px;
761
- /// height||Other|4
762
- $--badge-size: 16px;
763
-
764
- /* Card
765
- --------------------------*/
766
- /// color||Color|0
767
- $--card-border-color: $--border-color-lighter !default;
768
- $--card-border-radius: 4px !default;
769
- /// padding||Spacing|3
770
- $--card-padding: 20px !default;
771
-
772
- /* Slider
773
- --------------------------*/
774
- /// color||Color|0
775
- $--slider-main-background-color: $--color-primary !default;
776
- /// color||Color|0
777
- $--slider-runway-background-color: $--border-color-light !default;
778
- $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
779
- $--slider-stop-background-color: $--color-white !default;
780
- $--slider-disable-color: $--color-text-placeholder !default;
781
- $--slider-margin: 16px 0 !default;
782
- $--slider-border-radius: 3px !default;
783
- /// height|1|Other|4
784
- $--slider-height: 6px !default;
785
- /// height||Other|4
786
- $--slider-button-size: 16px !default;
787
- $--slider-button-wrapper-size: 36px !default;
788
- $--slider-button-wrapper-offset: -15px !default;
789
-
790
- /* Steps
791
- --------------------------*/
792
- $--steps-border-color: $--disabled-border-base !default;
793
- $--steps-border-radius: 4px !default;
794
- $--steps-padding: 20px !default;
795
-
796
- /* Menu
797
- --------------------------*/
798
- /// fontSize||Font|1
799
- $--menu-item-font-size: $--font-size-base !default;
800
- /// color||Color|0
801
- $--menu-item-font-color: $--color-text-primary !default;
802
- /// color||Color|0
803
- $--menu-background-color: $--color-white !default;
804
- $--menu-item-hover-fill: $--color-primary-light-9 !default;
805
-
806
- /* Rate
807
- --------------------------*/
808
- $--rate-height: 20px !default;
809
- /// fontSize||Font|1
810
- $--rate-font-size: $--font-size-base !default;
811
- /// height||Other|3
812
- $--rate-icon-size: 18px !default;
813
- /// margin||Spacing|2
814
- $--rate-icon-margin: 6px !default;
815
- $--rate-icon-color: $--color-text-placeholder !default;
816
-
817
- /* DatePicker
818
- --------------------------*/
819
- $--datepicker-font-color: $--color-text-regular !default;
820
- /// color|1|Color|0
821
- $--datepicker-off-font-color: $--color-text-placeholder !default;
822
- /// color||Color|0
823
- $--datepicker-header-font-color: $--color-text-regular !default;
824
- $--datepicker-icon-color: $--color-text-primary !default;
825
- $--datepicker-border-color: $--disabled-border-base !default;
826
- $--datepicker-inner-border-color: #e4e4e4 !default;
827
- /// color||Color|0
828
- $--datepicker-inrange-background-color: $--border-color-extra-light !default;
829
- /// color||Color|0
830
- $--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
831
- /// color||Color|0
832
- $--datepicker-active-color: $--color-primary !default;
833
- /// color||Color|0
834
- $--datepicker-hover-font-color: $--color-primary !default;
835
- $--datepicker-cell-hover-color: #fff !default;
836
-
837
- /* Loading
838
- --------------------------*/
839
- /// height||Other|4
840
- $--loading-spinner-size: 36px;
841
- /// height||Other|4
842
- $--loading-fullscreen-spinner-size: 36px;
843
-
844
- /* Scrollbar
845
- --------------------------*/
846
- $--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
847
- $--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
848
-
849
- /* Carousel
850
- --------------------------*/
851
- /// fontSize||Font|1
852
- $--carousel-arrow-font-size: 12px !default;
853
- $--carousel-arrow-size: 36px !default;
854
- $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
855
- $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
856
- /// width||Other|4
857
- $--carousel-indicator-width: 30px !default;
858
- /// height||Other|4
859
- $--carousel-indicator-height: 2px !default;
860
- $--carousel-indicator-padding-horizontal: 4px !default;
861
- $--carousel-indicator-padding-vertical: 12px !default;
862
- $--carousel-indicator-out-color: $--border-color-hover !default;
863
-
864
- /* Collapse
865
- --------------------------*/
866
- /// color||Color|0
867
- $--collapse-border-color: $--border-color-lighter !default;
868
- /// height||Other|4
869
- $--collapse-header-height: 48px !default;
870
- /// color||Color|0
871
- $--collapse-header-background-color: $--color-white !default;
872
- /// color||Color|0
873
- $--collapse-header-font-color: $--color-text-primary !default;
874
- /// fontSize||Font|1
875
- $--collapse-header-font-size: 13px !default;
876
- /// color||Color|0
877
- $--collapse-content-background-color: $--color-white !default;
878
- /// fontSize||Font|1
879
- $--collapse-content-font-size: 13px !default;
880
- /// color||Color|0
881
- $--collapse-content-font-color: $--color-text-primary !default;
882
-
883
- /* Transfer
884
- --------------------------*/
885
- $--transfer-border-color: $--border-color-lighter !default;
886
- $--transfer-border-radius: $--border-radius-base !default;
887
- /// height||Other|4
888
- $--transfer-panel-width: 200px !default;
889
- /// height||Other|4
890
- $--transfer-panel-header-height: 40px !default;
891
- /// color||Color|0
892
- $--transfer-panel-header-background-color: $--background-color-base !default;
893
- /// height||Other|4
894
- $--transfer-panel-footer-height: 40px !default;
895
- /// height||Other|4
896
- $--transfer-panel-body-height: 246px !default;
897
- /// height||Other|4
898
- $--transfer-item-height: 30px !default;
899
- /// height||Other|4
900
- $--transfer-filter-height: 32px !default;
901
-
902
- /* Header
903
- --------------------------*/
904
- $--header-padding: 0 20px !default;
905
-
906
- /* Footer
907
- --------------------------*/
908
- $--footer-padding: 0 20px !default;
909
-
910
- /* Main
911
- --------------------------*/
912
- $--main-padding: 20px !default;
913
-
914
- /* Timeline
915
- --------------------------*/
916
- $--timeline-node-size-normal: 12px !default;
917
- $--timeline-node-size-large: 14px !default;
918
- $--timeline-node-color: $--border-color-light !default;
919
-
920
- /* Backtop
921
- --------------------------*/
922
- /// color||Color|0
923
- $--backtop-background-color: $--color-white !default;
924
- /// color||Color|0
925
- $--backtop-font-color: $--color-primary !default;
926
- /// color||Color|0
927
- $--backtop-hover-background-color: $--border-color-extra-light !default;
928
-
929
- /* Link
930
- --------------------------*/
931
- /// fontSize||Font|1
932
- $--link-font-size: $--font-size-base !default;
933
- /// fontWeight||Font|1
934
- $--link-font-weight: $--font-weight-primary !default;
935
- /// color||Color|0
936
- $--link-default-font-color: $--color-text-regular !default;
937
- /// color||Color|0
938
- $--link-default-active-color: $--color-primary !default;
939
- /// color||Color|0
940
- $--link-disabled-font-color: $--color-text-placeholder !default;
941
- /// color||Color|0
942
- $--link-primary-font-color: $--color-primary !default;
943
- /// color||Color|0
944
- $--link-success-font-color: $--color-success !default;
945
- /// color||Color|0
946
- $--link-warning-font-color: $--color-warning !default;
947
- /// color||Color|0
948
- $--link-danger-font-color: $--color-danger !default;
949
- /// color||Color|0
950
- $--link-info-font-color: $--color-info !default;
951
- /* Calendar
952
- --------------------------*/
953
- /// border||Other|4
954
- $--calendar-border: $--table-border !default;
955
- /// color||Other|4
956
- $--calendar-selected-background-color: #f2f8fe !default;
957
- $--calendar-cell-width: 85px !default;
958
-
959
- /* Form
960
- -------------------------- */
961
- /// fontSize||Font|1
962
- $--form-label-font-size: $--font-size-base !default;
963
-
964
- /* Avatar
965
- --------------------------*/
966
- /// color||Color|0
967
- $--avatar-font-color: #fff !default;
968
- /// color||Color|0
969
- $--avatar-background-color: #1677ff;
970
- /// fontSize||Font Size|1
971
- $--avatar-text-font-size: 14px !default;
972
- /// fontSize||Font Size|1
973
- $--avatar-icon-font-size: 18px !default;
974
- /// borderRadius||Border|2
975
- $--avatar-border-radius: $--border-radius-base !default;
976
- /// size|1|Avatar Size|3
977
- $--avatar-large-size: 40px !default;
978
- /// size|1|Avatar Size|3
979
- $--avatar-medium-size: 32px;
980
- /// size|1|Avatar Size|3
981
- $--avatar-small-size: 28px !default;
982
-
983
- /* Empty
984
- -------------------------- */
985
- $--empty-padding: 40px 0 !default;
986
- $--empty-image-width: 160px !default;
987
- $--empty-description-margin-top: 20px !default;
988
- $--empty-bottom-margin-top: 20px !default;
989
-
990
- /* Descriptions
991
- -------------------------- */
992
- $--descriptions-header-margin-bottom: 20px !default;
993
- $--descriptions-title-font-size: 16px !default;
994
- $--descriptions-table-border: 1px solid $--border-color-lighter !default;
995
- $--descriptions-item-bordered-label-background: #fafafa !default;
996
-
997
- /* Skeleton
998
- --------------------------*/
999
- $--skeleton-color: #f2f2f2 !default;
1000
- $--skeleton-to-color: #e6e6e6 !default;
1001
-
1002
- /* Svg
1003
- --------------- */
1004
- $--svg-monochrome-grey: #dcdde0 !default;
1005
-
1006
- /* Result
1007
- -------------------------- */
1008
- $--result-padding: 40px 30px !default;
1009
- $--result-icon-font-size: 64px !default;
1010
- $--result-title-font-size: 20px !default;
1011
- $--result-title-margin-top: 20px !default;
1012
- $--result-subtitle-margin-top: 10px !default;
1013
- $--result-extra-margin-top: 30px !default;
1014
- $--result-info-color: $--color-info !default;
1015
- $--result-success-color: $--color-success !default;
1016
- $--result-warning-color: $--color-warning !default;
1017
- $--result-danger-color: $--color-danger !default;
1018
-
1019
- /* Break-point
1020
- --------------------------*/
1021
- $--sm: 768px !default;
1022
- $--md: 992px !default;
1023
- $--lg: 1200px !default;
1024
- $--xl: 1920px !default;
1025
-
1026
- $--breakpoints: (
1027
- 'xs': (max-width: $--sm - 1),
1028
- 'sm': (min-width: $--sm ),
1029
- 'md': (min-width: $--md ),
1030
- 'lg': (min-width: $--lg ),
1031
- 'xl': (min-width: $--xl )
1032
- );
1033
-
1034
- $--breakpoints-spec: (
1035
- 'xs-only': (max-width: $--sm - 1),
1036
- 'sm-and-up': (min-width: $--sm ),
1037
- 'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
1038
- 'sm-and-down': (max-width: $--md - 1),
1039
- 'md-and-up': (min-width: $--md ),
1040
- 'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
1041
- 'md-and-down': (max-width: $--lg - 1),
1042
- 'lg-and-up': (min-width: $--lg ),
1043
- 'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
1044
- 'lg-and-down': (max-width: $--xl - 1),
1045
- 'xl-only': (min-width: $--xl )
1
+ /* Element Chalk Variables */
2
+
3
+ // Special comment for theme configurator
4
+ // type|skipAutoTranslation|Category|Order
5
+ // skipAutoTranslation 1
6
+ /* Transition
7
+ -------------------------- */
8
+ $--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
9
+ $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
10
+ $--fade-linear-transition: opacity 200ms linear !default;
11
+ $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
12
+ $--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
13
+ $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
14
+
15
+ $--body-background: #f0f2f5 !default;
16
+ /* Color
17
+ -------------------------- */
18
+ /// color|1|Brand Color|0
19
+ $--color-primary: #007aff !default;
20
+ /// color|1|Background Color|4
21
+ $--color-white: #ffffff !default;
22
+ /// color|1|Background Color|4
23
+ $--color-black: #000000 !default;
24
+ $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
25
+ /* #1a87ff */
26
+ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
27
+ /* #3395ff */
28
+ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
29
+ /* #4da2ff */
30
+ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
31
+ /* #66afff */
32
+ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
33
+ /* #80bdff */
34
+ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
35
+ /* #99caff */
36
+ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
37
+ /* #b3d7ff */
38
+ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
39
+ /* #cce4ff */
40
+ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
41
+ /* #e6f2ff */
42
+ /// color|1|Functional Color|1
43
+ $--color-success: #48d2a0;
44
+ /// color|1|Functional Color|1
45
+ $--color-warning: #ff9933;
46
+ /// color|1|Functional Color|1
47
+ $--color-danger: #ff3b30;
48
+ /// color|1|Functional Color|1
49
+ $--color-info: #666666;
50
+
51
+ $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
52
+ $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
53
+ $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
54
+ $--color-info-light: mix($--color-white, $--color-info, 80%) !default;
55
+
56
+ $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
57
+ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
58
+ $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
59
+ $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
60
+
61
+ $--color-primary-hover: mix($--color-black, $--color-primary, 10%) !default;
62
+ $--color-success-hover: mix($--color-black, $--color-success, 10%) !default;
63
+ $--color-warning-hover: mix($--color-black, $--color-warning, 10%) !default;
64
+ $--color-danger-hover: mix($--color-black, $--color-danger, 10%) !default;
65
+ $--color-info-hover: mix($--color-black, $--color-info, 10%) !default;
66
+
67
+ /// color|1|Font Color|2
68
+ $--color-text-primary: #333333;
69
+ /// color|1|Font Color|2
70
+ $--color-text-regular: #666666;
71
+ /// color|1|Font Color|2
72
+ $--color-text-secondary: #999999;
73
+ /// color|1|Font Color|2
74
+ $--color-text-placeholder: #cccccc;
75
+ /// color|1|Border Color|3
76
+ $--border-color-base: #dcdfe6 !default;
77
+ /// color|1|Border Color|3
78
+ $--border-color-light: #e4e7ed !default;
79
+ /// color|1|Border Color|3
80
+ $--border-color-lighter: #ebeef5 !default;
81
+ /// color|1|Border Color|3
82
+ $--border-color-extra-light: #f2f6fc !default;
83
+
84
+ // Background
85
+ /// color|1|Background Color|4
86
+ $--background-color-base: #f5f5f5 !default;
87
+
88
+ /* Link
89
+ -------------------------- */
90
+ $--link-color: $--color-primary-light-2 !default;
91
+ $--link-hover-color: $--color-primary !default;
92
+
93
+ /* Border
94
+ -------------------------- */
95
+ $--border-width-base: 1px !default;
96
+ $--border-style-base: solid !default;
97
+ $--border-color-hover: $--color-text-placeholder !default;
98
+ $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
99
+ /// borderRadius|1|Radius|0
100
+ $--border-radius-base: 4px !default;
101
+ /// borderRadius|1|Radius|0
102
+ $--border-radius-small: 2px !default;
103
+ /// borderRadius|1|Radius|0
104
+ $--border-radius-circle: 100% !default;
105
+ /// borderRadius|1|Radius|0
106
+ $--border-radius-zero: 0 !default;
107
+
108
+ // Box-shadow
109
+ /// boxShadow|1|Shadow|1
110
+ $--box-shadow-base: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
111
+ // boxShadow|1|Shadow|1
112
+ $--box-shadow-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
113
+ /// boxShadow|1|Shadow|1
114
+ $--box-shadow-light: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
115
+
116
+ /* Fill
117
+ -------------------------- */
118
+ $--fill-base: $--color-white !default;
119
+
120
+ /* Typography
121
+ -------------------------- */
122
+ $--font-path: 'fonts' !default;
123
+ $--font-display: 'auto' !default;
124
+ /// fontSize|1|Font Size|0
125
+ $--font-size-extra-large: 20px !default;
126
+ /// fontSize|1|Font Size|0
127
+ $--font-size-large: 18px !default;
128
+ /// fontSize|1|Font Size|0
129
+ $--font-size-medium: 16px !default;
130
+ /// fontSize|1|Font Size|0
131
+ $--font-size-base: 14px !default;
132
+ /// fontSize|1|Font Size|0
133
+ $--font-size-small: 12px;
134
+ /// fontSize|1|Font Size|0
135
+ $--font-size-extra-small: 10px !default;
136
+ /// fontWeight|1|Font Weight|1
137
+ $--font-weight-bold: 600 !default;
138
+ $--font-weight-primary: 400 !default;
139
+ /// fontWeight|1|Font Weight|1
140
+ $--font-weight-secondary: 100 !default;
141
+ /// fontLineHeight|1|Line Height|2
142
+ $--font-line-height-primary: 1.5;
143
+ /// fontLineHeight|1|Line Height|2
144
+ $--font-line-height-secondary: 1.5;
145
+ $--font-color-disabled-base: #bbb !default;
146
+ /* Size
147
+ -------------------------- */
148
+ $--size-base: 14px !default;
149
+
150
+ /* z-index
151
+ -------------------------- */
152
+ $--index-normal: 1 !default;
153
+ $--index-top: 1000 !default;
154
+ $--index-popper: 2000 !default;
155
+
156
+ /* Disable base
157
+ -------------------------- */
158
+ $--disabled-fill-base: $--background-color-base !default;
159
+ $--disabled-color-base: $--color-text-placeholder !default;
160
+ $--disabled-border-base: $--border-color-light !default;
161
+
162
+ /* Icon
163
+ -------------------------- */
164
+ $--icon-color: #666 !default;
165
+ $--icon-color-base: $--color-info !default;
166
+
167
+ /* Checkbox
168
+ -------------------------- */
169
+ /// fontSize||Font|1
170
+ $--checkbox-font-size: 14px !default;
171
+ /// fontWeight||Font|1
172
+ $--checkbox-font-weight: $--font-weight-primary !default;
173
+ /// color||Color|0
174
+ $--checkbox-font-color: $--color-text-regular !default;
175
+ $--checkbox-input-height: 14px !default;
176
+ $--checkbox-input-width: 14px !default;
177
+ /// borderRadius||Border|2
178
+ $--checkbox-border-radius: $--border-radius-small !default;
179
+ /// color||Color|0
180
+ $--checkbox-background-color: $--color-white !default;
181
+ $--checkbox-input-border: $--border-base !default;
182
+
183
+ /// color||Color|0
184
+ $--checkbox-disabled-border-color: $--border-color-base !default;
185
+ $--checkbox-disabled-input-fill: #edf2fc !default;
186
+ $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
187
+
188
+ $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
189
+ $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
190
+ $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
191
+
192
+ /// color||Color|0
193
+ $--checkbox-checked-font-color: #666666;
194
+ $--checkbox-checked-input-border-color: $--color-primary !default;
195
+ /// color||Color|0
196
+ $--checkbox-checked-background-color: $--color-primary !default;
197
+ $--checkbox-checked-icon-color: $--fill-base !default;
198
+
199
+ $--checkbox-input-border-color-hover: $--color-primary !default;
200
+ /// height||Other|4
201
+ $--checkbox-bordered-height: 40px !default;
202
+ /// padding||Spacing|3
203
+ $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
204
+ /// padding||Spacing|3
205
+ $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
206
+ /// padding||Spacing|3
207
+ $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
208
+ /// padding||Spacing|3
209
+ $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
210
+ $--checkbox-bordered-medium-input-height: 14px !default;
211
+ $--checkbox-bordered-medium-input-width: 14px !default;
212
+ /// height||Other|4
213
+ $--checkbox-bordered-medium-height: 36px !default;
214
+ $--checkbox-bordered-small-input-height: 12px !default;
215
+ $--checkbox-bordered-small-input-width: 12px !default;
216
+ /// height||Other|4
217
+ $--checkbox-bordered-small-height: 32px !default;
218
+ $--checkbox-bordered-mini-input-height: 12px !default;
219
+ $--checkbox-bordered-mini-input-width: 12px !default;
220
+ /// height||Other|4
221
+ $--checkbox-bordered-mini-height: 28px !default;
222
+
223
+ /// color||Color|0
224
+ $--checkbox-button-checked-background-color: $--color-primary !default;
225
+ /// color||Color|0
226
+ $--checkbox-button-checked-font-color: $--color-white !default;
227
+ /// color||Color|0
228
+ $--checkbox-button-checked-border-color: $--color-primary !default;
229
+
230
+ /* Radio
231
+ -------------------------- */
232
+ /// fontSize||Font|1
233
+ $--radio-font-size: $--font-size-base !default;
234
+ /// fontWeight||Font|1
235
+ $--radio-font-weight: $--font-weight-primary !default;
236
+ /// color||Color|0
237
+ $--radio-font-color: $--color-text-regular !default;
238
+ $--radio-input-height: 14px !default;
239
+ $--radio-input-width: 14px !default;
240
+ /// borderRadius||Border|2
241
+ $--radio-input-border-radius: $--border-radius-circle !default;
242
+ /// color||Color|0
243
+ $--radio-input-background-color: #ffffff;
244
+ $--radio-input-border: $--border-base !default;
245
+ /// color||Color|0
246
+ $--radio-input-border-color: $--border-color-base !default;
247
+ /// color||Color|0
248
+ $--radio-icon-color: $--color-white !default;
249
+
250
+ $--radio-disabled-input-border-color: $--disabled-border-base !default;
251
+ $--radio-disabled-input-fill: $--disabled-fill-base !default;
252
+ $--radio-disabled-icon-color: $--disabled-fill-base !default;
253
+
254
+ $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
255
+ $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
256
+ $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
257
+
258
+ /// color||Color|0
259
+ $--radio-checked-font-color: #666666;
260
+ /// color||Color|0
261
+ $--radio-checked-input-border-color: $--color-primary !default;
262
+ /// color||Color|0
263
+ $--radio-checked-input-background-color: #ffffff;
264
+ /// color||Color|0
265
+ $--radio-checked-icon-color: #ffffff;
266
+
267
+ $--radio-input-border-color-hover: $--color-primary !default;
268
+
269
+ $--radio-bordered-height: 40px !default;
270
+ $--radio-bordered-padding: 12px 20px 0 10px !default;
271
+ $--radio-bordered-medium-padding: 10px 20px 0 10px !default;
272
+ $--radio-bordered-small-padding: 8px 15px 0 10px !default;
273
+ $--radio-bordered-mini-padding: 6px 15px 0 10px !default;
274
+ $--radio-bordered-medium-input-height: 14px !default;
275
+ $--radio-bordered-medium-input-width: 14px !default;
276
+ $--radio-bordered-medium-height: 36px !default;
277
+ $--radio-bordered-small-input-height: 12px !default;
278
+ $--radio-bordered-small-input-width: 12px !default;
279
+ $--radio-bordered-small-height: 32px !default;
280
+ $--radio-bordered-mini-input-height: 12px !default;
281
+ $--radio-bordered-mini-input-width: 12px !default;
282
+ $--radio-bordered-mini-height: 28px !default;
283
+
284
+ /// fontSize||Font|1
285
+ $--radio-button-font-size: $--font-size-base !default;
286
+ /// color||Color|0
287
+ $--radio-button-checked-background-color: $--color-primary !default;
288
+ /// color||Color|0
289
+ $--radio-button-checked-font-color: $--color-white !default;
290
+ /// color||Color|0
291
+ $--radio-button-checked-border-color: $--color-primary !default;
292
+ $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
293
+
294
+ /* Select
295
+ -------------------------- */
296
+ $--select-border-color-hover: $--border-color-hover !default;
297
+ $--select-disabled-border: $--disabled-border-base !default;
298
+ /// fontSize||Font|1
299
+ $--select-font-size: $--font-size-base !default;
300
+ $--select-close-hover-color: $--color-text-secondary !default;
301
+
302
+ $--select-input-color: $--color-text-placeholder !default;
303
+ $--select-multiple-input-color: #666 !default;
304
+ /// color||Color|0
305
+ $--select-input-focus-border-color: $--color-primary !default;
306
+ /// fontSize||Font|1
307
+ $--select-input-font-size: 14px !default;
308
+
309
+ $--select-option-color: $--color-text-regular !default;
310
+ $--select-option-disabled-color: $--color-text-placeholder !default;
311
+ $--select-option-disabled-background: $--color-white !default;
312
+ /// height||Other|4
313
+ $--select-option-height: 32px;
314
+ $--select-option-hover-background: $--background-color-base !default;
315
+ /// color||Color|0
316
+ $--select-option-selected-font-color: $--color-primary !default;
317
+ $--select-option-selected-hover: $--background-color-base !default;
318
+
319
+ $--select-group-color: $--color-info !default;
320
+ $--select-group-height: 30px !default;
321
+ $--select-group-font-size: 12px !default;
322
+
323
+ $--select-dropdown-background: $--color-white !default;
324
+ $--select-dropdown-shadow: $--box-shadow-light !default;
325
+ $--select-dropdown-empty-color: #999 !default;
326
+ /// height||Other|4
327
+ $--select-dropdown-max-height: 274px !default;
328
+ $--select-dropdown-padding: 6px 0 !default;
329
+ $--select-dropdown-empty-padding: 10px 0 !default;
330
+ $--select-dropdown-border: solid 1px $--border-color-light !default;
331
+
332
+ /* Alert
333
+ -------------------------- */
334
+ $--alert-padding: 8px 16px !default;
335
+ /// borderRadius||Border|2
336
+ $--alert-border-radius: $--border-radius-base !default;
337
+ /// fontSize||Font|1
338
+ $--alert-title-font-size: 13px !default;
339
+ /// fontSize||Font|1
340
+ $--alert-description-font-size: 12px !default;
341
+ /// fontSize||Font|1
342
+ $--alert-close-font-size: 12px !default;
343
+ /// fontSize||Font|1
344
+ $--alert-close-customed-font-size: 13px !default;
345
+
346
+ $--alert-success-color: $--color-success-lighter !default;
347
+ $--alert-info-color: $--color-info-lighter !default;
348
+ $--alert-warning-color: $--color-warning-lighter !default;
349
+ $--alert-danger-color: $--color-danger-lighter !default;
350
+
351
+ /// height||Other|4
352
+ $--alert-icon-size: 16px !default;
353
+ /// height||Other|4
354
+ $--alert-icon-large-size: 28px !default;
355
+
356
+ /* MessageBox
357
+ -------------------------- */
358
+ /// color||Color|0
359
+ $--messagebox-title-color: $--color-text-primary !default;
360
+ $--msgbox-width: 420px !default;
361
+ $--msgbox-border-radius: 4px !default;
362
+ /// fontSize||Font|1
363
+ $--messagebox-font-size: $--font-size-medium !default;
364
+ /// fontSize||Font|1
365
+ $--messagebox-content-font-size: $--font-size-base !default;
366
+ /// color||Color|0
367
+ $--messagebox-content-color: $--color-text-regular !default;
368
+ /// fontSize||Font|1
369
+ $--messagebox-error-font-size: 12px !default;
370
+ $--msgbox-padding-primary: 15px !default;
371
+ /// color||Color|0
372
+ $--messagebox-success-color: $--color-success !default;
373
+ /// color||Color|0
374
+ $--messagebox-info-color: $--color-info !default;
375
+ /// color||Color|0
376
+ $--messagebox-warning-color: $--color-warning !default;
377
+ /// color||Color|0
378
+ $--messagebox-danger-color: $--color-danger !default;
379
+
380
+ /* Message
381
+ -------------------------- */
382
+ $--message-shadow: $--box-shadow-base !default;
383
+ $--message-min-width: 380px !default;
384
+ $--message-background-color: #edf2fc !default;
385
+ $--message-padding: 15px 15px 15px 20px !default;
386
+ /// color||Color|0
387
+ $--message-close-icon-color: $--color-text-placeholder !default;
388
+ /// height||Other|4
389
+ $--message-close-size: 16px !default;
390
+ /// color||Color|0
391
+ $--message-close-hover-color: $--color-text-secondary !default;
392
+
393
+ /// color||Color|0
394
+ $--message-success-font-color: $--color-success !default;
395
+ /// color||Color|0
396
+ $--message-info-font-color: $--color-info !default;
397
+ /// color||Color|0
398
+ $--message-warning-font-color: $--color-warning !default;
399
+ /// color||Color|0
400
+ $--message-danger-font-color: $--color-danger !default;
401
+
402
+ /* Notification
403
+ -------------------------- */
404
+ $--notification-width: 330px !default;
405
+ /// padding||Spacing|3
406
+ $--notification-padding: 14px 26px 14px 13px !default;
407
+ $--notification-radius: 8px !default;
408
+ $--notification-shadow: $--box-shadow-light !default;
409
+ /// color||Color|0
410
+ $--notification-border-color: $--border-color-lighter !default;
411
+ $--notification-icon-size: 24px !default;
412
+ $--notification-close-font-size: $--message-close-size !default;
413
+ $--notification-group-margin-left: 13px !default;
414
+ $--notification-group-margin-right: 8px !default;
415
+ /// fontSize||Font|1
416
+ $--notification-content-font-size: $--font-size-base !default;
417
+ /// color||Color|0
418
+ $--notification-content-color: $--color-text-regular !default;
419
+ /// fontSize||Font|1
420
+ $--notification-title-font-size: 16px !default;
421
+ /// color||Color|0
422
+ $--notification-title-color: $--color-text-primary !default;
423
+
424
+ /// color||Color|0
425
+ $--notification-close-color: $--color-text-secondary !default;
426
+ /// color||Color|0
427
+ $--notification-close-hover-color: $--color-text-regular !default;
428
+
429
+ /// color||Color|0
430
+ $--notification-success-icon-color: $--color-success !default;
431
+ /// color||Color|0
432
+ $--notification-info-icon-color: $--color-info !default;
433
+ /// color||Color|0
434
+ $--notification-warning-icon-color: $--color-warning !default;
435
+ /// color||Color|0
436
+ $--notification-danger-icon-color: $--color-danger !default;
437
+
438
+ /* Input
439
+ -------------------------- */
440
+ $--input-font-size: $--font-size-base !default;
441
+ /// color||Color|0
442
+ $--input-font-color: $--color-text-regular !default;
443
+ /// height||Other|4
444
+ $--input-width: 224px;
445
+
446
+ $--input-max-width: 356px;
447
+ /// height||Other|4
448
+ $--input-height: 32px;
449
+ $--input-border: $--border-base !default;
450
+ $--input-border-color: $--border-color-base !default;
451
+ /// borderRadius||Border|2
452
+ $--input-border-radius: $--border-radius-base !default;
453
+ $--input-border-color-hover: $--border-color-hover !default;
454
+ /// color||Color|0
455
+ $--input-background-color: $--color-white !default;
456
+ $--input-fill-disabled: $--disabled-fill-base !default;
457
+ $--input-color-disabled: $--font-color-disabled-base !default;
458
+ /// color||Color|0
459
+ $--input-icon-color: $--color-text-placeholder !default;
460
+ /// color||Color|0
461
+ $--input-placeholder-color: $--color-text-placeholder !default;
462
+ $--input-max-width: 314px !default;
463
+
464
+ $--input-hover-border: $--border-color-hover !default;
465
+ $--input-clear-hover-color: $--color-text-secondary !default;
466
+
467
+ $--input-focus-border: $--color-primary !default;
468
+ $--input-focus-fill: $--color-white !default;
469
+
470
+ $--input-disabled-fill: $--disabled-fill-base !default;
471
+ $--input-disabled-border: $--disabled-border-base !default;
472
+ $--input-disabled-color: $--disabled-color-base !default;
473
+ $--input-disabled-placeholder-color: $--color-text-placeholder !default;
474
+
475
+ /// fontSize||Font|1
476
+ $--input-medium-font-size: 14px !default;
477
+ /// height||Other|4
478
+ $--input-medium-height: 32px;
479
+ /// fontSize||Font|1
480
+ $--input-small-font-size: 14px;
481
+ /// height||Other|4
482
+ $--input-small-height: 32px !default;
483
+ /// fontSize||Font|1
484
+ $--input-mini-font-size: 14px;
485
+ /// height||Other|4
486
+ $--input-mini-height: 28px !default;
487
+
488
+ /* Cascader
489
+ -------------------------- */
490
+ /// color||Color|0
491
+ $--cascader-menu-font-color: $--color-text-regular !default;
492
+ /// color||Color|0
493
+ $--cascader-menu-selected-font-color: $--color-primary !default;
494
+ $--cascader-menu-fill: $--fill-base !default;
495
+ $--cascader-menu-font-size: $--font-size-base !default;
496
+ $--cascader-menu-radius: $--border-radius-base !default;
497
+ $--cascader-menu-border: solid 1px $--border-color-light !default;
498
+ $--cascader-menu-shadow: $--box-shadow-light !default;
499
+ $--cascader-node-background-hover: $--background-color-base !default;
500
+ $--cascader-node-color-disabled: $--color-text-placeholder !default;
501
+ $--cascader-color-empty: $--color-text-placeholder !default;
502
+ $--cascader-tag-background: #f0f2f5;
503
+
504
+ /* Group
505
+ -------------------------- */
506
+ $--group-option-flex: 0 0 (1/5) * 100% !default;
507
+ $--group-option-offset-bottom: 12px !default;
508
+ $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
509
+ $--group-title-color: $--color-black !default;
510
+ $--group-title-font-size: $--font-size-base !default;
511
+ $--group-title-width: 66px !default;
512
+
513
+ /* Tab
514
+ -------------------------- */
515
+ $--tab-font-size: $--font-size-base !default;
516
+ $--tab-border-line: 1px solid #e4e4e4 !default;
517
+ $--tab-header-color-active: $--color-text-secondary !default;
518
+ $--tab-header-color-hover: $--color-text-regular !default;
519
+ $--tab-header-color: $--color-text-regular !default;
520
+ $--tab-header-fill-active: rgba($--color-black, 0.06) !default;
521
+ $--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
522
+ $--tab-vertical-header-width: 90px !default;
523
+ $--tab-vertical-header-count-color: $--color-white !default;
524
+ $--tab-vertical-header-count-fill: $--color-text-secondary !default;
525
+
526
+ /* Button
527
+ -------------------------- */
528
+ /// fontSize||Font|1
529
+ $--button-font-size: $--font-size-base !default;
530
+ /// fontWeight||Font|1
531
+ $--button-font-weight: $--font-weight-primary !default;
532
+ /// borderRadius||Border|2
533
+ $--button-border-radius: $--border-radius-base !default;
534
+ /// padding||Spacing|3
535
+ $--button-padding-vertical: 8px;
536
+ /// padding||Spacing|3
537
+ $--button-padding-horizontal: 7px;
538
+
539
+ /// fontSize||Font|1
540
+ $--button-medium-font-size: $--font-size-base !default;
541
+ /// borderRadius||Border|2
542
+ $--button-medium-border-radius: $--border-radius-base !default;
543
+ /// padding||Spacing|3
544
+ $--button-medium-padding-vertical: 8px;
545
+ /// padding||Spacing|3
546
+ $--button-medium-padding-horizontal: 7px;
547
+
548
+ /// fontSize||Font|1
549
+ $--button-small-font-size: 14px;
550
+ $--button-small-border-radius: $--border-radius-base !default;
551
+ /// padding||Spacing|3
552
+ $--button-small-padding-vertical: 8px;
553
+ /// padding||Spacing|3
554
+ $--button-small-padding-horizontal: 7px;
555
+ /// fontSize||Font|1
556
+ $--button-mini-font-size: 14px;
557
+ $--button-mini-border-radius: $--border-radius-base !default;
558
+ /// padding||Spacing|3
559
+ $--button-mini-padding-vertical: 5px;
560
+ /// padding||Spacing|3
561
+ $--button-mini-padding-horizontal: 7px;
562
+
563
+ /// color||Color|0
564
+ $--button-default-font-color: #333333;
565
+ /// color||Color|0
566
+ $--button-default-background-color: #ffffff;
567
+ /// color||Color|0
568
+ $--button-default-border-color: #dddddd;
569
+
570
+ /// color||Color|0
571
+ $--button-disabled-font-color: #cccccc;
572
+ /// color||Color|0
573
+ $--button-disabled-background-color: #eeeeee;
574
+ /// color||Color|0
575
+ $--button-disabled-border-color: #dddddd;
576
+
577
+ /// color||Color|0
578
+ $--button-primary-border-color: $--color-primary !default;
579
+ /// color||Color|0
580
+ $--button-primary-font-color: $--color-white !default;
581
+ /// color||Color|0
582
+ $--button-primary-background-color: $--color-primary !default;
583
+ /// color||Color|0
584
+ $--button-success-border-color: $--color-success !default;
585
+ /// color||Color|0
586
+ $--button-success-font-color: $--color-white !default;
587
+ /// color||Color|0
588
+ $--button-success-background-color: $--color-success !default;
589
+ /// color||Color|0
590
+ $--button-warning-border-color: $--color-warning !default;
591
+ /// color||Color|0
592
+ $--button-warning-font-color: $--color-white !default;
593
+ /// color||Color|0
594
+ $--button-warning-background-color: $--color-warning !default;
595
+ /// color||Color|0
596
+ $--button-danger-border-color: #ff3b30;
597
+ /// color||Color|0
598
+ $--button-danger-font-color: $--color-white !default;
599
+ /// color||Color|0
600
+ $--button-danger-background-color: #ff3b30;
601
+ /// color||Color|0
602
+ $--button-info-border-color: $--color-info !default;
603
+ /// color||Color|0
604
+ $--button-info-font-color: $--color-white !default;
605
+ /// color||Color|0
606
+ $--button-info-background-color: $--color-info !default;
607
+
608
+ $--button-hover-tint-percent: 20% !default;
609
+ $--button-active-shade-percent: 10% !default;
610
+
611
+ /* cascader
612
+ -------------------------- */
613
+ $--cascader-height: 200px !default;
614
+
615
+ /* Switch
616
+ -------------------------- */
617
+ /// color||Color|0
618
+ $--switch-on-color: $--color-primary !default;
619
+ /// color||Color|0
620
+ $--switch-off-color: #cccccc;
621
+ /// fontSize||Font|1
622
+ $--switch-font-size: $--font-size-base !default;
623
+ $--switch-core-border-radius: 10px !default;
624
+ // height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
625
+ $--switch-width: 40px !default;
626
+ // height||Other|4
627
+ $--switch-height: 20px !default;
628
+ // height||Other|4
629
+ $--switch-button-size: 16px !default;
630
+
631
+ /* Dialog
632
+ -------------------------- */
633
+ $--dialog-background-color: $--color-white !default;
634
+ $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
635
+ /// fontSize||Font|1
636
+ $--dialog-title-font-size: $--font-size-medium !default;
637
+ /// fontSize||Font|1
638
+ $--dialog-content-font-size: 14px !default;
639
+ /// fontLineHeight||LineHeight|2
640
+ $--dialog-font-line-height: $--font-line-height-primary !default;
641
+ /// padding||Spacing|3
642
+ $--dialog-padding-primary: 16px !default;
643
+
644
+ /* Table
645
+ -------------------------- */
646
+ /// color||Color|0
647
+ $--table-border-color: $--border-color-lighter !default;
648
+ $--table-border: 1px solid $--table-border-color !default;
649
+ /// color||Color|0
650
+ $--table-font-color: #333333;
651
+ /// color||Color|0
652
+ $--table-header-font-color: #333333;
653
+ /// color||Color|0
654
+ $--table-row-hover-background-color: #fafafa;
655
+ $--table-current-row-background-color: $--color-primary-light-9 !default;
656
+ /// color||Color|0
657
+ $--table-header-background-color: #f5f5f5;
658
+ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
659
+
660
+ /* Pagination
661
+ -------------------------- */
662
+ /// fontSize||Font|1
663
+ $--pagination-font-size: 13px !default;
664
+ /// color||Color|0
665
+ $--pagination-background-color: $--color-white !default;
666
+ /// color||Color|0
667
+ $--pagination-font-color: $--color-text-primary !default;
668
+ $--pagination-border-radius: 3px !default;
669
+ /// color||Color|0
670
+ $--pagination-button-color: $--color-text-primary !default;
671
+ /// height||Other|4
672
+ $--pagination-button-width: 26px;
673
+ /// height||Other|4
674
+ $--pagination-button-height: 26px;
675
+ /// color||Color|0
676
+ $--pagination-button-disabled-color: $--color-text-placeholder !default;
677
+ /// color||Color|0
678
+ $--pagination-button-disabled-background-color: $--color-white !default;
679
+ /// color||Color|0
680
+ $--pagination-hover-color: $--color-primary !default;
681
+
682
+ /* Popup
683
+ -------------------------- */
684
+ /// color||Color|0
685
+ $--popup-modal-background-color: $--color-black !default;
686
+ /// opacity||Other|1
687
+ $--popup-modal-opacity: 0.4 !default;
688
+
689
+ /* Popover
690
+ -------------------------- */
691
+ /// color||Color|0
692
+ $--popover-background-color: $--color-white !default;
693
+ /// fontSize||Font|1
694
+ $--popover-font-size: $--font-size-base !default;
695
+ /// color||Color|0
696
+ $--popover-border-color: $--border-color-lighter !default;
697
+ $--popover-arrow-size: 6px !default;
698
+ /// padding||Spacing|3
699
+ $--popover-padding: 12px !default;
700
+ $--popover-padding-large: 18px 20px !default;
701
+ /// fontSize||Font|1
702
+ $--popover-title-font-size: 16px !default;
703
+ /// color||Color|0
704
+ $--popover-title-font-color: $--color-text-primary !default;
705
+
706
+ /* Tooltip
707
+ -------------------------- */
708
+ /// color|1|Color|0
709
+ $--tooltip-fill: $--color-text-primary !default;
710
+ /// color|1|Color|0
711
+ $--tooltip-color: $--color-white !default;
712
+ /// fontSize||Font|1
713
+ $--tooltip-font-size: 12px !default;
714
+ /// color||Color|0
715
+ $--tooltip-border-color: $--color-text-primary !default;
716
+ $--tooltip-arrow-size: 6px !default;
717
+ /// padding||Spacing|3
718
+ $--tooltip-padding: 10px !default;
719
+
720
+ /* Tag
721
+ -------------------------- */
722
+ /// color||Color|0
723
+ $--tag-info-color: $--color-info !default;
724
+ /// color||Color|0
725
+ $--tag-primary-color: $--color-primary !default;
726
+ /// color||Color|0
727
+ $--tag-success-color: $--color-success !default;
728
+ /// color||Color|0
729
+ $--tag-warning-color: $--color-warning !default;
730
+ /// color||Color|0
731
+ $--tag-danger-color: $--color-danger !default;
732
+ /// fontSize||Font|1
733
+ $--tag-font-size: 12px !default;
734
+ $--tag-border-radius: 4px !default;
735
+ $--tag-padding: 0 10px !default;
736
+
737
+ /* Tree
738
+ -------------------------- */
739
+ /// color||Color|0
740
+ $--tree-node-hover-background-color: $--background-color-base !default;
741
+ /// color||Color|0
742
+ $--tree-font-color: $--color-text-regular !default;
743
+ /// color||Color|0
744
+ $--tree-expand-icon-color: $--color-text-placeholder !default;
745
+
746
+ /* Dropdown
747
+ -------------------------- */
748
+ $--dropdown-menu-box-shadow: $--box-shadow-light !default;
749
+ $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
750
+ $--dropdown-menuItem-hover-color: $--link-color !default;
751
+
752
+ /* Badge
753
+ -------------------------- */
754
+ /// color||Color|0
755
+ $--badge-background-color: $--color-danger !default;
756
+ $--badge-radius: 10px !default;
757
+ /// fontSize||Font|1
758
+ $--badge-font-size: 12px !default;
759
+ /// padding||Spacing|3
760
+ $--badge-padding: 5px;
761
+ /// height||Other|4
762
+ $--badge-size: 16px;
763
+
764
+ /* Card
765
+ --------------------------*/
766
+ /// color||Color|0
767
+ $--card-border-color: $--border-color-lighter !default;
768
+ $--card-border-radius: 4px !default;
769
+ /// padding||Spacing|3
770
+ $--card-padding: 20px !default;
771
+
772
+ /* Slider
773
+ --------------------------*/
774
+ /// color||Color|0
775
+ $--slider-main-background-color: $--color-primary !default;
776
+ /// color||Color|0
777
+ $--slider-runway-background-color: $--border-color-light !default;
778
+ $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
779
+ $--slider-stop-background-color: $--color-white !default;
780
+ $--slider-disable-color: $--color-text-placeholder !default;
781
+ $--slider-margin: 16px 0 !default;
782
+ $--slider-border-radius: 3px !default;
783
+ /// height|1|Other|4
784
+ $--slider-height: 6px !default;
785
+ /// height||Other|4
786
+ $--slider-button-size: 16px !default;
787
+ $--slider-button-wrapper-size: 36px !default;
788
+ $--slider-button-wrapper-offset: -15px !default;
789
+
790
+ /* Steps
791
+ --------------------------*/
792
+ $--steps-border-color: $--disabled-border-base !default;
793
+ $--steps-border-radius: 4px !default;
794
+ $--steps-padding: 20px !default;
795
+
796
+ /* Menu
797
+ --------------------------*/
798
+ /// fontSize||Font|1
799
+ $--menu-item-font-size: $--font-size-base !default;
800
+ /// color||Color|0
801
+ $--menu-item-font-color: $--color-text-primary !default;
802
+ /// color||Color|0
803
+ $--menu-background-color: $--color-white !default;
804
+ $--menu-item-hover-fill: $--color-primary-light-9 !default;
805
+
806
+ /* Rate
807
+ --------------------------*/
808
+ $--rate-height: 20px !default;
809
+ /// fontSize||Font|1
810
+ $--rate-font-size: $--font-size-base !default;
811
+ /// height||Other|3
812
+ $--rate-icon-size: 18px !default;
813
+ /// margin||Spacing|2
814
+ $--rate-icon-margin: 6px !default;
815
+ $--rate-icon-color: $--color-text-placeholder !default;
816
+
817
+ /* DatePicker
818
+ --------------------------*/
819
+ $--datepicker-font-color: $--color-text-regular !default;
820
+ /// color|1|Color|0
821
+ $--datepicker-off-font-color: $--color-text-placeholder !default;
822
+ /// color||Color|0
823
+ $--datepicker-header-font-color: $--color-text-regular !default;
824
+ $--datepicker-icon-color: $--color-text-primary !default;
825
+ $--datepicker-border-color: $--disabled-border-base !default;
826
+ $--datepicker-inner-border-color: #e4e4e4 !default;
827
+ /// color||Color|0
828
+ $--datepicker-inrange-background-color: $--border-color-extra-light !default;
829
+ /// color||Color|0
830
+ $--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
831
+ /// color||Color|0
832
+ $--datepicker-active-color: $--color-primary !default;
833
+ /// color||Color|0
834
+ $--datepicker-hover-font-color: $--color-primary !default;
835
+ $--datepicker-cell-hover-color: #fff !default;
836
+
837
+ /* Loading
838
+ --------------------------*/
839
+ /// height||Other|4
840
+ $--loading-spinner-size: 36px;
841
+ /// height||Other|4
842
+ $--loading-fullscreen-spinner-size: 36px;
843
+
844
+ /* Scrollbar
845
+ --------------------------*/
846
+ $--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
847
+ $--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
848
+
849
+ /* Carousel
850
+ --------------------------*/
851
+ /// fontSize||Font|1
852
+ $--carousel-arrow-font-size: 12px !default;
853
+ $--carousel-arrow-size: 36px !default;
854
+ $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
855
+ $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
856
+ /// width||Other|4
857
+ $--carousel-indicator-width: 30px !default;
858
+ /// height||Other|4
859
+ $--carousel-indicator-height: 2px !default;
860
+ $--carousel-indicator-padding-horizontal: 4px !default;
861
+ $--carousel-indicator-padding-vertical: 12px !default;
862
+ $--carousel-indicator-out-color: $--border-color-hover !default;
863
+
864
+ /* Collapse
865
+ --------------------------*/
866
+ /// color||Color|0
867
+ $--collapse-border-color: $--border-color-lighter !default;
868
+ /// height||Other|4
869
+ $--collapse-header-height: 48px !default;
870
+ /// color||Color|0
871
+ $--collapse-header-background-color: $--color-white !default;
872
+ /// color||Color|0
873
+ $--collapse-header-font-color: $--color-text-primary !default;
874
+ /// fontSize||Font|1
875
+ $--collapse-header-font-size: 13px !default;
876
+ /// color||Color|0
877
+ $--collapse-content-background-color: $--color-white !default;
878
+ /// fontSize||Font|1
879
+ $--collapse-content-font-size: 13px !default;
880
+ /// color||Color|0
881
+ $--collapse-content-font-color: $--color-text-primary !default;
882
+
883
+ /* Transfer
884
+ --------------------------*/
885
+ $--transfer-border-color: $--border-color-lighter !default;
886
+ $--transfer-border-radius: $--border-radius-base !default;
887
+ /// height||Other|4
888
+ $--transfer-panel-width: 200px !default;
889
+ /// height||Other|4
890
+ $--transfer-panel-header-height: 40px !default;
891
+ /// color||Color|0
892
+ $--transfer-panel-header-background-color: $--background-color-base !default;
893
+ /// height||Other|4
894
+ $--transfer-panel-footer-height: 40px !default;
895
+ /// height||Other|4
896
+ $--transfer-panel-body-height: 246px !default;
897
+ /// height||Other|4
898
+ $--transfer-item-height: 30px !default;
899
+ /// height||Other|4
900
+ $--transfer-filter-height: 32px !default;
901
+
902
+ /* Header
903
+ --------------------------*/
904
+ $--header-padding: 0 20px !default;
905
+
906
+ /* Footer
907
+ --------------------------*/
908
+ $--footer-padding: 0 20px !default;
909
+
910
+ /* Main
911
+ --------------------------*/
912
+ $--main-padding: 20px !default;
913
+
914
+ /* Timeline
915
+ --------------------------*/
916
+ $--timeline-node-size-normal: 12px !default;
917
+ $--timeline-node-size-large: 14px !default;
918
+ $--timeline-node-color: $--border-color-light !default;
919
+
920
+ /* Backtop
921
+ --------------------------*/
922
+ /// color||Color|0
923
+ $--backtop-background-color: $--color-white !default;
924
+ /// color||Color|0
925
+ $--backtop-font-color: $--color-primary !default;
926
+ /// color||Color|0
927
+ $--backtop-hover-background-color: $--border-color-extra-light !default;
928
+
929
+ /* Link
930
+ --------------------------*/
931
+ /// fontSize||Font|1
932
+ $--link-font-size: $--font-size-base !default;
933
+ /// fontWeight||Font|1
934
+ $--link-font-weight: $--font-weight-primary !default;
935
+ /// color||Color|0
936
+ $--link-default-font-color: $--color-text-regular !default;
937
+ /// color||Color|0
938
+ $--link-default-active-color: $--color-primary !default;
939
+ /// color||Color|0
940
+ $--link-disabled-font-color: $--color-text-placeholder !default;
941
+ /// color||Color|0
942
+ $--link-primary-font-color: $--color-primary !default;
943
+ /// color||Color|0
944
+ $--link-success-font-color: $--color-success !default;
945
+ /// color||Color|0
946
+ $--link-warning-font-color: $--color-warning !default;
947
+ /// color||Color|0
948
+ $--link-danger-font-color: $--color-danger !default;
949
+ /// color||Color|0
950
+ $--link-info-font-color: $--color-info !default;
951
+ /* Calendar
952
+ --------------------------*/
953
+ /// border||Other|4
954
+ $--calendar-border: $--table-border !default;
955
+ /// color||Other|4
956
+ $--calendar-selected-background-color: #f2f8fe !default;
957
+ $--calendar-cell-width: 85px !default;
958
+
959
+ /* Form
960
+ -------------------------- */
961
+ /// fontSize||Font|1
962
+ $--form-label-font-size: $--font-size-base !default;
963
+
964
+ /* Avatar
965
+ --------------------------*/
966
+ /// color||Color|0
967
+ $--avatar-font-color: #fff !default;
968
+ /// color||Color|0
969
+ $--avatar-background-color: #1677ff;
970
+ /// fontSize||Font Size|1
971
+ $--avatar-text-font-size: 14px !default;
972
+ /// fontSize||Font Size|1
973
+ $--avatar-icon-font-size: 18px !default;
974
+ /// borderRadius||Border|2
975
+ $--avatar-border-radius: $--border-radius-base !default;
976
+ /// size|1|Avatar Size|3
977
+ $--avatar-large-size: 40px !default;
978
+ /// size|1|Avatar Size|3
979
+ $--avatar-medium-size: 32px;
980
+ /// size|1|Avatar Size|3
981
+ $--avatar-small-size: 28px !default;
982
+
983
+ /* Empty
984
+ -------------------------- */
985
+ $--empty-padding: 40px 0 !default;
986
+ $--empty-image-width: 160px !default;
987
+ $--empty-description-margin-top: 20px !default;
988
+ $--empty-bottom-margin-top: 20px !default;
989
+
990
+ /* Descriptions
991
+ -------------------------- */
992
+ $--descriptions-header-margin-bottom: 20px !default;
993
+ $--descriptions-title-font-size: 16px !default;
994
+ $--descriptions-table-border: 1px solid $--border-color-lighter !default;
995
+ $--descriptions-item-bordered-label-background: #fafafa !default;
996
+
997
+ /* Skeleton
998
+ --------------------------*/
999
+ $--skeleton-color: #f2f2f2 !default;
1000
+ $--skeleton-to-color: #e6e6e6 !default;
1001
+
1002
+ /* Svg
1003
+ --------------- */
1004
+ $--svg-monochrome-grey: #dcdde0 !default;
1005
+
1006
+ /* Result
1007
+ -------------------------- */
1008
+ $--result-padding: 40px 30px !default;
1009
+ $--result-icon-font-size: 64px !default;
1010
+ $--result-title-font-size: 20px !default;
1011
+ $--result-title-margin-top: 20px !default;
1012
+ $--result-subtitle-margin-top: 10px !default;
1013
+ $--result-extra-margin-top: 30px !default;
1014
+ $--result-info-color: $--color-info !default;
1015
+ $--result-success-color: $--color-success !default;
1016
+ $--result-warning-color: $--color-warning !default;
1017
+ $--result-danger-color: $--color-danger !default;
1018
+
1019
+ /* Break-point
1020
+ --------------------------*/
1021
+ $--sm: 768px !default;
1022
+ $--md: 992px !default;
1023
+ $--lg: 1200px !default;
1024
+ $--xl: 1920px !default;
1025
+
1026
+ $--breakpoints: (
1027
+ 'xs': (max-width: $--sm - 1),
1028
+ 'sm': (min-width: $--sm ),
1029
+ 'md': (min-width: $--md ),
1030
+ 'lg': (min-width: $--lg ),
1031
+ 'xl': (min-width: $--xl )
1032
+ );
1033
+
1034
+ $--breakpoints-spec: (
1035
+ 'xs-only': (max-width: $--sm - 1),
1036
+ 'sm-and-up': (min-width: $--sm ),
1037
+ 'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
1038
+ 'sm-and-down': (max-width: $--md - 1),
1039
+ 'md-and-up': (min-width: $--md ),
1040
+ 'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
1041
+ 'md-and-down': (max-width: $--lg - 1),
1042
+ 'lg-and-up': (min-width: $--lg ),
1043
+ 'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
1044
+ 'lg-and-down': (max-width: $--xl - 1),
1045
+ 'xl-only': (min-width: $--xl )
1046
1046
  );