t20-common-lib 0.2.0 → 0.2.1

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.
@@ -0,0 +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 )
1046
+ );