inl-ui 0.1.20 → 0.1.21

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 (29) hide show
  1. package/README.md +49 -49
  2. package/dist/iconfont.js +69 -69
  3. package/dist/index.cjs +6 -8
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +6 -8
  6. package/dist/theme/index.js +70 -70
  7. package/dist/theme/scripts/dark-vars.js +21 -21
  8. package/dist/theme/scripts/default-vars.js +25 -25
  9. package/dist/theme/scripts/light-vars.js +22 -22
  10. package/dist/theme/style/color/bezierEasing.less +110 -110
  11. package/dist/theme/style/color/colorPalette.less +81 -81
  12. package/dist/theme/style/color/colors.less +162 -162
  13. package/dist/theme/style/color/tinyColor.less +1184 -1184
  14. package/dist/theme/style/compact.less +4 -4
  15. package/dist/theme/style/dark.less +4 -4
  16. package/dist/theme/style/default.less +4 -4
  17. package/dist/theme/style/index.less +2 -2
  18. package/dist/theme/style/index.tsx +2 -2
  19. package/dist/theme/style/themes/compact.less +295 -295
  20. package/dist/theme/style/themes/dark.less +790 -790
  21. package/dist/theme/style/themes/default.less +1067 -1067
  22. package/dist/theme/style/themes/index.less +7 -7
  23. package/dist/theme/style/themes/var-dark.less +343 -343
  24. package/dist/theme/style/themes/var-default.less +184 -184
  25. package/dist/theme/style/themes/variable.less +1122 -1122
  26. package/dist/theme/style/variable.less +4 -4
  27. package/dist/tplib/index.cjs +5 -7
  28. package/dist/tplib/index.js +5 -7
  29. package/package.json +1 -1
package/dist/theme/style/themes/default.less CHANGED
@@ -1,1067 +1,1067 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
- @import '../color/colors';
3
-
4
- @theme: default;
5
-
6
- // The prefix to use on all css classes from ant.
7
- @ant-prefix: ant;
8
-
9
- // An override for the html selector for theme prefixes
10
- @html-selector: html;
11
-
12
- // [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
13
- // [CSS-VARIABLE-REPLACE-END: html-variables]
14
-
15
- // -------- Colors -----------
16
- // >>> Primary
17
- @primary-color: @blue-6;
18
- @primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
19
- @primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
20
- @primary-color-outline: fade(@primary-color, @outline-fade);
21
-
22
- @processing-color: @blue-6;
23
-
24
- // >>> Info
25
- @info-color: @primary-color;
26
- @info-color-deprecated-bg: color(~`colorPalette('@{info-color}', 1) `);
27
- @info-color-deprecated-border: color(~`colorPalette('@{info-color}', 3) `);
28
-
29
- // >>> Success
30
- @success-color: @green-6;
31
- @success-color-hover: color(~`colorPalette('@{success-color}', 5) `);
32
- @success-color-active: color(~`colorPalette('@{success-color}', 7) `);
33
- @success-color-outline: fade(@success-color, @outline-fade);
34
- @success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `);
35
- @success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `);
36
-
37
- // >>> Warning
38
- @warning-color: @gold-6;
39
- @warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `);
40
- @warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
41
- @warning-color-outline: fade(@warning-color, @outline-fade);
42
- @warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
43
- @warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
44
-
45
- // >>> Error
46
- @error-color: @red-5;
47
- @error-color-hover: color(~`colorPalette('@{error-color}', 5) `);
48
- @error-color-active: color(~`colorPalette('@{error-color}', 7) `);
49
- @error-color-outline: fade(@error-color, @outline-fade);
50
- @error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `);
51
- @error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `);
52
-
53
- @highlight-color: @red-5;
54
- @normal-color: #d9d9d9;
55
- @white: #fff;
56
- @black: #000;
57
-
58
- // Color used by default to control hover and active backgrounds and for
59
- // alert info backgrounds.
60
- @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
61
- @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
62
- @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
63
- @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
64
- @primary-5: color(
65
- ~`colorPalette('@{primary-color}', 5) `
66
- ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
67
- @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
68
- @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
69
- @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
70
- @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
71
- @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
72
-
73
- // Base Scaffolding Variables
74
- // ---
75
-
76
- // Background color for `<body>`
77
- @body-background: #fff;
78
- // Base background color for most components
79
- @component-background: #fff;
80
- // Popover background color
81
- @popover-background: @component-background;
82
- @popover-customize-border-color: @border-color-split;
83
- @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
84
- 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
85
- 'Noto Color Emoji';
86
- @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
87
- @text-color: fade(@black, 85%);
88
- @text-color-secondary: fade(@black, 45%);
89
- @text-color-inverse: @white;
90
- @icon-color: inherit;
91
- @icon-color-hover: fade(@black, 75%);
92
- @heading-color: fade(@black, 85%);
93
- @text-color-dark: fade(@white, 85%);
94
- @text-color-secondary-dark: fade(@white, 65%);
95
- @text-selection-bg: @primary-color;
96
- @font-variant-base: tabular-nums;
97
- @font-feature-settings-base: 'tnum';
98
- @font-size-base: 14px;
99
- @font-size-lg: @font-size-base + 2px;
100
- @font-size-sm: 12px;
101
- @heading-1-size: ceil(@font-size-base * 2.71);
102
- @heading-2-size: ceil(@font-size-base * 2.14);
103
- @heading-3-size: ceil(@font-size-base * 1.71);
104
- @heading-4-size: ceil(@font-size-base * 1.42);
105
- @heading-5-size: ceil(@font-size-base * 1.14);
106
- // https://github.com/ant-design/ant-design/issues/20210
107
- @line-height-base: 1.5715;
108
- @border-radius-base: 2px;
109
- @border-radius-sm: @border-radius-base;
110
-
111
- // vertical paddings
112
- @padding-lg: 24px; // containers
113
- @padding-md: 16px; // small containers and buttons
114
- @padding-sm: 12px; // Form controls and items
115
- @padding-xs: 8px; // small items
116
- @padding-xss: 4px; // more small
117
-
118
- // vertical padding for all form controls
119
- @control-padding-horizontal: @padding-sm;
120
- @control-padding-horizontal-sm: @padding-xs;
121
-
122
- // vertical margins
123
- @margin-lg: 24px; // containers
124
- @margin-md: 16px; // small containers and buttons
125
- @margin-sm: 12px; // Form controls and items
126
- @margin-xs: 8px; // small items
127
- @margin-xss: 4px; // more small
128
-
129
- // height rules
130
- @height-base: 32px;
131
- @height-lg: 40px;
132
- @height-sm: 24px;
133
-
134
- // The background colors for active and hover states for things like
135
- // list items or table cells.
136
- @item-active-bg: @primary-1;
137
- @item-hover-bg: #f5f5f5;
138
-
139
- // ICONFONT
140
- @iconfont-css-prefix: anticon;
141
-
142
- // LINK
143
- @link-color: @primary-color;
144
- @link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
145
- @link-active-color: color(~`colorPalette('@{link-color}', 7) `);
146
- @link-decoration: none;
147
- @link-hover-decoration: none;
148
- @link-focus-decoration: none;
149
- @link-focus-outline: 0;
150
-
151
- // Animation
152
- @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
153
- @ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
154
- @ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
155
- @ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
156
- @ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
157
- @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
158
- @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
159
- @ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
160
- @ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
161
- @ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
162
- @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
163
- @ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
164
- @ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
165
- @ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
166
-
167
- // Border color
168
- @border-color-base: hsv(0, 0, 85%); // base border outline a component
169
- @border-color-split: hsv(0, 0, 94%); // split border inside a component
170
- @border-color-inverse: @white;
171
- @border-width-base: 1px; // width of the border for a component
172
- @border-style-base: solid; // style of a components border
173
-
174
- // Outline
175
- @outline-blur-size: 0;
176
- @outline-width: 2px;
177
- @outline-color: @primary-color; // No use anymore
178
- @outline-fade: 20%;
179
-
180
- @background-color-light: hsv(0, 0, 98%); // background of header and selected item
181
- @background-color-base: hsv(0, 0, 96%); // Default grey background color
182
-
183
- // Disabled states
184
- @disabled-color: fade(#000, 25%);
185
- @disabled-bg: @background-color-base;
186
- @disabled-active-bg: tint(@black, 90%);
187
- @disabled-color-dark: fade(#fff, 35%);
188
-
189
- // Shadow
190
- @shadow-color: rgba(0, 0, 0, 0.15);
191
- @shadow-color-inverse: @component-background;
192
- @box-shadow-base: @shadow-2;
193
- @shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
194
- 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
195
- @shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
196
- 0 12px 48px 16px rgba(0, 0, 0, 0.03);
197
- @shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
198
- -12px 0 48px 16px rgba(0, 0, 0, 0.03);
199
- @shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
200
- 12px 0 48px 16px rgba(0, 0, 0, 0.03);
201
- @shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
202
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
203
-
204
- // Buttons
205
- @btn-font-weight: 400;
206
- @btn-border-radius-base: @border-radius-base;
207
- @btn-border-radius-sm: @border-radius-base;
208
- @btn-border-width: @border-width-base;
209
- @btn-border-style: @border-style-base;
210
- @btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
211
- @btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
212
- @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
213
-
214
- @btn-primary-color: #fff;
215
- @btn-primary-bg: @primary-color;
216
-
217
- @btn-default-color: @text-color;
218
- @btn-default-bg: @component-background;
219
- @btn-default-border: @border-color-base;
220
-
221
- @btn-danger-color: #fff;
222
- @btn-danger-bg: @error-color;
223
- @btn-danger-border: @error-color;
224
-
225
- @btn-disable-color: @disabled-color;
226
- @btn-disable-bg: @disabled-bg;
227
- @btn-disable-border: @border-color-base;
228
-
229
- @btn-default-ghost-color: @component-background;
230
- @btn-default-ghost-bg: transparent;
231
- @btn-default-ghost-border: @component-background;
232
-
233
- @btn-font-size-lg: @font-size-lg;
234
- @btn-font-size-sm: @font-size-base;
235
- @btn-padding-horizontal-base: @padding-md - 1px;
236
- @btn-padding-horizontal-lg: @btn-padding-horizontal-base;
237
- @btn-padding-horizontal-sm: @padding-xs - 1px;
238
-
239
- @btn-height-base: @height-base;
240
- @btn-height-lg: @height-lg;
241
- @btn-height-sm: @height-sm;
242
-
243
- @btn-line-height: @line-height-base;
244
-
245
- @btn-circle-size: @btn-height-base;
246
- @btn-circle-size-lg: @btn-height-lg;
247
- @btn-circle-size-sm: @btn-height-sm;
248
-
249
- @btn-square-size: @btn-height-base;
250
- @btn-square-size-lg: @btn-height-lg;
251
- @btn-square-size-sm: @btn-height-sm;
252
- @btn-square-only-icon-size: @font-size-base + 2px;
253
- @btn-square-only-icon-size-sm: @font-size-base;
254
- @btn-square-only-icon-size-lg: @btn-font-size-lg + 2px;
255
-
256
- @btn-group-border: @primary-5;
257
-
258
- @btn-link-hover-bg: transparent;
259
- @btn-text-hover-bg: rgba(0, 0, 0, 0.018);
260
-
261
- // Checkbox
262
- @checkbox-size: 16px;
263
- @checkbox-color: @primary-color;
264
- @checkbox-check-color: #fff;
265
- @checkbox-check-bg: @checkbox-check-color;
266
- @checkbox-border-width: @border-width-base;
267
- @checkbox-border-radius: @border-radius-base;
268
- @checkbox-group-item-margin-right: 8px;
269
-
270
- // Descriptions
271
- @descriptions-bg: #fafafa;
272
- @descriptions-title-margin-bottom: 20px;
273
- @descriptions-default-padding: @padding-md @padding-lg;
274
- @descriptions-middle-padding: @padding-sm @padding-lg;
275
- @descriptions-small-padding: @padding-xs @padding-md;
276
- @descriptions-item-padding-bottom: @padding-md;
277
- @descriptions-item-trailing-colon: true;
278
- @descriptions-item-label-colon-margin-right: 8px;
279
- @descriptions-item-label-colon-margin-left: 2px;
280
- @descriptions-extra-color: @text-color;
281
-
282
- // Divider
283
- @divider-text-padding: 1em;
284
- @divider-orientation-margin: 5%;
285
- @divider-color: rgba(0, 0, 0, 6%);
286
- @divider-vertical-gutter: 8px;
287
-
288
- // Dropdown
289
- @dropdown-selected-color: @primary-color;
290
- @dropdown-menu-submenu-disabled-bg: @component-background;
291
- @dropdown-selected-bg: @item-active-bg;
292
-
293
- // Empty
294
- @empty-font-size: @font-size-base;
295
-
296
- // Radio
297
- @radio-size: 16px;
298
- @radio-top: 0.2em;
299
- @radio-border-width: 1px;
300
- @radio-dot-size: @radio-size - 8px;
301
- @radio-dot-color: @primary-color;
302
- @radio-dot-disabled-color: fade(@black, 20%);
303
- @radio-solid-checked-color: @component-background;
304
-
305
- // Radio buttons
306
- @radio-button-bg: @btn-default-bg;
307
- @radio-button-checked-bg: @btn-default-bg;
308
- @radio-button-color: @btn-default-color;
309
- @radio-button-hover-color: @primary-5;
310
- @radio-button-active-color: @primary-7;
311
- @radio-button-padding-horizontal: @padding-md - 1px;
312
- @radio-disabled-button-checked-bg: @disabled-active-bg;
313
- @radio-disabled-button-checked-color: @disabled-color;
314
- @radio-wrapper-margin-right: 8px;
315
-
316
- // Media queries breakpoints
317
- // @screen-xs and @screen-xs-min is not used in Grid
318
- // smallest break point is @screen-md
319
- @screen-xs: 480px;
320
- @screen-xs-min: @screen-xs;
321
- // 👆 Extra small screen / phone
322
-
323
- // 👇 Small screen / tablet
324
- @screen-sm: 576px;
325
- @screen-sm-min: @screen-sm;
326
-
327
- // Medium screen / desktop
328
- @screen-md: 768px;
329
- @screen-md-min: @screen-md;
330
-
331
- // Large screen / wide desktop
332
- @screen-lg: 992px;
333
- @screen-lg-min: @screen-lg;
334
-
335
- // Extra large screen / full hd
336
- @screen-xl: 1200px;
337
- @screen-xl-min: @screen-xl;
338
-
339
- // Extra extra large screen / large desktop
340
- @screen-xxl: 1600px;
341
- @screen-xxl-min: @screen-xxl;
342
- @screen-xxxl: 2000px;
343
- @screen-xxxl-min: @screen-xxxl;
344
-
345
- // provide a maximum
346
- @screen-xs-max: (@screen-sm-min - 1px);
347
- @screen-sm-max: (@screen-md-min - 1px);
348
- @screen-md-max: (@screen-lg-min - 1px);
349
- @screen-lg-max: (@screen-xl-min - 1px);
350
- @screen-xl-max: (@screen-xxl-min - 1px);
351
- @screen-xxl-max: (@screen-xxxl-min - 1px);
352
-
353
- // Grid system
354
- @grid-columns: 24;
355
-
356
- // Layout
357
- @layout-body-background: #f0f2f5;
358
- @layout-header-background: #001529;
359
- @layout-header-height: 64px;
360
- @layout-header-padding: 0 50px;
361
- @layout-header-color: @text-color;
362
- @layout-footer-padding: 24px 50px;
363
- @layout-footer-background: @layout-body-background;
364
- @layout-sider-background: @layout-header-background;
365
- @layout-trigger-height: 48px;
366
- @layout-trigger-background: #002140;
367
- @layout-trigger-color: #fff;
368
- @layout-zero-trigger-width: 36px;
369
- @layout-zero-trigger-height: 42px;
370
- // Layout light theme
371
- @layout-sider-background-light: #fff;
372
- @layout-trigger-background-light: #fff;
373
- @layout-trigger-color-light: @text-color;
374
-
375
- // z-index list, order by `z-index`
376
- @zindex-badge: auto;
377
- @zindex-table-fixed: 2;
378
- @zindex-affix: 10;
379
- @zindex-back-top: 10;
380
- @zindex-picker-panel: 10;
381
- @zindex-popup-close: 10;
382
- @zindex-modal: 1000;
383
- @zindex-modal-mask: 1000;
384
- @zindex-message: 1010;
385
- @zindex-notification: 1010;
386
- @zindex-popover: 1030;
387
- @zindex-dropdown: 1050;
388
- @zindex-picker: 1050;
389
- @zindex-popoconfirm: 1060;
390
- @zindex-tooltip: 1070;
391
- @zindex-image: 1080;
392
-
393
- // Animation
394
- @animation-duration-slow: 0.3s; // Modal
395
- @animation-duration-base: 0.2s;
396
- @animation-duration-fast: 0.1s; // Tooltip
397
-
398
- //CollapsePanel
399
- @collapse-panel-border-radius: @border-radius-base;
400
-
401
- //Dropdown
402
- @dropdown-menu-bg: @component-background;
403
- @dropdown-vertical-padding: 5px;
404
- @dropdown-edge-child-vertical-padding: 4px;
405
- @dropdown-font-size: @font-size-base;
406
- @dropdown-line-height: 22px;
407
-
408
- // Form
409
- // ---
410
- @label-required-color: @highlight-color;
411
- @label-color: @heading-color;
412
- @form-warning-input-bg: @input-bg;
413
- @form-item-margin-bottom: 24px;
414
- @form-item-trailing-colon: true;
415
- @form-vertical-label-padding: 0 0 8px;
416
- @form-vertical-label-margin: 0;
417
- @form-item-label-font-size: @font-size-base;
418
- @form-item-label-height: @input-height-base;
419
- @form-item-label-colon-margin-right: 8px;
420
- @form-item-label-colon-margin-left: 2px;
421
- @form-error-input-bg: @input-bg;
422
-
423
- // Input
424
- // ---
425
- @input-height-base: @height-base;
426
- @input-height-lg: @height-lg;
427
- @input-height-sm: @height-sm;
428
- @input-padding-horizontal: @control-padding-horizontal - 1px;
429
- @input-padding-horizontal-base: @input-padding-horizontal;
430
- @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
431
- @input-padding-horizontal-lg: @input-padding-horizontal;
432
- @input-padding-vertical-base: max(
433
- (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
434
- @border-width-base,
435
- 3px
436
- );
437
- @input-padding-vertical-sm: max(
438
- (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
439
- @border-width-base,
440
- 0
441
- );
442
- @input-padding-vertical-lg: (
443
- ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
444
- ) - @border-width-base;
445
- @input-placeholder-color: hsv(0, 0, 75%);
446
- @input-color: @text-color;
447
- @input-icon-color: @input-color;
448
- @input-border-color: @border-color-base;
449
- @input-bg: @component-background;
450
- @input-number-hover-border-color: @input-hover-border-color;
451
- @input-number-handler-active-bg: #f4f4f4;
452
- @input-number-handler-hover-bg: @primary-5;
453
- @input-number-handler-bg: @component-background;
454
- @input-number-handler-border-color: @border-color-base;
455
- @input-addon-bg: @background-color-light;
456
- @input-hover-border-color: @primary-5;
457
- @input-disabled-bg: @disabled-bg;
458
- @input-outline-offset: 0 0;
459
- @input-icon-hover-color: fade(@black, 85%);
460
- @input-disabled-color: @disabled-color;
461
-
462
- // Mentions
463
- // ---
464
- @mentions-dropdown-bg: @component-background;
465
- @mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;
466
-
467
- // Select
468
- // ---
469
- @select-border-color: @border-color-base;
470
- @select-item-selected-color: @text-color;
471
- @select-item-selected-font-weight: 600;
472
- @select-dropdown-bg: @component-background;
473
- @select-item-selected-bg: @primary-1;
474
- @select-item-active-bg: @item-hover-bg;
475
- @select-dropdown-vertical-padding: @dropdown-vertical-padding;
476
- @select-dropdown-font-size: @dropdown-font-size;
477
- @select-dropdown-line-height: @dropdown-line-height;
478
- @select-dropdown-height: 32px;
479
- @select-background: @component-background;
480
- @select-clear-background: @select-background;
481
- @select-selection-item-bg: @background-color-base;
482
- @select-selection-item-border-color: @border-color-split;
483
- @select-single-item-height-lg: 40px;
484
- @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
485
- @select-multiple-item-height-lg: 32px;
486
- @select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
487
- @select-multiple-disabled-background: @input-disabled-bg;
488
- @select-multiple-item-disabled-color: #bfbfbf;
489
- @select-multiple-item-disabled-border-color: @select-border-color;
490
-
491
- // Cascader
492
- // ---
493
- @cascader-bg: @component-background;
494
- @cascader-item-selected-bg: @primary-1;
495
- @cascader-menu-bg: @component-background;
496
- @cascader-menu-border-color-split: @border-color-split;
497
-
498
- // Cascader
499
- // ----
500
- @cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
501
- @cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
502
- @cascader-dropdown-font-size: @dropdown-font-size;
503
- @cascader-dropdown-line-height: @dropdown-line-height;
504
-
505
- // Anchor
506
- // ---
507
- @anchor-bg: transparent;
508
- @anchor-border-color: @border-color-split;
509
- @anchor-link-top: 7px;
510
- @anchor-link-left: 16px;
511
- @anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;
512
-
513
- // Tooltip
514
- // ---
515
- // Tooltip max width
516
- @tooltip-max-width: 250px;
517
- // Tooltip text color
518
- @tooltip-color: #fff;
519
- // Tooltip background color
520
- @tooltip-bg: rgba(0, 0, 0, 0.75);
521
- // Tooltip arrow width
522
- @tooltip-arrow-width: 5px;
523
- // Tooltip distance with trigger
524
- @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
525
- // Tooltip arrow color
526
- @tooltip-arrow-color: @tooltip-bg;
527
-
528
- // Popover
529
- // ---
530
- // Popover body background color
531
- @popover-bg: @component-background;
532
- // Popover text color
533
- @popover-color: @text-color;
534
- // Popover maximum width
535
- @popover-min-width: 177px;
536
- @popover-min-height: 32px;
537
- // Popover arrow width
538
- @popover-arrow-width: 6px;
539
- // Popover arrow color
540
- @popover-arrow-color: @popover-bg;
541
- // Popover outer arrow width
542
- // Popover outer arrow color
543
- @popover-arrow-outer-color: @popover-bg;
544
- // Popover distance with trigger
545
- @popover-distance: @popover-arrow-width + 4px;
546
- @popover-padding-horizontal: @padding-md;
547
-
548
- // Modal
549
- // --
550
- @modal-header-padding-vertical: @padding-md;
551
- @modal-header-padding-horizontal: @padding-lg;
552
- @modal-body-padding: @padding-lg;
553
- @modal-header-bg: @component-background;
554
- @modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
555
- @modal-header-border-width: @border-width-base;
556
- @modal-header-border-style: @border-style-base;
557
- @modal-header-title-line-height: 22px;
558
- @modal-header-title-font-size: @font-size-lg;
559
- @modal-header-border-color-split: @border-color-split;
560
- @modal-header-close-size: 56px;
561
- @modal-content-bg: @component-background;
562
- @modal-heading-color: @heading-color;
563
- @modal-close-color: @text-color-secondary;
564
- @modal-footer-bg: transparent;
565
- @modal-footer-border-color-split: @border-color-split;
566
- @modal-footer-border-style: @border-style-base;
567
- @modal-footer-padding-vertical: 10px;
568
- @modal-footer-padding-horizontal: 16px;
569
- @modal-footer-border-width: @border-width-base;
570
- @modal-mask-bg: fade(@black, 45%);
571
- @modal-confirm-body-padding: 32px 32px 24px;
572
- @modal-confirm-title-font-size: @font-size-lg;
573
-
574
- // Progress
575
- // --
576
- @progress-default-color: @processing-color;
577
- @progress-remaining-color: @background-color-base;
578
- @progress-info-text-color: @progress-text-color;
579
- @progress-radius: 100px;
580
- @progress-steps-item-bg: #f3f3f3;
581
- @progress-text-font-size: 1em;
582
- @progress-text-color: @text-color; // This is for circle text color, should be renamed better
583
- @progress-circle-text-font-size: 1em;
584
- // Menu
585
- // ---
586
- @menu-inline-toplevel-item-height: 40px;
587
- @menu-item-height: 40px;
588
- @menu-item-group-height: @line-height-base;
589
- @menu-collapsed-width: 80px;
590
- @menu-bg: @component-background;
591
- @menu-popup-bg: @component-background;
592
- @menu-item-color: @text-color;
593
- @menu-inline-submenu-bg: @background-color-light;
594
- @menu-highlight-color: @primary-color;
595
- @menu-highlight-danger-color: @error-color;
596
- @menu-item-active-bg: @primary-1;
597
- @menu-item-active-danger-bg: @red-1;
598
- @menu-item-active-border-width: 3px;
599
- @menu-item-group-title-color: @text-color-secondary;
600
- @menu-item-vertical-margin: 4px;
601
- @menu-item-font-size: @font-size-base;
602
- @menu-item-boundary-margin: 8px;
603
- @menu-item-padding-horizontal: 20px;
604
- @menu-item-padding: 0 @menu-item-padding-horizontal;
605
- @menu-horizontal-line-height: 46px;
606
- @menu-icon-margin-right: 10px;
607
- @menu-icon-size: @menu-item-font-size;
608
- @menu-icon-size-lg: @font-size-lg;
609
- @menu-item-group-title-font-size: @menu-item-font-size;
610
-
611
- // dark theme
612
- @menu-dark-color: @text-color-secondary-dark;
613
- @menu-dark-danger-color: @error-color;
614
- @menu-dark-bg: @layout-header-background;
615
- @menu-dark-arrow-color: #fff;
616
- @menu-dark-inline-submenu-bg: #000c17;
617
- @menu-dark-highlight-color: #fff;
618
- @menu-dark-item-active-bg: @primary-color;
619
- @menu-dark-item-active-danger-bg: @error-color;
620
- @menu-dark-selected-item-icon-color: @white;
621
- @menu-dark-selected-item-text-color: @white;
622
- @menu-dark-item-hover-bg: transparent;
623
- // Spin
624
- // ---
625
- @spin-dot-size-sm: 14px;
626
- @spin-dot-size: 20px;
627
- @spin-dot-size-lg: 32px;
628
-
629
- // Table
630
- // --
631
- @table-bg: @component-background;
632
- @table-header-bg: @background-color-light;
633
- @table-header-color: @heading-color;
634
- @table-header-sort-bg: @background-color-base;
635
- @table-body-sort-bg: #fafafa;
636
- @table-row-hover-bg: @background-color-light;
637
- @table-selected-row-color: inherit;
638
- @table-selected-row-bg: @primary-1;
639
- @table-body-selected-sort-bg: @table-selected-row-bg;
640
- @table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%);
641
- @table-expanded-row-bg: #fbfbfb;
642
- @table-padding-vertical: 16px;
643
- @table-padding-horizontal: 16px;
644
- @table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
645
- @table-padding-horizontal-md: (@table-padding-horizontal / 2);
646
- @table-padding-vertical-sm: (@table-padding-vertical / 2);
647
- @table-padding-horizontal-sm: (@table-padding-horizontal / 2);
648
- @table-border-color: @border-color-split;
649
- @table-border-radius-base: @border-radius-base;
650
- @table-footer-bg: @background-color-light;
651
- @table-footer-color: @heading-color;
652
- @table-header-bg-sm: @table-header-bg;
653
- @table-font-size: @font-size-base;
654
- @table-font-size-md: @table-font-size;
655
- @table-font-size-sm: @table-font-size;
656
- @table-header-cell-split-color: rgba(0, 0, 0, 0.06);
657
- // Sorter
658
- // Legacy: `table-header-sort-active-bg` is used for hover not real active
659
- @table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
660
- @table-fixed-header-sort-active-bg: hsv(0, 0, 96%);
661
-
662
- // Filter
663
- @table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
664
- @table-filter-btns-bg: inherit;
665
- @table-filter-dropdown-bg: @component-background;
666
- @table-expand-icon-bg: @component-background;
667
- @table-selection-column-width: 32px;
668
- // Sticky
669
- @table-sticky-scroll-bar-bg: fade(#000, 35%);
670
- @table-sticky-scroll-bar-radius: 4px;
671
-
672
- // Tag
673
- // --
674
- @tag-default-bg: @background-color-light;
675
- @tag-default-color: @text-color;
676
- @tag-font-size: @font-size-sm;
677
- @tag-line-height: 20px;
678
-
679
- // TimePicker
680
- // ---
681
- @picker-bg: @component-background;
682
- @picker-basic-cell-hover-color: @item-hover-bg;
683
- @picker-basic-cell-active-with-range-color: @primary-1;
684
- @picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
685
- @picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04);
686
- @picker-border-color: @border-color-split;
687
- @picker-date-hover-range-border-color: lighten(@primary-color, 20%);
688
- @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
689
- @picker-time-panel-column-width: 56px;
690
- @picker-time-panel-column-height: 224px;
691
- @picker-time-panel-cell-height: 28px;
692
- @picker-panel-cell-height: 24px;
693
- @picker-panel-cell-width: 36px;
694
- @picker-text-height: 40px;
695
- @picker-panel-without-time-cell-height: 66px;
696
-
697
- // Calendar
698
- // ---
699
- @calendar-bg: @component-background;
700
- @calendar-input-bg: @input-bg;
701
- @calendar-border-color: @border-color-inverse;
702
- @calendar-item-active-bg: @item-active-bg;
703
- @calendar-column-active-bg: fade(@calendar-item-active-bg, 20%);
704
- @calendar-full-bg: @calendar-bg;
705
- @calendar-full-panel-bg: @calendar-full-bg;
706
-
707
- // Carousel
708
- // ---
709
- @carousel-dot-width: 16px;
710
- @carousel-dot-height: 3px;
711
- @carousel-dot-active-width: 24px;
712
-
713
- // Badge
714
- // ---
715
- @badge-height: 20px;
716
- @badge-height-sm: 14px;
717
- @badge-dot-size: 6px;
718
- @badge-font-size: @font-size-sm;
719
- @badge-font-size-sm: @font-size-sm;
720
- @badge-font-weight: normal;
721
- @badge-status-size: 6px;
722
- @badge-text-color: @component-background;
723
- @badge-color: @highlight-color;
724
-
725
- // Rate
726
- // ---
727
- @rate-star-color: @yellow-6;
728
- @rate-star-bg: @border-color-split;
729
- @rate-star-size: 20px;
730
- @rate-star-hover-scale: scale(1.1);
731
-
732
- // Card
733
- // ---
734
- @card-head-color: @heading-color;
735
- @card-head-background: transparent;
736
- @card-head-font-size: @font-size-lg;
737
- @card-head-font-size-sm: @font-size-base;
738
- @card-head-padding: 16px;
739
- @card-head-padding-sm: (@card-head-padding / 2);
740
- @card-head-height: 48px;
741
- @card-head-height-sm: 36px;
742
- @card-inner-head-padding: 12px;
743
- @card-padding-base: 24px;
744
- @card-padding-base-sm: (@card-padding-base / 2);
745
- @card-actions-background: @component-background;
746
- @card-actions-li-margin: 12px 0;
747
- @card-skeleton-bg: #cfd8dc;
748
- @card-background: @component-background;
749
- @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
750
- 0 5px 12px 4px rgba(0, 0, 0, 0.09);
751
- @card-radius: @border-radius-base;
752
- @card-head-tabs-margin-bottom: -17px;
753
- @card-head-extra-color: @text-color;
754
-
755
- // Comment
756
- // ---
757
- @comment-bg: inherit;
758
- @comment-padding-base: @padding-md 0;
759
- @comment-nest-indent: 44px;
760
- @comment-font-size-base: @font-size-base;
761
- @comment-font-size-sm: @font-size-sm;
762
- @comment-author-name-color: @text-color-secondary;
763
- @comment-author-time-color: #ccc;
764
- @comment-action-color: @text-color-secondary;
765
- @comment-action-hover-color: #595959;
766
- @comment-actions-margin-bottom: inherit;
767
- @comment-actions-margin-top: @margin-sm;
768
- @comment-content-detail-p-margin-bottom: inherit;
769
-
770
- // Tabs
771
- // ---
772
- @tabs-card-head-background: @background-color-light;
773
- @tabs-card-height: 40px;
774
- @tabs-card-active-color: @primary-color;
775
- @tabs-card-horizontal-padding: (
776
- (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2
777
- ) - @border-width-base @padding-md;
778
- @tabs-card-horizontal-padding-sm: 6px @padding-md;
779
- @tabs-card-horizontal-padding-lg: 7px @padding-md 6px;
780
- @tabs-title-font-size: @font-size-base;
781
- @tabs-title-font-size-lg: @font-size-lg;
782
- @tabs-title-font-size-sm: @font-size-base;
783
- @tabs-ink-bar-color: @primary-color;
784
- @tabs-bar-margin: 0 0 @margin-md 0;
785
- @tabs-horizontal-gutter: 32px;
786
- @tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter;
787
- @tabs-horizontal-margin-rtl: 0 0 0 32px;
788
- @tabs-horizontal-padding: @padding-sm 0;
789
- @tabs-horizontal-padding-lg: @padding-md 0;
790
- @tabs-horizontal-padding-sm: @padding-xs 0;
791
- @tabs-vertical-padding: @padding-xs @padding-lg;
792
- @tabs-vertical-margin: @margin-md 0 0 0;
793
- @tabs-scrolling-size: 32px;
794
- @tabs-highlight-color: @primary-color;
795
- @tabs-hover-color: @primary-5;
796
- @tabs-active-color: @primary-7;
797
- @tabs-card-gutter: 2px;
798
- @tabs-card-tab-active-border-top: 2px solid transparent;
799
-
800
- // BackTop
801
- // ---
802
- @back-top-color: #fff;
803
- @back-top-bg: @text-color-secondary;
804
- @back-top-hover-bg: @text-color;
805
-
806
- // Avatar
807
- // ---
808
- @avatar-size-base: 32px;
809
- @avatar-size-lg: 40px;
810
- @avatar-size-sm: 24px;
811
- @avatar-font-size-base: 18px;
812
- @avatar-font-size-lg: 24px;
813
- @avatar-font-size-sm: 14px;
814
- @avatar-bg: #ccc;
815
- @avatar-color: #fff;
816
- @avatar-border-radius: @border-radius-base;
817
- @avatar-group-overlapping: -8px;
818
- @avatar-group-space: 3px;
819
- @avatar-group-border-color: #fff;
820
-
821
- // Switch
822
- // ---
823
- @switch-height: 22px;
824
- @switch-sm-height: 16px;
825
- @switch-min-width: 44px;
826
- @switch-sm-min-width: 28px;
827
- @switch-disabled-opacity: 0.4;
828
- @switch-color: @primary-color;
829
- @switch-bg: @component-background;
830
- @switch-shadow-color: fade(#00230b, 20%);
831
- @switch-padding: 2px;
832
- @switch-inner-margin-min: ceil(@switch-height * 0.3);
833
- @switch-inner-margin-max: ceil(@switch-height * 1.1);
834
- @switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
835
- @switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);
836
-
837
- // Pagination
838
- // ---
839
- @pagination-item-bg: @component-background;
840
- @pagination-item-size: @height-base;
841
- @pagination-item-size-sm: 24px;
842
- @pagination-font-family: @font-family;
843
- @pagination-font-weight-active: 500;
844
- @pagination-item-bg-active: @component-background;
845
- @pagination-item-link-bg: @component-background;
846
- @pagination-item-disabled-color-active: @disabled-color;
847
- @pagination-item-disabled-bg-active: @disabled-active-bg;
848
- @pagination-item-input-bg: @component-background;
849
- @pagination-mini-options-size-changer-top: 0px;
850
-
851
- // PageHeader
852
- // ---
853
- @page-header-padding: @padding-lg;
854
- @page-header-padding-vertical: @padding-md;
855
- @page-header-padding-breadcrumb: @padding-sm;
856
- @page-header-content-padding-vertical: @padding-sm;
857
- @page-header-back-color: #000;
858
- @page-header-ghost-bg: inherit;
859
- @page-header-heading-title: @heading-4-size;
860
- @page-header-heading-sub-title: 14px;
861
- @page-header-tabs-tab-font-size: 16px;
862
-
863
- // Breadcrumb
864
- // ---
865
- @breadcrumb-base-color: @text-color-secondary;
866
- @breadcrumb-last-item-color: @text-color;
867
- @breadcrumb-font-size: @font-size-base;
868
- @breadcrumb-icon-font-size: @font-size-base;
869
- @breadcrumb-link-color: @text-color-secondary;
870
- @breadcrumb-link-color-hover: @primary-5;
871
- @breadcrumb-separator-color: @text-color-secondary;
872
- @breadcrumb-separator-margin: 0 @padding-xs;
873
-
874
- // Slider
875
- // ---
876
- @slider-margin: 10px 6px 10px;
877
- @slider-rail-background-color: @background-color-base;
878
- @slider-rail-background-color-hover: #e1e1e1;
879
- @slider-track-background-color: @primary-3;
880
- @slider-track-background-color-hover: @primary-4;
881
- @slider-handle-border-width: 2px;
882
- @slider-handle-background-color: @component-background;
883
- @slider-handle-color: @primary-3;
884
- @slider-handle-color-hover: @primary-4;
885
- @slider-handle-color-focus: tint(@primary-color, 20%);
886
- @slider-handle-color-focus-shadow: fade(@primary-color, 12%);
887
- @slider-handle-color-tooltip-open: @primary-color;
888
- @slider-handle-size: 14px;
889
- @slider-handle-margin-top: -5px;
890
- @slider-handle-shadow: 0;
891
- @slider-dot-border-color: @border-color-split;
892
- @slider-dot-border-color-active: tint(@primary-color, 50%);
893
- @slider-disabled-color: @disabled-color;
894
- @slider-disabled-background-color: @component-background;
895
-
896
- // Tree
897
- // ---
898
- @tree-bg: @component-background;
899
- @tree-title-height: 24px;
900
- @tree-child-padding: 18px;
901
- @tree-directory-selected-color: #fff;
902
- @tree-directory-selected-bg: @primary-color;
903
- @tree-node-hover-bg: @item-hover-bg;
904
- @tree-node-selected-bg: @primary-2;
905
-
906
- // Collapse
907
- // ---
908
- @collapse-header-padding: @padding-sm @padding-md;
909
- @collapse-header-padding-extra: 40px;
910
- @collapse-header-bg: @background-color-light;
911
- @collapse-content-padding: @padding-md;
912
- @collapse-content-bg: @component-background;
913
- @collapse-header-arrow-left: 16px;
914
-
915
- // Skeleton
916
- // ---
917
- @skeleton-color: rgba(190, 190, 190, 0.2);
918
- @skeleton-to-color: shade(@skeleton-color, 5%);
919
- @skeleton-paragraph-margin-top: 28px;
920
- @skeleton-paragraph-li-margin-top: @margin-md;
921
- @skeleton-paragraph-li-height: 16px;
922
- @skeleton-title-height: 16px;
923
- @skeleton-title-paragraph-margin-top: @margin-lg;
924
-
925
- // Transfer
926
- // ---
927
- @transfer-header-height: 40px;
928
- @transfer-item-height: @height-base;
929
- @transfer-disabled-bg: @disabled-bg;
930
- @transfer-list-height: 200px;
931
- @transfer-item-hover-bg: @item-hover-bg;
932
- @transfer-item-selected-hover-bg: darken(@item-active-bg, 2%);
933
- @transfer-item-padding-vertical: 6px;
934
- @transfer-list-search-icon-top: 12px;
935
-
936
- // Message
937
- // ---
938
- @message-notice-content-padding: 10px 16px;
939
- @message-notice-content-bg: @component-background;
940
- // Motion
941
- // ---
942
- @wave-animation-width: 6px;
943
-
944
- // Alert
945
- // ---
946
- @alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
947
- @alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
948
- @alert-success-icon-color: @success-color;
949
- @alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
950
- @alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
951
- @alert-info-icon-color: @info-color;
952
- @alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
953
- @alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
954
- @alert-warning-icon-color: @warning-color;
955
- @alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
956
- @alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
957
- @alert-error-icon-color: @error-color;
958
- @alert-message-color: @heading-color;
959
- @alert-text-color: @text-color;
960
- @alert-close-color: @text-color-secondary;
961
- @alert-close-hover-color: @icon-color-hover;
962
- @alert-no-icon-padding-vertical: @padding-xs;
963
- @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
964
- @alert-with-description-padding-vertical: @padding-md - 1px;
965
- @alert-with-description-padding: @alert-with-description-padding-vertical 15px
966
- @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size;
967
- @alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
968
- @alert-with-description-icon-size: 24px;
969
-
970
- // List
971
- // ---
972
- @list-header-background: transparent;
973
- @list-footer-background: transparent;
974
- @list-empty-text-padding: @padding-md;
975
- @list-item-padding: @padding-sm 0;
976
- @list-item-padding-sm: @padding-xs @padding-md;
977
- @list-item-padding-lg: 16px 24px;
978
- @list-item-meta-margin-bottom: @padding-md;
979
- @list-item-meta-avatar-margin-right: @padding-md;
980
- @list-item-meta-title-margin-bottom: @padding-sm;
981
- @list-customize-card-bg: @component-background;
982
- @list-item-meta-description-font-size: @font-size-base;
983
-
984
- // Statistic
985
- // ---
986
- @statistic-title-font-size: @font-size-base;
987
- @statistic-content-font-size: 24px;
988
- @statistic-unit-font-size: 24px;
989
- @statistic-font-family: @font-family;
990
-
991
- // Drawer
992
- // ---
993
- @drawer-header-padding: @padding-md @padding-lg;
994
- @drawer-body-padding: @padding-lg;
995
- @drawer-bg: @component-background;
996
- @drawer-footer-padding-vertical: @modal-footer-padding-vertical;
997
- @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
998
- @drawer-header-close-size: 56px;
999
- @drawer-title-font-size: @font-size-lg;
1000
- @drawer-title-line-height: 22px;
1001
-
1002
- // Timeline
1003
- // ---
1004
- @timeline-width: 2px;
1005
- @timeline-color: @border-color-split;
1006
- @timeline-dot-border-width: 2px;
1007
- @timeline-dot-color: @primary-color;
1008
- @timeline-dot-bg: @component-background;
1009
- @timeline-item-padding-bottom: 20px;
1010
-
1011
- // Typography
1012
- // ---
1013
- @typography-title-font-weight: 600;
1014
- @typography-title-margin-top: 1.2em;
1015
- @typography-title-margin-bottom: 0.5em;
1016
-
1017
- // Upload
1018
- // ---
1019
- @upload-actions-color: @text-color-secondary;
1020
-
1021
- // Steps
1022
- // ---
1023
- @process-tail-color: @border-color-split;
1024
- @steps-nav-arrow-color: fade(@black, 25%);
1025
- @steps-background: @component-background;
1026
- @steps-icon-size: 32px;
1027
- @steps-icon-custom-size: @steps-icon-size;
1028
- @steps-icon-custom-top: 0px;
1029
- @steps-icon-custom-font-size: 24px;
1030
- @steps-icon-top: -0.5px;
1031
- @steps-icon-font-size: @font-size-lg;
1032
- @steps-icon-margin: 0 8px 0 0;
1033
- @steps-title-line-height: @height-base;
1034
- @steps-small-icon-size: 24px;
1035
- @steps-small-icon-margin: 0 8px 0 0;
1036
- @steps-dot-size: 8px;
1037
- @steps-dot-top: 2px;
1038
- @steps-current-dot-size: 10px;
1039
- @steps-description-max-width: 140px;
1040
- @steps-nav-content-max-width: auto;
1041
- @steps-vertical-icon-width: 16px;
1042
- @steps-vertical-tail-width: 16px;
1043
- @steps-vertical-tail-width-sm: 12px;
1044
-
1045
- // Notification
1046
- // ---
1047
- @notification-bg: @component-background;
1048
- @notification-padding-vertical: 16px;
1049
- @notification-padding-horizontal: 24px;
1050
-
1051
- // Result
1052
- // ---
1053
- @result-title-font-size: 24px;
1054
- @result-subtitle-font-size: @font-size-base;
1055
- @result-icon-font-size: 72px;
1056
- @result-extra-margin: 24px 0 0 0;
1057
-
1058
- // Image
1059
- // ---
1060
- @image-size-base: 48px;
1061
- @image-font-size-base: 24px;
1062
- @image-bg: #f5f5f5;
1063
- @image-color: #fff;
1064
- @image-mask-font-size: 16px;
1065
- @image-preview-operation-size: 18px;
1066
- @image-preview-operation-color: @text-color-dark;
1067
- @image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
1
+ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
+ @import '../color/colors';
3
+
4
+ @theme: default;
5
+
6
+ // The prefix to use on all css classes from ant.
7
+ @ant-prefix: ant;
8
+
9
+ // An override for the html selector for theme prefixes
10
+ @html-selector: html;
11
+
12
+ // [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
13
+ // [CSS-VARIABLE-REPLACE-END: html-variables]
14
+
15
+ // -------- Colors -----------
16
+ // >>> Primary
17
+ @primary-color: @blue-6;
18
+ @primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
19
+ @primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
20
+ @primary-color-outline: fade(@primary-color, @outline-fade);
21
+
22
+ @processing-color: @blue-6;
23
+
24
+ // >>> Info
25
+ @info-color: @primary-color;
26
+ @info-color-deprecated-bg: color(~`colorPalette('@{info-color}', 1) `);
27
+ @info-color-deprecated-border: color(~`colorPalette('@{info-color}', 3) `);
28
+
29
+ // >>> Success
30
+ @success-color: @green-6;
31
+ @success-color-hover: color(~`colorPalette('@{success-color}', 5) `);
32
+ @success-color-active: color(~`colorPalette('@{success-color}', 7) `);
33
+ @success-color-outline: fade(@success-color, @outline-fade);
34
+ @success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `);
35
+ @success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `);
36
+
37
+ // >>> Warning
38
+ @warning-color: @gold-6;
39
+ @warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `);
40
+ @warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
41
+ @warning-color-outline: fade(@warning-color, @outline-fade);
42
+ @warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
43
+ @warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
44
+
45
+ // >>> Error
46
+ @error-color: @red-5;
47
+ @error-color-hover: color(~`colorPalette('@{error-color}', 5) `);
48
+ @error-color-active: color(~`colorPalette('@{error-color}', 7) `);
49
+ @error-color-outline: fade(@error-color, @outline-fade);
50
+ @error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `);
51
+ @error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `);
52
+
53
+ @highlight-color: @red-5;
54
+ @normal-color: #d9d9d9;
55
+ @white: #fff;
56
+ @black: #000;
57
+
58
+ // Color used by default to control hover and active backgrounds and for
59
+ // alert info backgrounds.
60
+ @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
61
+ @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
62
+ @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
63
+ @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
64
+ @primary-5: color(
65
+ ~`colorPalette('@{primary-color}', 5) `
66
+ ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
67
+ @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
68
+ @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
69
+ @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
70
+ @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
71
+ @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
72
+
73
+ // Base Scaffolding Variables
74
+ // ---
75
+
76
+ // Background color for `<body>`
77
+ @body-background: #fff;
78
+ // Base background color for most components
79
+ @component-background: #fff;
80
+ // Popover background color
81
+ @popover-background: @component-background;
82
+ @popover-customize-border-color: @border-color-split;
83
+ @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
84
+ 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
85
+ 'Noto Color Emoji';
86
+ @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
87
+ @text-color: fade(@black, 85%);
88
+ @text-color-secondary: fade(@black, 45%);
89
+ @text-color-inverse: @white;
90
+ @icon-color: inherit;
91
+ @icon-color-hover: fade(@black, 75%);
92
+ @heading-color: fade(@black, 85%);
93
+ @text-color-dark: fade(@white, 85%);
94
+ @text-color-secondary-dark: fade(@white, 65%);
95
+ @text-selection-bg: @primary-color;
96
+ @font-variant-base: tabular-nums;
97
+ @font-feature-settings-base: 'tnum';
98
+ @font-size-base: 14px;
99
+ @font-size-lg: @font-size-base + 2px;
100
+ @font-size-sm: 12px;
101
+ @heading-1-size: ceil(@font-size-base * 2.71);
102
+ @heading-2-size: ceil(@font-size-base * 2.14);
103
+ @heading-3-size: ceil(@font-size-base * 1.71);
104
+ @heading-4-size: ceil(@font-size-base * 1.42);
105
+ @heading-5-size: ceil(@font-size-base * 1.14);
106
+ // https://github.com/ant-design/ant-design/issues/20210
107
+ @line-height-base: 1.5715;
108
+ @border-radius-base: 2px;
109
+ @border-radius-sm: @border-radius-base;
110
+
111
+ // vertical paddings
112
+ @padding-lg: 24px; // containers
113
+ @padding-md: 16px; // small containers and buttons
114
+ @padding-sm: 12px; // Form controls and items
115
+ @padding-xs: 8px; // small items
116
+ @padding-xss: 4px; // more small
117
+
118
+ // vertical padding for all form controls
119
+ @control-padding-horizontal: @padding-sm;
120
+ @control-padding-horizontal-sm: @padding-xs;
121
+
122
+ // vertical margins
123
+ @margin-lg: 24px; // containers
124
+ @margin-md: 16px; // small containers and buttons
125
+ @margin-sm: 12px; // Form controls and items
126
+ @margin-xs: 8px; // small items
127
+ @margin-xss: 4px; // more small
128
+
129
+ // height rules
130
+ @height-base: 32px;
131
+ @height-lg: 40px;
132
+ @height-sm: 24px;
133
+
134
+ // The background colors for active and hover states for things like
135
+ // list items or table cells.
136
+ @item-active-bg: @primary-1;
137
+ @item-hover-bg: #f5f5f5;
138
+
139
+ // ICONFONT
140
+ @iconfont-css-prefix: anticon;
141
+
142
+ // LINK
143
+ @link-color: @primary-color;
144
+ @link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
145
+ @link-active-color: color(~`colorPalette('@{link-color}', 7) `);
146
+ @link-decoration: none;
147
+ @link-hover-decoration: none;
148
+ @link-focus-decoration: none;
149
+ @link-focus-outline: 0;
150
+
151
+ // Animation
152
+ @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
153
+ @ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
154
+ @ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
155
+ @ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
156
+ @ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
157
+ @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
158
+ @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
159
+ @ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
160
+ @ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
161
+ @ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
162
+ @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
163
+ @ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
164
+ @ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
165
+ @ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
166
+
167
+ // Border color
168
+ @border-color-base: hsv(0, 0, 85%); // base border outline a component
169
+ @border-color-split: hsv(0, 0, 94%); // split border inside a component
170
+ @border-color-inverse: @white;
171
+ @border-width-base: 1px; // width of the border for a component
172
+ @border-style-base: solid; // style of a components border
173
+
174
+ // Outline
175
+ @outline-blur-size: 0;
176
+ @outline-width: 2px;
177
+ @outline-color: @primary-color; // No use anymore
178
+ @outline-fade: 20%;
179
+
180
+ @background-color-light: hsv(0, 0, 98%); // background of header and selected item
181
+ @background-color-base: hsv(0, 0, 96%); // Default grey background color
182
+
183
+ // Disabled states
184
+ @disabled-color: fade(#000, 25%);
185
+ @disabled-bg: @background-color-base;
186
+ @disabled-active-bg: tint(@black, 90%);
187
+ @disabled-color-dark: fade(#fff, 35%);
188
+
189
+ // Shadow
190
+ @shadow-color: rgba(0, 0, 0, 0.15);
191
+ @shadow-color-inverse: @component-background;
192
+ @box-shadow-base: @shadow-2;
193
+ @shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
194
+ 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
195
+ @shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
196
+ 0 12px 48px 16px rgba(0, 0, 0, 0.03);
197
+ @shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
198
+ -12px 0 48px 16px rgba(0, 0, 0, 0.03);
199
+ @shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
200
+ 12px 0 48px 16px rgba(0, 0, 0, 0.03);
201
+ @shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
202
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05);
203
+
204
+ // Buttons
205
+ @btn-font-weight: 400;
206
+ @btn-border-radius-base: @border-radius-base;
207
+ @btn-border-radius-sm: @border-radius-base;
208
+ @btn-border-width: @border-width-base;
209
+ @btn-border-style: @border-style-base;
210
+ @btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
211
+ @btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
212
+ @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
213
+
214
+ @btn-primary-color: #fff;
215
+ @btn-primary-bg: @primary-color;
216
+
217
+ @btn-default-color: @text-color;
218
+ @btn-default-bg: @component-background;
219
+ @btn-default-border: @border-color-base;
220
+
221
+ @btn-danger-color: #fff;
222
+ @btn-danger-bg: @error-color;
223
+ @btn-danger-border: @error-color;
224
+
225
+ @btn-disable-color: @disabled-color;
226
+ @btn-disable-bg: @disabled-bg;
227
+ @btn-disable-border: @border-color-base;
228
+
229
+ @btn-default-ghost-color: @component-background;
230
+ @btn-default-ghost-bg: transparent;
231
+ @btn-default-ghost-border: @component-background;
232
+
233
+ @btn-font-size-lg: @font-size-lg;
234
+ @btn-font-size-sm: @font-size-base;
235
+ @btn-padding-horizontal-base: @padding-md - 1px;
236
+ @btn-padding-horizontal-lg: @btn-padding-horizontal-base;
237
+ @btn-padding-horizontal-sm: @padding-xs - 1px;
238
+
239
+ @btn-height-base: @height-base;
240
+ @btn-height-lg: @height-lg;
241
+ @btn-height-sm: @height-sm;
242
+
243
+ @btn-line-height: @line-height-base;
244
+
245
+ @btn-circle-size: @btn-height-base;
246
+ @btn-circle-size-lg: @btn-height-lg;
247
+ @btn-circle-size-sm: @btn-height-sm;
248
+
249
+ @btn-square-size: @btn-height-base;
250
+ @btn-square-size-lg: @btn-height-lg;
251
+ @btn-square-size-sm: @btn-height-sm;
252
+ @btn-square-only-icon-size: @font-size-base + 2px;
253
+ @btn-square-only-icon-size-sm: @font-size-base;
254
+ @btn-square-only-icon-size-lg: @btn-font-size-lg + 2px;
255
+
256
+ @btn-group-border: @primary-5;
257
+
258
+ @btn-link-hover-bg: transparent;
259
+ @btn-text-hover-bg: rgba(0, 0, 0, 0.018);
260
+
261
+ // Checkbox
262
+ @checkbox-size: 16px;
263
+ @checkbox-color: @primary-color;
264
+ @checkbox-check-color: #fff;
265
+ @checkbox-check-bg: @checkbox-check-color;
266
+ @checkbox-border-width: @border-width-base;
267
+ @checkbox-border-radius: @border-radius-base;
268
+ @checkbox-group-item-margin-right: 8px;
269
+
270
+ // Descriptions
271
+ @descriptions-bg: #fafafa;
272
+ @descriptions-title-margin-bottom: 20px;
273
+ @descriptions-default-padding: @padding-md @padding-lg;
274
+ @descriptions-middle-padding: @padding-sm @padding-lg;
275
+ @descriptions-small-padding: @padding-xs @padding-md;
276
+ @descriptions-item-padding-bottom: @padding-md;
277
+ @descriptions-item-trailing-colon: true;
278
+ @descriptions-item-label-colon-margin-right: 8px;
279
+ @descriptions-item-label-colon-margin-left: 2px;
280
+ @descriptions-extra-color: @text-color;
281
+
282
+ // Divider
283
+ @divider-text-padding: 1em;
284
+ @divider-orientation-margin: 5%;
285
+ @divider-color: rgba(0, 0, 0, 6%);
286
+ @divider-vertical-gutter: 8px;
287
+
288
+ // Dropdown
289
+ @dropdown-selected-color: @primary-color;
290
+ @dropdown-menu-submenu-disabled-bg: @component-background;
291
+ @dropdown-selected-bg: @item-active-bg;
292
+
293
+ // Empty
294
+ @empty-font-size: @font-size-base;
295
+
296
+ // Radio
297
+ @radio-size: 16px;
298
+ @radio-top: 0.2em;
299
+ @radio-border-width: 1px;
300
+ @radio-dot-size: @radio-size - 8px;
301
+ @radio-dot-color: @primary-color;
302
+ @radio-dot-disabled-color: fade(@black, 20%);
303
+ @radio-solid-checked-color: @component-background;
304
+
305
+ // Radio buttons
306
+ @radio-button-bg: @btn-default-bg;
307
+ @radio-button-checked-bg: @btn-default-bg;
308
+ @radio-button-color: @btn-default-color;
309
+ @radio-button-hover-color: @primary-5;
310
+ @radio-button-active-color: @primary-7;
311
+ @radio-button-padding-horizontal: @padding-md - 1px;
312
+ @radio-disabled-button-checked-bg: @disabled-active-bg;
313
+ @radio-disabled-button-checked-color: @disabled-color;
314
+ @radio-wrapper-margin-right: 8px;
315
+
316
+ // Media queries breakpoints
317
+ // @screen-xs and @screen-xs-min is not used in Grid
318
+ // smallest break point is @screen-md
319
+ @screen-xs: 480px;
320
+ @screen-xs-min: @screen-xs;
321
+ // 👆 Extra small screen / phone
322
+
323
+ // 👇 Small screen / tablet
324
+ @screen-sm: 576px;
325
+ @screen-sm-min: @screen-sm;
326
+
327
+ // Medium screen / desktop
328
+ @screen-md: 768px;
329
+ @screen-md-min: @screen-md;
330
+
331
+ // Large screen / wide desktop
332
+ @screen-lg: 992px;
333
+ @screen-lg-min: @screen-lg;
334
+
335
+ // Extra large screen / full hd
336
+ @screen-xl: 1200px;
337
+ @screen-xl-min: @screen-xl;
338
+
339
+ // Extra extra large screen / large desktop
340
+ @screen-xxl: 1600px;
341
+ @screen-xxl-min: @screen-xxl;
342
+ @screen-xxxl: 2000px;
343
+ @screen-xxxl-min: @screen-xxxl;
344
+
345
+ // provide a maximum
346
+ @screen-xs-max: (@screen-sm-min - 1px);
347
+ @screen-sm-max: (@screen-md-min - 1px);
348
+ @screen-md-max: (@screen-lg-min - 1px);
349
+ @screen-lg-max: (@screen-xl-min - 1px);
350
+ @screen-xl-max: (@screen-xxl-min - 1px);
351
+ @screen-xxl-max: (@screen-xxxl-min - 1px);
352
+
353
+ // Grid system
354
+ @grid-columns: 24;
355
+
356
+ // Layout
357
+ @layout-body-background: #f0f2f5;
358
+ @layout-header-background: #001529;
359
+ @layout-header-height: 64px;
360
+ @layout-header-padding: 0 50px;
361
+ @layout-header-color: @text-color;
362
+ @layout-footer-padding: 24px 50px;
363
+ @layout-footer-background: @layout-body-background;
364
+ @layout-sider-background: @layout-header-background;
365
+ @layout-trigger-height: 48px;
366
+ @layout-trigger-background: #002140;
367
+ @layout-trigger-color: #fff;
368
+ @layout-zero-trigger-width: 36px;
369
+ @layout-zero-trigger-height: 42px;
370
+ // Layout light theme
371
+ @layout-sider-background-light: #fff;
372
+ @layout-trigger-background-light: #fff;
373
+ @layout-trigger-color-light: @text-color;
374
+
375
+ // z-index list, order by `z-index`
376
+ @zindex-badge: auto;
377
+ @zindex-table-fixed: 2;
378
+ @zindex-affix: 10;
379
+ @zindex-back-top: 10;
380
+ @zindex-picker-panel: 10;
381
+ @zindex-popup-close: 10;
382
+ @zindex-modal: 1000;
383
+ @zindex-modal-mask: 1000;
384
+ @zindex-message: 1010;
385
+ @zindex-notification: 1010;
386
+ @zindex-popover: 1030;
387
+ @zindex-dropdown: 1050;
388
+ @zindex-picker: 1050;
389
+ @zindex-popoconfirm: 1060;
390
+ @zindex-tooltip: 1070;
391
+ @zindex-image: 1080;
392
+
393
+ // Animation
394
+ @animation-duration-slow: 0.3s; // Modal
395
+ @animation-duration-base: 0.2s;
396
+ @animation-duration-fast: 0.1s; // Tooltip
397
+
398
+ //CollapsePanel
399
+ @collapse-panel-border-radius: @border-radius-base;
400
+
401
+ //Dropdown
402
+ @dropdown-menu-bg: @component-background;
403
+ @dropdown-vertical-padding: 5px;
404
+ @dropdown-edge-child-vertical-padding: 4px;
405
+ @dropdown-font-size: @font-size-base;
406
+ @dropdown-line-height: 22px;
407
+
408
+ // Form
409
+ // ---
410
+ @label-required-color: @highlight-color;
411
+ @label-color: @heading-color;
412
+ @form-warning-input-bg: @input-bg;
413
+ @form-item-margin-bottom: 24px;
414
+ @form-item-trailing-colon: true;
415
+ @form-vertical-label-padding: 0 0 8px;
416
+ @form-vertical-label-margin: 0;
417
+ @form-item-label-font-size: @font-size-base;
418
+ @form-item-label-height: @input-height-base;
419
+ @form-item-label-colon-margin-right: 8px;
420
+ @form-item-label-colon-margin-left: 2px;
421
+ @form-error-input-bg: @input-bg;
422
+
423
+ // Input
424
+ // ---
425
+ @input-height-base: @height-base;
426
+ @input-height-lg: @height-lg;
427
+ @input-height-sm: @height-sm;
428
+ @input-padding-horizontal: @control-padding-horizontal - 1px;
429
+ @input-padding-horizontal-base: @input-padding-horizontal;
430
+ @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
431
+ @input-padding-horizontal-lg: @input-padding-horizontal;
432
+ @input-padding-vertical-base: max(
433
+ (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
434
+ @border-width-base,
435
+ 3px
436
+ );
437
+ @input-padding-vertical-sm: max(
438
+ (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
439
+ @border-width-base,
440
+ 0
441
+ );
442
+ @input-padding-vertical-lg: (
443
+ ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
444
+ ) - @border-width-base;
445
+ @input-placeholder-color: hsv(0, 0, 75%);
446
+ @input-color: @text-color;
447
+ @input-icon-color: @input-color;
448
+ @input-border-color: @border-color-base;
449
+ @input-bg: @component-background;
450
+ @input-number-hover-border-color: @input-hover-border-color;
451
+ @input-number-handler-active-bg: #f4f4f4;
452
+ @input-number-handler-hover-bg: @primary-5;
453
+ @input-number-handler-bg: @component-background;
454
+ @input-number-handler-border-color: @border-color-base;
455
+ @input-addon-bg: @background-color-light;
456
+ @input-hover-border-color: @primary-5;
457
+ @input-disabled-bg: @disabled-bg;
458
+ @input-outline-offset: 0 0;
459
+ @input-icon-hover-color: fade(@black, 85%);
460
+ @input-disabled-color: @disabled-color;
461
+
462
+ // Mentions
463
+ // ---
464
+ @mentions-dropdown-bg: @component-background;
465
+ @mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;
466
+
467
+ // Select
468
+ // ---
469
+ @select-border-color: @border-color-base;
470
+ @select-item-selected-color: @text-color;
471
+ @select-item-selected-font-weight: 600;
472
+ @select-dropdown-bg: @component-background;
473
+ @select-item-selected-bg: @primary-1;
474
+ @select-item-active-bg: @item-hover-bg;
475
+ @select-dropdown-vertical-padding: @dropdown-vertical-padding;
476
+ @select-dropdown-font-size: @dropdown-font-size;
477
+ @select-dropdown-line-height: @dropdown-line-height;
478
+ @select-dropdown-height: 32px;
479
+ @select-background: @component-background;
480
+ @select-clear-background: @select-background;
481
+ @select-selection-item-bg: @background-color-base;
482
+ @select-selection-item-border-color: @border-color-split;
483
+ @select-single-item-height-lg: 40px;
484
+ @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
485
+ @select-multiple-item-height-lg: 32px;
486
+ @select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
487
+ @select-multiple-disabled-background: @input-disabled-bg;
488
+ @select-multiple-item-disabled-color: #bfbfbf;
489
+ @select-multiple-item-disabled-border-color: @select-border-color;
490
+
491
+ // Cascader
492
+ // ---
493
+ @cascader-bg: @component-background;
494
+ @cascader-item-selected-bg: @primary-1;
495
+ @cascader-menu-bg: @component-background;
496
+ @cascader-menu-border-color-split: @border-color-split;
497
+
498
+ // Cascader
499
+ // ----
500
+ @cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
501
+ @cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
502
+ @cascader-dropdown-font-size: @dropdown-font-size;
503
+ @cascader-dropdown-line-height: @dropdown-line-height;
504
+
505
+ // Anchor
506
+ // ---
507
+ @anchor-bg: transparent;
508
+ @anchor-border-color: @border-color-split;
509
+ @anchor-link-top: 7px;
510
+ @anchor-link-left: 16px;
511
+ @anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;
512
+
513
+ // Tooltip
514
+ // ---
515
+ // Tooltip max width
516
+ @tooltip-max-width: 250px;
517
+ // Tooltip text color
518
+ @tooltip-color: #fff;
519
+ // Tooltip background color
520
+ @tooltip-bg: rgba(0, 0, 0, 0.75);
521
+ // Tooltip arrow width
522
+ @tooltip-arrow-width: 5px;
523
+ // Tooltip distance with trigger
524
+ @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
525
+ // Tooltip arrow color
526
+ @tooltip-arrow-color: @tooltip-bg;
527
+
528
+ // Popover
529
+ // ---
530
+ // Popover body background color
531
+ @popover-bg: @component-background;
532
+ // Popover text color
533
+ @popover-color: @text-color;
534
+ // Popover maximum width
535
+ @popover-min-width: 177px;
536
+ @popover-min-height: 32px;
537
+ // Popover arrow width
538
+ @popover-arrow-width: 6px;
539
+ // Popover arrow color
540
+ @popover-arrow-color: @popover-bg;
541
+ // Popover outer arrow width
542
+ // Popover outer arrow color
543
+ @popover-arrow-outer-color: @popover-bg;
544
+ // Popover distance with trigger
545
+ @popover-distance: @popover-arrow-width + 4px;
546
+ @popover-padding-horizontal: @padding-md;
547
+
548
+ // Modal
549
+ // --
550
+ @modal-header-padding-vertical: @padding-md;
551
+ @modal-header-padding-horizontal: @padding-lg;
552
+ @modal-body-padding: @padding-lg;
553
+ @modal-header-bg: @component-background;
554
+ @modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
555
+ @modal-header-border-width: @border-width-base;
556
+ @modal-header-border-style: @border-style-base;
557
+ @modal-header-title-line-height: 22px;
558
+ @modal-header-title-font-size: @font-size-lg;
559
+ @modal-header-border-color-split: @border-color-split;
560
+ @modal-header-close-size: 56px;
561
+ @modal-content-bg: @component-background;
562
+ @modal-heading-color: @heading-color;
563
+ @modal-close-color: @text-color-secondary;
564
+ @modal-footer-bg: transparent;
565
+ @modal-footer-border-color-split: @border-color-split;
566
+ @modal-footer-border-style: @border-style-base;
567
+ @modal-footer-padding-vertical: 10px;
568
+ @modal-footer-padding-horizontal: 16px;
569
+ @modal-footer-border-width: @border-width-base;
570
+ @modal-mask-bg: fade(@black, 45%);
571
+ @modal-confirm-body-padding: 32px 32px 24px;
572
+ @modal-confirm-title-font-size: @font-size-lg;
573
+
574
+ // Progress
575
+ // --
576
+ @progress-default-color: @processing-color;
577
+ @progress-remaining-color: @background-color-base;
578
+ @progress-info-text-color: @progress-text-color;
579
+ @progress-radius: 100px;
580
+ @progress-steps-item-bg: #f3f3f3;
581
+ @progress-text-font-size: 1em;
582
+ @progress-text-color: @text-color; // This is for circle text color, should be renamed better
583
+ @progress-circle-text-font-size: 1em;
584
+ // Menu
585
+ // ---
586
+ @menu-inline-toplevel-item-height: 40px;
587
+ @menu-item-height: 40px;
588
+ @menu-item-group-height: @line-height-base;
589
+ @menu-collapsed-width: 80px;
590
+ @menu-bg: @component-background;
591
+ @menu-popup-bg: @component-background;
592
+ @menu-item-color: @text-color;
593
+ @menu-inline-submenu-bg: @background-color-light;
594
+ @menu-highlight-color: @primary-color;
595
+ @menu-highlight-danger-color: @error-color;
596
+ @menu-item-active-bg: @primary-1;
597
+ @menu-item-active-danger-bg: @red-1;
598
+ @menu-item-active-border-width: 3px;
599
+ @menu-item-group-title-color: @text-color-secondary;
600
+ @menu-item-vertical-margin: 4px;
601
+ @menu-item-font-size: @font-size-base;
602
+ @menu-item-boundary-margin: 8px;
603
+ @menu-item-padding-horizontal: 20px;
604
+ @menu-item-padding: 0 @menu-item-padding-horizontal;
605
+ @menu-horizontal-line-height: 46px;
606
+ @menu-icon-margin-right: 10px;
607
+ @menu-icon-size: @menu-item-font-size;
608
+ @menu-icon-size-lg: @font-size-lg;
609
+ @menu-item-group-title-font-size: @menu-item-font-size;
610
+
611
+ // dark theme
612
+ @menu-dark-color: @text-color-secondary-dark;
613
+ @menu-dark-danger-color: @error-color;
614
+ @menu-dark-bg: @layout-header-background;
615
+ @menu-dark-arrow-color: #fff;
616
+ @menu-dark-inline-submenu-bg: #000c17;
617
+ @menu-dark-highlight-color: #fff;
618
+ @menu-dark-item-active-bg: @primary-color;
619
+ @menu-dark-item-active-danger-bg: @error-color;
620
+ @menu-dark-selected-item-icon-color: @white;
621
+ @menu-dark-selected-item-text-color: @white;
622
+ @menu-dark-item-hover-bg: transparent;
623
+ // Spin
624
+ // ---
625
+ @spin-dot-size-sm: 14px;
626
+ @spin-dot-size: 20px;
627
+ @spin-dot-size-lg: 32px;
628
+
629
+ // Table
630
+ // --
631
+ @table-bg: @component-background;
632
+ @table-header-bg: @background-color-light;
633
+ @table-header-color: @heading-color;
634
+ @table-header-sort-bg: @background-color-base;
635
+ @table-body-sort-bg: #fafafa;
636
+ @table-row-hover-bg: @background-color-light;
637
+ @table-selected-row-color: inherit;
638
+ @table-selected-row-bg: @primary-1;
639
+ @table-body-selected-sort-bg: @table-selected-row-bg;
640
+ @table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%);
641
+ @table-expanded-row-bg: #fbfbfb;
642
+ @table-padding-vertical: 16px;
643
+ @table-padding-horizontal: 16px;
644
+ @table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
645
+ @table-padding-horizontal-md: (@table-padding-horizontal / 2);
646
+ @table-padding-vertical-sm: (@table-padding-vertical / 2);
647
+ @table-padding-horizontal-sm: (@table-padding-horizontal / 2);
648
+ @table-border-color: @border-color-split;
649
+ @table-border-radius-base: @border-radius-base;
650
+ @table-footer-bg: @background-color-light;
651
+ @table-footer-color: @heading-color;
652
+ @table-header-bg-sm: @table-header-bg;
653
+ @table-font-size: @font-size-base;
654
+ @table-font-size-md: @table-font-size;
655
+ @table-font-size-sm: @table-font-size;
656
+ @table-header-cell-split-color: rgba(0, 0, 0, 0.06);
657
+ // Sorter
658
+ // Legacy: `table-header-sort-active-bg` is used for hover not real active
659
+ @table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
660
+ @table-fixed-header-sort-active-bg: hsv(0, 0, 96%);
661
+
662
+ // Filter
663
+ @table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
664
+ @table-filter-btns-bg: inherit;
665
+ @table-filter-dropdown-bg: @component-background;
666
+ @table-expand-icon-bg: @component-background;
667
+ @table-selection-column-width: 32px;
668
+ // Sticky
669
+ @table-sticky-scroll-bar-bg: fade(#000, 35%);
670
+ @table-sticky-scroll-bar-radius: 4px;
671
+
672
+ // Tag
673
+ // --
674
+ @tag-default-bg: @background-color-light;
675
+ @tag-default-color: @text-color;
676
+ @tag-font-size: @font-size-sm;
677
+ @tag-line-height: 20px;
678
+
679
+ // TimePicker
680
+ // ---
681
+ @picker-bg: @component-background;
682
+ @picker-basic-cell-hover-color: @item-hover-bg;
683
+ @picker-basic-cell-active-with-range-color: @primary-1;
684
+ @picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
685
+ @picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04);
686
+ @picker-border-color: @border-color-split;
687
+ @picker-date-hover-range-border-color: lighten(@primary-color, 20%);
688
+ @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
689
+ @picker-time-panel-column-width: 56px;
690
+ @picker-time-panel-column-height: 224px;
691
+ @picker-time-panel-cell-height: 28px;
692
+ @picker-panel-cell-height: 24px;
693
+ @picker-panel-cell-width: 36px;
694
+ @picker-text-height: 40px;
695
+ @picker-panel-without-time-cell-height: 66px;
696
+
697
+ // Calendar
698
+ // ---
699
+ @calendar-bg: @component-background;
700
+ @calendar-input-bg: @input-bg;
701
+ @calendar-border-color: @border-color-inverse;
702
+ @calendar-item-active-bg: @item-active-bg;
703
+ @calendar-column-active-bg: fade(@calendar-item-active-bg, 20%);
704
+ @calendar-full-bg: @calendar-bg;
705
+ @calendar-full-panel-bg: @calendar-full-bg;
706
+
707
+ // Carousel
708
+ // ---
709
+ @carousel-dot-width: 16px;
710
+ @carousel-dot-height: 3px;
711
+ @carousel-dot-active-width: 24px;
712
+
713
+ // Badge
714
+ // ---
715
+ @badge-height: 20px;
716
+ @badge-height-sm: 14px;
717
+ @badge-dot-size: 6px;
718
+ @badge-font-size: @font-size-sm;
719
+ @badge-font-size-sm: @font-size-sm;
720
+ @badge-font-weight: normal;
721
+ @badge-status-size: 6px;
722
+ @badge-text-color: @component-background;
723
+ @badge-color: @highlight-color;
724
+
725
+ // Rate
726
+ // ---
727
+ @rate-star-color: @yellow-6;
728
+ @rate-star-bg: @border-color-split;
729
+ @rate-star-size: 20px;
730
+ @rate-star-hover-scale: scale(1.1);
731
+
732
+ // Card
733
+ // ---
734
+ @card-head-color: @heading-color;
735
+ @card-head-background: transparent;
736
+ @card-head-font-size: @font-size-lg;
737
+ @card-head-font-size-sm: @font-size-base;
738
+ @card-head-padding: 16px;
739
+ @card-head-padding-sm: (@card-head-padding / 2);
740
+ @card-head-height: 48px;
741
+ @card-head-height-sm: 36px;
742
+ @card-inner-head-padding: 12px;
743
+ @card-padding-base: 24px;
744
+ @card-padding-base-sm: (@card-padding-base / 2);
745
+ @card-actions-background: @component-background;
746
+ @card-actions-li-margin: 12px 0;
747
+ @card-skeleton-bg: #cfd8dc;
748
+ @card-background: @component-background;
749
+ @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
750
+ 0 5px 12px 4px rgba(0, 0, 0, 0.09);
751
+ @card-radius: @border-radius-base;
752
+ @card-head-tabs-margin-bottom: -17px;
753
+ @card-head-extra-color: @text-color;
754
+
755
+ // Comment
756
+ // ---
757
+ @comment-bg: inherit;
758
+ @comment-padding-base: @padding-md 0;
759
+ @comment-nest-indent: 44px;
760
+ @comment-font-size-base: @font-size-base;
761
+ @comment-font-size-sm: @font-size-sm;
762
+ @comment-author-name-color: @text-color-secondary;
763
+ @comment-author-time-color: #ccc;
764
+ @comment-action-color: @text-color-secondary;
765
+ @comment-action-hover-color: #595959;
766
+ @comment-actions-margin-bottom: inherit;
767
+ @comment-actions-margin-top: @margin-sm;
768
+ @comment-content-detail-p-margin-bottom: inherit;
769
+
770
+ // Tabs
771
+ // ---
772
+ @tabs-card-head-background: @background-color-light;
773
+ @tabs-card-height: 40px;
774
+ @tabs-card-active-color: @primary-color;
775
+ @tabs-card-horizontal-padding: (
776
+ (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2
777
+ ) - @border-width-base @padding-md;
778
+ @tabs-card-horizontal-padding-sm: 6px @padding-md;
779
+ @tabs-card-horizontal-padding-lg: 7px @padding-md 6px;
780
+ @tabs-title-font-size: @font-size-base;
781
+ @tabs-title-font-size-lg: @font-size-lg;
782
+ @tabs-title-font-size-sm: @font-size-base;
783
+ @tabs-ink-bar-color: @primary-color;
784
+ @tabs-bar-margin: 0 0 @margin-md 0;
785
+ @tabs-horizontal-gutter: 32px;
786
+ @tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter;
787
+ @tabs-horizontal-margin-rtl: 0 0 0 32px;
788
+ @tabs-horizontal-padding: @padding-sm 0;
789
+ @tabs-horizontal-padding-lg: @padding-md 0;
790
+ @tabs-horizontal-padding-sm: @padding-xs 0;
791
+ @tabs-vertical-padding: @padding-xs @padding-lg;
792
+ @tabs-vertical-margin: @margin-md 0 0 0;
793
+ @tabs-scrolling-size: 32px;
794
+ @tabs-highlight-color: @primary-color;
795
+ @tabs-hover-color: @primary-5;
796
+ @tabs-active-color: @primary-7;
797
+ @tabs-card-gutter: 2px;
798
+ @tabs-card-tab-active-border-top: 2px solid transparent;
799
+
800
+ // BackTop
801
+ // ---
802
+ @back-top-color: #fff;
803
+ @back-top-bg: @text-color-secondary;
804
+ @back-top-hover-bg: @text-color;
805
+
806
+ // Avatar
807
+ // ---
808
+ @avatar-size-base: 32px;
809
+ @avatar-size-lg: 40px;
810
+ @avatar-size-sm: 24px;
811
+ @avatar-font-size-base: 18px;
812
+ @avatar-font-size-lg: 24px;
813
+ @avatar-font-size-sm: 14px;
814
+ @avatar-bg: #ccc;
815
+ @avatar-color: #fff;
816
+ @avatar-border-radius: @border-radius-base;
817
+ @avatar-group-overlapping: -8px;
818
+ @avatar-group-space: 3px;
819
+ @avatar-group-border-color: #fff;
820
+
821
+ // Switch
822
+ // ---
823
+ @switch-height: 22px;
824
+ @switch-sm-height: 16px;
825
+ @switch-min-width: 44px;
826
+ @switch-sm-min-width: 28px;
827
+ @switch-disabled-opacity: 0.4;
828
+ @switch-color: @primary-color;
829
+ @switch-bg: @component-background;
830
+ @switch-shadow-color: fade(#00230b, 20%);
831
+ @switch-padding: 2px;
832
+ @switch-inner-margin-min: ceil(@switch-height * 0.3);
833
+ @switch-inner-margin-max: ceil(@switch-height * 1.1);
834
+ @switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
835
+ @switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);
836
+
837
+ // Pagination
838
+ // ---
839
+ @pagination-item-bg: @component-background;
840
+ @pagination-item-size: @height-base;
841
+ @pagination-item-size-sm: 24px;
842
+ @pagination-font-family: @font-family;
843
+ @pagination-font-weight-active: 500;
844
+ @pagination-item-bg-active: @component-background;
845
+ @pagination-item-link-bg: @component-background;
846
+ @pagination-item-disabled-color-active: @disabled-color;
847
+ @pagination-item-disabled-bg-active: @disabled-active-bg;
848
+ @pagination-item-input-bg: @component-background;
849
+ @pagination-mini-options-size-changer-top: 0px;
850
+
851
+ // PageHeader
852
+ // ---
853
+ @page-header-padding: @padding-lg;
854
+ @page-header-padding-vertical: @padding-md;
855
+ @page-header-padding-breadcrumb: @padding-sm;
856
+ @page-header-content-padding-vertical: @padding-sm;
857
+ @page-header-back-color: #000;
858
+ @page-header-ghost-bg: inherit;
859
+ @page-header-heading-title: @heading-4-size;
860
+ @page-header-heading-sub-title: 14px;
861
+ @page-header-tabs-tab-font-size: 16px;
862
+
863
+ // Breadcrumb
864
+ // ---
865
+ @breadcrumb-base-color: @text-color-secondary;
866
+ @breadcrumb-last-item-color: @text-color;
867
+ @breadcrumb-font-size: @font-size-base;
868
+ @breadcrumb-icon-font-size: @font-size-base;
869
+ @breadcrumb-link-color: @text-color-secondary;
870
+ @breadcrumb-link-color-hover: @primary-5;
871
+ @breadcrumb-separator-color: @text-color-secondary;
872
+ @breadcrumb-separator-margin: 0 @padding-xs;
873
+
874
+ // Slider
875
+ // ---
876
+ @slider-margin: 10px 6px 10px;
877
+ @slider-rail-background-color: @background-color-base;
878
+ @slider-rail-background-color-hover: #e1e1e1;
879
+ @slider-track-background-color: @primary-3;
880
+ @slider-track-background-color-hover: @primary-4;
881
+ @slider-handle-border-width: 2px;
882
+ @slider-handle-background-color: @component-background;
883
+ @slider-handle-color: @primary-3;
884
+ @slider-handle-color-hover: @primary-4;
885
+ @slider-handle-color-focus: tint(@primary-color, 20%);
886
+ @slider-handle-color-focus-shadow: fade(@primary-color, 12%);
887
+ @slider-handle-color-tooltip-open: @primary-color;
888
+ @slider-handle-size: 14px;
889
+ @slider-handle-margin-top: -5px;
890
+ @slider-handle-shadow: 0;
891
+ @slider-dot-border-color: @border-color-split;
892
+ @slider-dot-border-color-active: tint(@primary-color, 50%);
893
+ @slider-disabled-color: @disabled-color;
894
+ @slider-disabled-background-color: @component-background;
895
+
896
+ // Tree
897
+ // ---
898
+ @tree-bg: @component-background;
899
+ @tree-title-height: 24px;
900
+ @tree-child-padding: 18px;
901
+ @tree-directory-selected-color: #fff;
902
+ @tree-directory-selected-bg: @primary-color;
903
+ @tree-node-hover-bg: @item-hover-bg;
904
+ @tree-node-selected-bg: @primary-2;
905
+
906
+ // Collapse
907
+ // ---
908
+ @collapse-header-padding: @padding-sm @padding-md;
909
+ @collapse-header-padding-extra: 40px;
910
+ @collapse-header-bg: @background-color-light;
911
+ @collapse-content-padding: @padding-md;
912
+ @collapse-content-bg: @component-background;
913
+ @collapse-header-arrow-left: 16px;
914
+
915
+ // Skeleton
916
+ // ---
917
+ @skeleton-color: rgba(190, 190, 190, 0.2);
918
+ @skeleton-to-color: shade(@skeleton-color, 5%);
919
+ @skeleton-paragraph-margin-top: 28px;
920
+ @skeleton-paragraph-li-margin-top: @margin-md;
921
+ @skeleton-paragraph-li-height: 16px;
922
+ @skeleton-title-height: 16px;
923
+ @skeleton-title-paragraph-margin-top: @margin-lg;
924
+
925
+ // Transfer
926
+ // ---
927
+ @transfer-header-height: 40px;
928
+ @transfer-item-height: @height-base;
929
+ @transfer-disabled-bg: @disabled-bg;
930
+ @transfer-list-height: 200px;
931
+ @transfer-item-hover-bg: @item-hover-bg;
932
+ @transfer-item-selected-hover-bg: darken(@item-active-bg, 2%);
933
+ @transfer-item-padding-vertical: 6px;
934
+ @transfer-list-search-icon-top: 12px;
935
+
936
+ // Message
937
+ // ---
938
+ @message-notice-content-padding: 10px 16px;
939
+ @message-notice-content-bg: @component-background;
940
+ // Motion
941
+ // ---
942
+ @wave-animation-width: 6px;
943
+
944
+ // Alert
945
+ // ---
946
+ @alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
947
+ @alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
948
+ @alert-success-icon-color: @success-color;
949
+ @alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
950
+ @alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
951
+ @alert-info-icon-color: @info-color;
952
+ @alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
953
+ @alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
954
+ @alert-warning-icon-color: @warning-color;
955
+ @alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
956
+ @alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
957
+ @alert-error-icon-color: @error-color;
958
+ @alert-message-color: @heading-color;
959
+ @alert-text-color: @text-color;
960
+ @alert-close-color: @text-color-secondary;
961
+ @alert-close-hover-color: @icon-color-hover;
962
+ @alert-no-icon-padding-vertical: @padding-xs;
963
+ @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
964
+ @alert-with-description-padding-vertical: @padding-md - 1px;
965
+ @alert-with-description-padding: @alert-with-description-padding-vertical 15px
966
+ @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size;
967
+ @alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
968
+ @alert-with-description-icon-size: 24px;
969
+
970
+ // List
971
+ // ---
972
+ @list-header-background: transparent;
973
+ @list-footer-background: transparent;
974
+ @list-empty-text-padding: @padding-md;
975
+ @list-item-padding: @padding-sm 0;
976
+ @list-item-padding-sm: @padding-xs @padding-md;
977
+ @list-item-padding-lg: 16px 24px;
978
+ @list-item-meta-margin-bottom: @padding-md;
979
+ @list-item-meta-avatar-margin-right: @padding-md;
980
+ @list-item-meta-title-margin-bottom: @padding-sm;
981
+ @list-customize-card-bg: @component-background;
982
+ @list-item-meta-description-font-size: @font-size-base;
983
+
984
+ // Statistic
985
+ // ---
986
+ @statistic-title-font-size: @font-size-base;
987
+ @statistic-content-font-size: 24px;
988
+ @statistic-unit-font-size: 24px;
989
+ @statistic-font-family: @font-family;
990
+
991
+ // Drawer
992
+ // ---
993
+ @drawer-header-padding: @padding-md @padding-lg;
994
+ @drawer-body-padding: @padding-lg;
995
+ @drawer-bg: @component-background;
996
+ @drawer-footer-padding-vertical: @modal-footer-padding-vertical;
997
+ @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
998
+ @drawer-header-close-size: 56px;
999
+ @drawer-title-font-size: @font-size-lg;
1000
+ @drawer-title-line-height: 22px;
1001
+
1002
+ // Timeline
1003
+ // ---
1004
+ @timeline-width: 2px;
1005
+ @timeline-color: @border-color-split;
1006
+ @timeline-dot-border-width: 2px;
1007
+ @timeline-dot-color: @primary-color;
1008
+ @timeline-dot-bg: @component-background;
1009
+ @timeline-item-padding-bottom: 20px;
1010
+
1011
+ // Typography
1012
+ // ---
1013
+ @typography-title-font-weight: 600;
1014
+ @typography-title-margin-top: 1.2em;
1015
+ @typography-title-margin-bottom: 0.5em;
1016
+
1017
+ // Upload
1018
+ // ---
1019
+ @upload-actions-color: @text-color-secondary;
1020
+
1021
+ // Steps
1022
+ // ---
1023
+ @process-tail-color: @border-color-split;
1024
+ @steps-nav-arrow-color: fade(@black, 25%);
1025
+ @steps-background: @component-background;
1026
+ @steps-icon-size: 32px;
1027
+ @steps-icon-custom-size: @steps-icon-size;
1028
+ @steps-icon-custom-top: 0px;
1029
+ @steps-icon-custom-font-size: 24px;
1030
+ @steps-icon-top: -0.5px;
1031
+ @steps-icon-font-size: @font-size-lg;
1032
+ @steps-icon-margin: 0 8px 0 0;
1033
+ @steps-title-line-height: @height-base;
1034
+ @steps-small-icon-size: 24px;
1035
+ @steps-small-icon-margin: 0 8px 0 0;
1036
+ @steps-dot-size: 8px;
1037
+ @steps-dot-top: 2px;
1038
+ @steps-current-dot-size: 10px;
1039
+ @steps-description-max-width: 140px;
1040
+ @steps-nav-content-max-width: auto;
1041
+ @steps-vertical-icon-width: 16px;
1042
+ @steps-vertical-tail-width: 16px;
1043
+ @steps-vertical-tail-width-sm: 12px;
1044
+
1045
+ // Notification
1046
+ // ---
1047
+ @notification-bg: @component-background;
1048
+ @notification-padding-vertical: 16px;
1049
+ @notification-padding-horizontal: 24px;
1050
+
1051
+ // Result
1052
+ // ---
1053
+ @result-title-font-size: 24px;
1054
+ @result-subtitle-font-size: @font-size-base;
1055
+ @result-icon-font-size: 72px;
1056
+ @result-extra-margin: 24px 0 0 0;
1057
+
1058
+ // Image
1059
+ // ---
1060
+ @image-size-base: 48px;
1061
+ @image-font-size-base: 24px;
1062
+ @image-bg: #f5f5f5;
1063
+ @image-color: #fff;
1064
+ @image-mask-font-size: 16px;
1065
+ @image-preview-operation-size: 18px;
1066
+ @image-preview-operation-color: @text-color-dark;
1067
+ @image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);