bkui-vue 0.0.1-beta.337 → 0.0.1-beta.339

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 (178) hide show
  1. package/dist/index.cjs.js +38 -38
  2. package/dist/index.esm.js +5213 -5359
  3. package/dist/index.umd.js +39 -39
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/affix/affix.css +357 -0
  7. package/lib/affix/affix.variable.css +715 -1
  8. package/lib/alert/alert.css +360 -3
  9. package/lib/alert/alert.variable.css +715 -1
  10. package/lib/backtop/backtop.css +360 -3
  11. package/lib/backtop/backtop.variable.css +715 -1
  12. package/lib/badge/badge.css +383 -26
  13. package/lib/badge/badge.variable.css +715 -1
  14. package/lib/breadcrumb/breadcrumb.css +362 -5
  15. package/lib/breadcrumb/breadcrumb.variable.css +715 -1
  16. package/lib/button/button.css +472 -115
  17. package/lib/button/button.variable.css +715 -1
  18. package/lib/card/card.css +361 -4
  19. package/lib/card/card.variable.css +715 -1
  20. package/lib/cascader/cascader.css +368 -11
  21. package/lib/cascader/cascader.variable.css +715 -1
  22. package/lib/cascader/index.js +1 -1
  23. package/lib/checkbox/checkbox.css +364 -7
  24. package/lib/checkbox/checkbox.variable.css +715 -1
  25. package/lib/code-diff/code-diff.css +357 -0
  26. package/lib/code-diff/code-diff.variable.css +715 -1
  27. package/lib/collapse/collapse-panel.d.ts +2 -2
  28. package/lib/collapse/collapse.css +358 -1
  29. package/lib/collapse/collapse.d.ts +2 -2
  30. package/lib/collapse/collapse.variable.css +715 -1
  31. package/lib/collapse/index.d.ts +9 -9
  32. package/lib/color-picker/color-picker.css +357 -0
  33. package/lib/color-picker/color-picker.variable.css +715 -1
  34. package/lib/components.d.ts +2 -1
  35. package/lib/components.js +1 -1
  36. package/lib/container/container.css +357 -0
  37. package/lib/container/container.variable.css +715 -1
  38. package/lib/date-picker/date-picker.css +374 -17
  39. package/lib/date-picker/date-picker.variable.css +715 -1
  40. package/lib/dialog/dialog.d.ts +8 -7
  41. package/lib/dialog/index.d.ts +21 -18
  42. package/lib/dialog/index.js +1 -1
  43. package/lib/dialog/props.d.ts +2 -2
  44. package/lib/divider/divider.css +360 -3
  45. package/lib/divider/divider.variable.css +715 -1
  46. package/lib/dropdown/dropdown.css +358 -1
  47. package/lib/dropdown/dropdown.d.ts +10 -10
  48. package/lib/dropdown/dropdown.less +1 -1
  49. package/lib/dropdown/dropdown.variable.css +716 -2
  50. package/lib/dropdown/index.js +1 -1
  51. package/lib/exception/exception.css +357 -0
  52. package/lib/exception/exception.variable.css +715 -1
  53. package/lib/fixed-navbar/fixed-navbar.css +361 -4
  54. package/lib/fixed-navbar/fixed-navbar.variable.css +715 -1
  55. package/lib/form/form.css +357 -0
  56. package/lib/form/form.variable.css +715 -1
  57. package/lib/form/index.js +1 -1
  58. package/lib/info-box/index.js +1 -1
  59. package/lib/input/input.css +417 -59
  60. package/lib/input/input.variable.css +715 -1
  61. package/lib/link/link.css +373 -16
  62. package/lib/link/link.variable.css +715 -1
  63. package/lib/loading/loading.css +373 -16
  64. package/lib/loading/loading.variable.css +715 -1
  65. package/lib/menu/menu.css +375 -18
  66. package/lib/menu/menu.variable.css +715 -1
  67. package/lib/menu/submenu.css +357 -0
  68. package/lib/menu/submenu.variable.css +715 -1
  69. package/lib/message/message.css +378 -21
  70. package/lib/message/message.variable.css +715 -1
  71. package/lib/modal/index.d.ts +13 -13
  72. package/lib/modal/index.js +1 -1
  73. package/lib/modal/modal.d.ts +5 -5
  74. package/lib/modal/props.mixin.d.ts +2 -2
  75. package/lib/navigation/navigation.css +359 -2
  76. package/lib/navigation/navigation.variable.css +715 -1
  77. package/lib/notify/notify.css +364 -7
  78. package/lib/notify/notify.variable.css +715 -1
  79. package/lib/pagination/index.js +1 -1
  80. package/lib/pagination/pagination.css +358 -1
  81. package/lib/pagination/pagination.variable.css +715 -1
  82. package/lib/plugin-popover/index.d.ts +1 -1
  83. package/lib/plugin-popover/index.js +1 -1
  84. package/lib/{popover2 → popover}/arrow.d.ts +0 -0
  85. package/lib/{popover2 → popover}/const.d.ts +0 -0
  86. package/lib/{popover2 → popover}/content.d.ts +0 -0
  87. package/lib/popover/index.d.ts +271 -114
  88. package/lib/popover/index.js +1 -1
  89. package/lib/{popover2 → popover}/plugin-popover.d.ts +0 -0
  90. package/lib/popover/popover.css +364 -50
  91. package/lib/popover/popover.d.ts +116 -53
  92. package/lib/popover/popover.less +19 -68
  93. package/lib/popover/popover.variable.css +721 -50
  94. package/lib/popover/props.d.ts +55 -37
  95. package/lib/{popover2 → popover}/reference.d.ts +0 -0
  96. package/lib/{popover2 → popover}/root.d.ts +0 -0
  97. package/lib/{popover2 → popover}/use-floating.d.ts +0 -0
  98. package/lib/{popover2 → popover}/use-platform.d.ts +0 -0
  99. package/lib/{popover2 → popover}/use-popover-init.d.ts +0 -0
  100. package/lib/{popover2 → popover}/use-popper-id.d.ts +0 -0
  101. package/lib/{popover2 → popover}/utils.d.ts +0 -0
  102. package/lib/process/process.css +370 -13
  103. package/lib/process/process.variable.css +715 -1
  104. package/lib/progress/progress.css +361 -4
  105. package/lib/progress/progress.variable.css +715 -1
  106. package/lib/radio/radio.css +387 -30
  107. package/lib/radio/radio.variable.css +715 -1
  108. package/lib/resize-layout/resize-layout.css +357 -0
  109. package/lib/resize-layout/resize-layout.variable.css +715 -1
  110. package/lib/search-select/index.js +1 -1
  111. package/lib/search-select/search-select.css +393 -36
  112. package/lib/search-select/search-select.variable.css +715 -1
  113. package/lib/select/index.d.ts +15 -0
  114. package/lib/select/index.js +1 -1
  115. package/lib/select/select.css +413 -56
  116. package/lib/select/select.d.ts +5 -0
  117. package/lib/select/select.less +1 -1
  118. package/lib/select/select.variable.css +747 -33
  119. package/lib/sideslider/index.d.ts +18 -18
  120. package/lib/sideslider/sideslider.css +358 -1
  121. package/lib/sideslider/sideslider.d.ts +7 -7
  122. package/lib/sideslider/sideslider.variable.css +715 -1
  123. package/lib/slider/slider.css +361 -4
  124. package/lib/slider/slider.variable.css +715 -1
  125. package/lib/steps/steps.css +393 -36
  126. package/lib/steps/steps.variable.css +715 -1
  127. package/lib/styles/index.d.ts +0 -2
  128. package/lib/styles/mixins/scroll.css +357 -0
  129. package/lib/styles/mixins/scroll.variable.css +715 -1
  130. package/lib/styles/themes/themes.css +357 -0
  131. package/lib/styles/themes/themes.less +614 -117
  132. package/lib/styles/themes/themes.variable.css +357 -0
  133. package/lib/switcher/switcher.css +374 -17
  134. package/lib/switcher/switcher.variable.css +715 -1
  135. package/lib/tab/tab.css +377 -20
  136. package/lib/tab/tab.variable.css +715 -1
  137. package/lib/table/const.d.ts +1 -0
  138. package/lib/table/index.js +1 -1
  139. package/lib/table/plugins/head-filter.css +369 -11
  140. package/lib/table/plugins/head-filter.less +2 -1
  141. package/lib/table/plugins/head-filter.variable.css +725 -10
  142. package/lib/table/plugins/head-sort.css +357 -0
  143. package/lib/table/plugins/head-sort.variable.css +715 -1
  144. package/lib/table/plugins/settings.css +373 -0
  145. package/lib/table/plugins/settings.less +22 -0
  146. package/lib/table/plugins/settings.variable.css +731 -1
  147. package/lib/table/table.css +534 -160
  148. package/lib/table/table.less +1 -1
  149. package/lib/table/table.variable.css +1249 -161
  150. package/lib/tag/tag.css +362 -5
  151. package/lib/tag/tag.variable.css +715 -1
  152. package/lib/tag-input/index.d.ts +156 -92
  153. package/lib/tag-input/index.js +1 -1
  154. package/lib/tag-input/tag-input.css +375 -18
  155. package/lib/tag-input/tag-input.d.ts +78 -46
  156. package/lib/tag-input/tag-input.variable.css +715 -1
  157. package/lib/tag-input/tag-props.d.ts +39 -23
  158. package/lib/time-picker/time-picker.css +357 -0
  159. package/lib/time-picker/time-picker.variable.css +715 -1
  160. package/lib/timeline/timeline.css +376 -19
  161. package/lib/timeline/timeline.variable.css +715 -1
  162. package/lib/transfer/transfer.css +369 -12
  163. package/lib/transfer/transfer.variable.css +715 -1
  164. package/lib/tree/tree.css +364 -7
  165. package/lib/tree/tree.variable.css +1079 -8
  166. package/lib/upload/upload.css +384 -27
  167. package/lib/upload/upload.variable.css +715 -1
  168. package/lib/virtual-render/virtual-render.css +357 -0
  169. package/lib/virtual-render/virtual-render.variable.css +1072 -1
  170. package/lib/volar.components.d.ts +1 -1
  171. package/package.json +1 -1
  172. package/lib/popover2/index.d.ts +0 -545
  173. package/lib/popover2/index.js +0 -1
  174. package/lib/popover2/popover2.css +0 -25
  175. package/lib/popover2/popover2.d.ts +0 -228
  176. package/lib/popover2/popover2.less +0 -35
  177. package/lib/popover2/popover2.variable.css +0 -144
  178. package/lib/popover2/props.d.ts +0 -118
package/lib/styles/themes/themes.less CHANGED
@@ -1,161 +1,658 @@
1
+ :root {
2
+ :root {
3
+ --bk-prefix: bk;
4
+
5
+ --popover-max-height: 216px;
6
+
7
+ --primary-color: #3a84ff;
8
+ --success-color: #2dcb56;
9
+ --warning-color: #ff9c01;
10
+ --danger-color: #ea3636;
11
+ --default-color: #63656e;
12
+ --gray-color: #979ba5;
13
+ --light-gray: #c4c6cc;
14
+ --white-color: white;
15
+ --whitesmoke-color: #fafbfd;
16
+ --disable-color: #dcdee5;
17
+
18
+ --font-size-base: 12px;
19
+ --font-size-medium: 14px;
20
+ --font-size-large: 16px;
21
+
22
+ --line-height-base: 16px;
23
+ --line-height-medium: 16px;
24
+ --line-height-large: 18px;
25
+
26
+
27
+ --component-size-small: 26px;
28
+ --component-size-base: 32px;
29
+ --component-size-large: 40px;
30
+
31
+ --border-width-base: 1px;
32
+ --border-style-base: solid;
33
+ --border-radius-base: 2px;
34
+ --border-style-color: var(--light-gray);
35
+
36
+
37
+ // input theme
38
+ --input-disabled-bg: #fafbfd;
39
+ --input-disabled-border: var(--disable-color);
40
+ --input-height-base: var(--component-size-base);
41
+ --input-color: var(--default-color);
42
+ --input-bg: white;
43
+ --input-border-color: var(--light-gray);
44
+ --input-broder-radius: 3px;
45
+ --input-shadow-color: #a3c5fd;
46
+ --input-horizontal-padding: 10px;
47
+ --input-block-color: #f5f7fa;
48
+ --input-block-hover-color: #eaebf0;
49
+
50
+ --input-icon-size: var(--font-size-medium);
51
+ --input-maxlength-color: #979ba5;
52
+
53
+ //button theme
54
+ --button-primary-hover-color: #5594fa;
55
+ --button-danger-hover-color: #ff5656;
56
+ --button-success-hover-color: #45e35f;
57
+ --button-warning-hover-color: #ffb848;
58
+ --button-default-hover-border-color: #979ba5;
59
+ --button-primary-active-color: #2c77f4;
60
+ --button-danger-active-color: #db2626;
61
+ --button-success-active-color: #1ab943;
62
+ --button-warning-active-color: #eb9000;
63
+ --button-selected-bg-color: #e1ecff;
64
+ --button-disabled-selected-bg-color: #f0f1f5;
65
+
66
+ // radio theme
67
+ --radio-font-color: #63656e;
68
+ --radio-active-color: #5594fa;
69
+ --radio-hover-border-color: #979ba5;
70
+ --radio-disabled-border: #dcdee5;
71
+ --radio-disabled-font-color: #c4c6cc;
72
+ --radio-distable-checked-bg: #fafbfd;
73
+ --radio-button-checked-bg: #e1ecff;
74
+
75
+
76
+ // fixed-navbar theme
77
+ --fixed-navbar-background: #fff;
78
+ --fixed-navbar-boxshadow-color: rgba(0,0,0,.1);
79
+
80
+ // switch theme
81
+ --switch-default-color: #fff;
82
+ --switch-grey-color: #c4c6cc;
83
+
84
+ // breadcrumb theme
85
+ --breadcrumb-black-color: #979ba5;
86
+ --breadcrumb-primary-hover-color: #0082ff;
87
+ --breadcrumb-fn-main-color: #63656e;
88
+
89
+ // link theme
90
+ --link-default-hover-color: #979ba5;
91
+ --link-primary-hover-color: #699df4;
92
+ --link-success-hover-color: #45e35f;
93
+ --link-warning-hover-color: #ffb848;
94
+ --link-danger-hover-color: #ff5656;
95
+ --link-default-disabled-color: #dcdee5;
96
+ --link-primary-disabled-color: #a3c5fd;
97
+ --link-success-disabled-color: #94f5a4;
98
+ --link-warning-disabled-color: #ffd695;
99
+ --link-danger-disabled-color: #fd9c9c;
100
+
101
+ // message theme
102
+ --message-color: var(--default-color);
103
+ --message-primary-bg-color: #f0f8ff;
104
+ --message-primary-border-color: #e1ecff;
105
+ --message-primary-shadow-color: #e1e8f4;
106
+ --message-warning-bg-color: #fff4e2;
107
+ --message-warning-border-color: #ffe8c3;
108
+ --message-warning-shadow-color: #ede6db;
109
+ --message-success-bg-color: #f2fff4;
110
+ --message-success-border-color: #dcffe2;
111
+ --message-success-shadow-color: #cef0d7;
112
+ --message-danger-bg-color: #ffeded;
113
+ --message-danger-border-color: #fdd;
114
+ --message-danger-shadow-color: #f6dada;
115
+
116
+ // slider theme
117
+ --slider-default-bg: #dcdee5;
118
+ --slider-disable-bar-bg: #979ba5;
119
+
120
+
121
+ // menu theme
122
+ --menu-bg-color: #182132;
123
+ --submenu-bg-color: #151d2c;
124
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
125
+ --menu-color: #96a2b9;
126
+ --menu-group-color: var(--default-color);
127
+ --menu-width: 260px;
128
+ --menu-collapse-width: 60px;
129
+ --menu-active-color: white;
130
+
131
+ // navigation theme
132
+ --nav-header-bg-color: #182132;
133
+ --nav-bg-color: #182132;
134
+
135
+ // date-picker theme
136
+ --date-picker-disabled-bg: #fafbfd;
137
+ --date-picker-dropdown-mb: 4px;
138
+ --date-picker-dropdown-bg: #fff;
139
+
140
+ // table theme
141
+ --table-bg-color: var(--white-color);
142
+ --table-border-color: #dcdee5;
143
+
144
+ --table-head-bg-color: #fafbfd;
145
+ --table-head-font-color: #313238;
146
+
147
+ --table-body-font-color: #575961;
148
+ --table-row-hover-bg-color: #f5f7fa;
149
+ --table-row-active-bg-color: #f0f1f5;
150
+
151
+ // cascader theme
152
+ --cascader-panel-border-color: #dcdee5;
153
+ --cascader-panel-hover: #f5f7fa;
154
+ --cascader-panel-active: #e1ecff;
155
+ --cascader-panel-disabled-bg: #fff;
156
+
157
+
158
+ // search-select theme
159
+ --search-select-focus-border-color: var(--primary-color);
160
+ --search-select-focus-color: #3c96ff;
161
+ --search-select-font-color: var(--default-color);
162
+ --search-select-placeholder-color: var(--light-gray);
163
+ --search-select-message-color: var(--danger-color);
164
+
165
+ }
166
+ --bk-prefix: bk;
167
+
168
+ --popover-max-height: var(--popover-max-height);
169
+
170
+ --primary-color: var(--primary-color);
171
+ --success-color: var(--success-color);
172
+ --warning-color: var(--warning-color);
173
+ --danger-color: var(--danger-color);
174
+ --default-color: var(--default-color);
175
+ --gray-color: var(--gray-color);
176
+ --light-gray: var(--light-gray);
177
+ --white-color: var(--white-color);
178
+ --whitesmoke-color: var(--whitesmoke-color);
179
+ --disable-color: var(--disable-color);
180
+
181
+ --font-size-base: var(--font-size-base);
182
+ --font-size-medium: var(--font-size-medium);
183
+ --font-size-large: var(--font-size-large);
184
+
185
+ --line-height-base: var(--line-height-base);
186
+ --line-height-medium: var(--line-height-medium);
187
+ --line-height-large: var(--line-height-large);
188
+
189
+
190
+ --component-size-small: var(--component-size-small);
191
+ --component-size-base: var(--component-size-base);
192
+ --component-size-large: var(--component-size-large);
193
+
194
+ --border-width-base: var(--border-width-base);
195
+ --border-style-base: var(--border-style-base);
196
+ --border-radius-base: var(--border-radius-base);
197
+ --border-style-color: var(--border-style-color);
198
+
199
+
200
+ // input theme
201
+ --input-disabled-bg: var(--input-disabled-bg);
202
+ --input-disabled-border: var(--input-disabled-border);
203
+ --input-height-base: var(--input-height-base);
204
+ --input-color: var(--input-color);
205
+ --input-bg: var(--input-bg);
206
+ --input-border-color: var(--input-border-color);
207
+ --input-broder-radius: var(--input-broder-radius);
208
+ --input-shadow-color: var(--input-shadow-color);
209
+ --input-horizontal-padding: var(--input-horizontal-padding);
210
+ --input-block-color: var(--input-block-color);
211
+ --input-block-hover-color: var(--input-block-hover-color);
212
+
213
+ --input-icon-size: var(--input-icon-size);
214
+ --input-maxlength-color: var(--input-maxlength-color);
215
+
216
+ //button theme
217
+ --button-primary-hover-color: var(--button-primary-hover-color);
218
+ --button-danger-hover-color: var(--button-danger-hover-color);
219
+ --button-success-hover-color: var(--button-success-hover-color);
220
+ --button-warning-hover-color: var(--button-warning-hover-color);
221
+ --button-default-hover-border-color: var(--button-default-hover-border-color);
222
+ --button-primary-active-color: var(--button-primary-active-color);
223
+ --button-danger-active-color: var(--button-danger-active-color);
224
+ --button-success-active-color: var(--button-success-active-color);
225
+ --button-warning-active-color: var(--button-warning-active-color);
226
+ --button-selected-bg-color: var(--button-selected-bg-color);
227
+ --button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
228
+
229
+ // radio theme
230
+ --radio-font-color: var(--radio-font-color);
231
+ --radio-active-color: var(--radio-active-color);
232
+ --radio-hover-border-color: var(--radio-hover-border-color);
233
+ --radio-disabled-border: var(--radio-disabled-border);
234
+ --radio-disabled-font-color: var(--radio-disabled-font-color);
235
+ --radio-distable-checked-bg: var(--radio-distable-checked-bg);
236
+ --radio-button-checked-bg: var(--radio-button-checked-bg);
237
+
238
+
239
+ // fixed-navbar theme
240
+ --fixed-navbar-background: var(--fixed-navbar-background);
241
+ --fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
242
+
243
+ // switch theme
244
+ --switch-default-color: var(--switch-default-color);
245
+ --switch-grey-color: var(--switch-grey-color);
246
+
247
+ // breadcrumb theme
248
+ --breadcrumb-black-color: var(--breadcrumb-black-color);
249
+ --breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
250
+ --breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
251
+
252
+ // link theme
253
+ --link-default-hover-color: var(--link-default-hover-color);
254
+ --link-primary-hover-color: var(--link-primary-hover-color);
255
+ --link-success-hover-color: var(--link-success-hover-color);
256
+ --link-warning-hover-color: var(--link-warning-hover-color);
257
+ --link-danger-hover-color: var(--link-danger-hover-color);
258
+ --link-default-disabled-color: var(--link-default-disabled-color);
259
+ --link-primary-disabled-color: var(--link-primary-disabled-color);
260
+ --link-success-disabled-color: var(--link-success-disabled-color);
261
+ --link-warning-disabled-color: var(--link-warning-disabled-color);
262
+ --link-danger-disabled-color: var(--link-danger-disabled-color);
263
+
264
+ // message theme
265
+ --message-color: var(--message-color);
266
+ --message-primary-bg-color: var(--message-primary-bg-color);
267
+ --message-primary-border-color: var(--message-primary-border-color);
268
+ --message-primary-shadow-color: var(--message-primary-shadow-color);
269
+ --message-warning-bg-color: var(--message-warning-bg-color);
270
+ --message-warning-border-color: var(--message-warning-border-color);
271
+ --message-warning-shadow-color: var(--message-warning-shadow-color);
272
+ --message-success-bg-color: var(--message-success-bg-color);
273
+ --message-success-border-color: var(--message-success-border-color);
274
+ --message-success-shadow-color: var(--message-success-shadow-color);
275
+ --message-danger-bg-color: var(--message-danger-bg-color);
276
+ --message-danger-border-color: var(--message-danger-border-color);
277
+ --message-danger-shadow-color: var(--message-danger-shadow-color);
278
+
279
+ // slider theme
280
+ --slider-default-bg: var(--slider-default-bg);
281
+ --slider-disable-bar-bg: var(--slider-disable-bar-bg);
282
+
283
+
284
+ // menu theme
285
+ --menu-bg-color: var(--menu-bg-color);
286
+ --submenu-bg-color: var(--submenu-bg-color);
287
+ --menu-active-bg-color: var(--menu-active-bg-color);
288
+ --menu-color: var(--menu-color);
289
+ --menu-group-color: var(--menu-group-color);
290
+ --menu-width: var(--menu-width);
291
+ --menu-collapse-width: var(--menu-collapse-width);
292
+ --menu-active-color: var(--menu-active-color);
293
+
294
+ // navigation theme
295
+ --nav-header-bg-color: var(--nav-header-bg-color);
296
+ --nav-bg-color: var(--nav-bg-color);
297
+
298
+ // date-picker theme
299
+ --date-picker-disabled-bg: var(--date-picker-disabled-bg);
300
+ --date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
301
+ --date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
302
+
303
+ // table theme
304
+ --table-bg-color: var(--table-bg-color);
305
+ --table-border-color: var(--table-border-color);
306
+
307
+ --table-head-bg-color: var(--table-head-bg-color);
308
+ --table-head-font-color: var(--table-head-font-color);
309
+
310
+ --table-body-font-color: var(--table-body-font-color);
311
+ --table-row-hover-bg-color: var(--table-row-hover-bg-color);
312
+ --table-row-active-bg-color: var(--table-row-active-bg-color);
313
+
314
+ // cascader theme
315
+ --cascader-panel-border-color: var(--cascader-panel-border-color);
316
+ --cascader-panel-hover: var(--cascader-panel-hover);
317
+ --cascader-panel-active: var(--cascader-panel-active);
318
+ --cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
319
+
320
+
321
+ // search-select theme
322
+ --search-select-focus-border-color: var(--search-select-focus-border-color);
323
+ --search-select-focus-color: var(--search-select-focus-color);
324
+ --search-select-font-color: var(--search-select-font-color);
325
+ --search-select-placeholder-color: var(--search-select-placeholder-color);
326
+ --search-select-message-color: var(--search-select-message-color);
327
+
328
+
329
+ }
330
+
331
+ :root {
332
+ --bk-prefix: bk;
333
+
334
+ --popover-max-height: 216px;
335
+
336
+ --primary-color: #3a84ff;
337
+ --success-color: #2dcb56;
338
+ --warning-color: #ff9c01;
339
+ --danger-color: #ea3636;
340
+ --default-color: #63656e;
341
+ --gray-color: #979ba5;
342
+ --light-gray: #c4c6cc;
343
+ --white-color: white;
344
+ --whitesmoke-color: #fafbfd;
345
+ --disable-color: #dcdee5;
346
+
347
+ --font-size-base: 12px;
348
+ --font-size-medium: 14px;
349
+ --font-size-large: 16px;
350
+
351
+ --line-height-base: 16px;
352
+ --line-height-medium: 16px;
353
+ --line-height-large: 18px;
354
+
355
+
356
+ --component-size-small: 26px;
357
+ --component-size-base: 32px;
358
+ --component-size-large: 40px;
359
+
360
+ --border-width-base: 1px;
361
+ --border-style-base: solid;
362
+ --border-radius-base: 2px;
363
+ --border-style-color: var(--light-gray);
364
+
365
+
366
+ // input theme
367
+ --input-disabled-bg: #fafbfd;
368
+ --input-disabled-border: var(--disable-color);
369
+ --input-height-base: var(--component-size-base);
370
+ --input-color: var(--default-color);
371
+ --input-bg: white;
372
+ --input-border-color: var(--light-gray);
373
+ --input-broder-radius: 3px;
374
+ --input-shadow-color: #a3c5fd;
375
+ --input-horizontal-padding: 10px;
376
+ --input-block-color: #f5f7fa;
377
+ --input-block-hover-color: #eaebf0;
378
+
379
+ --input-icon-size: var(--font-size-medium);
380
+ --input-maxlength-color: #979ba5;
381
+
382
+ //button theme
383
+ --button-primary-hover-color: #5594fa;
384
+ --button-danger-hover-color: #ff5656;
385
+ --button-success-hover-color: #45e35f;
386
+ --button-warning-hover-color: #ffb848;
387
+ --button-default-hover-border-color: #979ba5;
388
+ --button-primary-active-color: #2c77f4;
389
+ --button-danger-active-color: #db2626;
390
+ --button-success-active-color: #1ab943;
391
+ --button-warning-active-color: #eb9000;
392
+ --button-selected-bg-color: #e1ecff;
393
+ --button-disabled-selected-bg-color: #f0f1f5;
394
+
395
+ // radio theme
396
+ --radio-font-color: #63656e;
397
+ --radio-active-color: #5594fa;
398
+ --radio-hover-border-color: #979ba5;
399
+ --radio-disabled-border: #dcdee5;
400
+ --radio-disabled-font-color: #c4c6cc;
401
+ --radio-distable-checked-bg: #fafbfd;
402
+ --radio-button-checked-bg: #e1ecff;
403
+
404
+
405
+ // fixed-navbar theme
406
+ --fixed-navbar-background: #fff;
407
+ --fixed-navbar-boxshadow-color: rgba(0,0,0,.1);
408
+
409
+ // switch theme
410
+ --switch-default-color: #fff;
411
+ --switch-grey-color: #c4c6cc;
412
+
413
+ // breadcrumb theme
414
+ --breadcrumb-black-color: #979ba5;
415
+ --breadcrumb-primary-hover-color: #0082ff;
416
+ --breadcrumb-fn-main-color: #63656e;
417
+
418
+ // link theme
419
+ --link-default-hover-color: #979ba5;
420
+ --link-primary-hover-color: #699df4;
421
+ --link-success-hover-color: #45e35f;
422
+ --link-warning-hover-color: #ffb848;
423
+ --link-danger-hover-color: #ff5656;
424
+ --link-default-disabled-color: #dcdee5;
425
+ --link-primary-disabled-color: #a3c5fd;
426
+ --link-success-disabled-color: #94f5a4;
427
+ --link-warning-disabled-color: #ffd695;
428
+ --link-danger-disabled-color: #fd9c9c;
429
+
430
+ // message theme
431
+ --message-color: var(--default-color);
432
+ --message-primary-bg-color: #f0f8ff;
433
+ --message-primary-border-color: #e1ecff;
434
+ --message-primary-shadow-color: #e1e8f4;
435
+ --message-warning-bg-color: #fff4e2;
436
+ --message-warning-border-color: #ffe8c3;
437
+ --message-warning-shadow-color: #ede6db;
438
+ --message-success-bg-color: #f2fff4;
439
+ --message-success-border-color: #dcffe2;
440
+ --message-success-shadow-color: #cef0d7;
441
+ --message-danger-bg-color: #ffeded;
442
+ --message-danger-border-color: #fdd;
443
+ --message-danger-shadow-color: #f6dada;
444
+
445
+ // slider theme
446
+ --slider-default-bg: #dcdee5;
447
+ --slider-disable-bar-bg: #979ba5;
448
+
449
+
450
+ // menu theme
451
+ --menu-bg-color: #182132;
452
+ --submenu-bg-color: #151d2c;
453
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
454
+ --menu-color: #96a2b9;
455
+ --menu-group-color: var(--default-color);
456
+ --menu-width: 260px;
457
+ --menu-collapse-width: 60px;
458
+ --menu-active-color: white;
459
+
460
+ // navigation theme
461
+ --nav-header-bg-color: #182132;
462
+ --nav-bg-color: #182132;
463
+
464
+ // date-picker theme
465
+ --date-picker-disabled-bg: #fafbfd;
466
+ --date-picker-dropdown-mb: 4px;
467
+ --date-picker-dropdown-bg: #fff;
468
+
469
+ // table theme
470
+ --table-bg-color: var(--white-color);
471
+ --table-border-color: #dcdee5;
472
+
473
+ --table-head-bg-color: #fafbfd;
474
+ --table-head-font-color: #313238;
475
+
476
+ --table-body-font-color: #575961;
477
+ --table-row-hover-bg-color: #f5f7fa;
478
+ --table-row-active-bg-color: #f0f1f5;
479
+
480
+ // cascader theme
481
+ --cascader-panel-border-color: #dcdee5;
482
+ --cascader-panel-hover: #f5f7fa;
483
+ --cascader-panel-active: #e1ecff;
484
+ --cascader-panel-disabled-bg: #fff;
485
+
486
+
487
+ // search-select theme
488
+ --search-select-focus-border-color: var(--primary-color);
489
+ --search-select-focus-color: #3c96ff;
490
+ --search-select-font-color: var(--default-color);
491
+ --search-select-placeholder-color: var(--light-gray);
492
+ --search-select-message-color: var(--danger-color);
493
+
494
+ }
1
495
  @bk-prefix: bk;
2
496
 
3
- @popover-max-height: 216px;
497
+ @popover-max-height: var(--popover-max-height);
4
498
 
5
- @primary-color: #3a84ff;
6
- @success-color: #2dcb56;
7
- @warning-color: #ff9c01;
8
- @danger-color: #ea3636;
9
- @default-color: #63656e;
10
- @gray-color: #979ba5;
11
- @light-gray: #c4c6cc;
12
- @white-color: white;
13
- @whitesmoke-color: #fafbfd;
14
- @disable-color: #dcdee5;
499
+ @primary-color: var(--primary-color);
500
+ @success-color: var(--success-color);
501
+ @warning-color: var(--warning-color);
502
+ @danger-color: var(--danger-color);
503
+ @default-color: var(--default-color);
504
+ @gray-color: var(--gray-color);
505
+ @light-gray: var(--light-gray);
506
+ @white-color: var(--white-color);
507
+ @whitesmoke-color: var(--whitesmoke-color);
508
+ @disable-color: var(--disable-color);
15
509
 
16
- @font-size-base: 12px;
17
- @font-size-medium: 14px;
18
- @font-size-large: 16px;
510
+ @font-size-base: var(--font-size-base);
511
+ @font-size-medium: var(--font-size-medium);
512
+ @font-size-large: var(--font-size-large);
19
513
 
20
- @line-height-base: 16px;
21
- @line-height-medium: 16px;
22
- @line-height-large: 18px;
514
+ @line-height-base: var(--line-height-base);
515
+ @line-height-medium: var(--line-height-medium);
516
+ @line-height-large: var(--line-height-large);
23
517
 
24
518
 
25
- @component-size-small: 26px;
26
- @component-size-base: 32px;
27
- @component-size-large: 40px;
519
+ @component-size-small: var(--component-size-small);
520
+ @component-size-base: var(--component-size-base);
521
+ @component-size-large: var(--component-size-large);
28
522
 
29
- @border-width-base: 1px;
30
- @border-style-base: solid;
31
- @border-radius-base: 2px;
32
- @border-style-color: @light-gray;
523
+ @border-width-base: var(--border-width-base);
524
+ @border-style-base: var(--border-style-base);
525
+ @border-radius-base: var(--border-radius-base);
526
+ @border-style-color: var(--border-style-color);
33
527
 
34
528
 
35
529
  // input theme
36
- @input-disabled-bg: #fafbfd;
37
- @input-disabled-border: @disable-color;
38
- @input-height-base: @component-size-base;
39
- @input-color: @default-color;
40
- @input-bg: white;
41
- @input-border-color: @light-gray;
42
- @input-broder-radius: 3px;
43
- @input-shadow-color: #a3c5fd;
44
- @input-horizontal-padding: 10px;
45
- @input-block-color: #f5f7fa;
46
- @input-block-hover-color: #eaebf0;
47
-
48
- @input-icon-size: @font-size-medium;
49
- @input-maxlength-color: #979ba5;
530
+ @input-disabled-bg: var(--input-disabled-bg);
531
+ @input-disabled-border: var(--input-disabled-border);
532
+ @input-height-base: var(--input-height-base);
533
+ @input-color: var(--input-color);
534
+ @input-bg: var(--input-bg);
535
+ @input-border-color: var(--input-border-color);
536
+ @input-broder-radius: var(--input-broder-radius);
537
+ @input-shadow-color: var(--input-shadow-color);
538
+ @input-horizontal-padding: var(--input-horizontal-padding);
539
+ @input-block-color: var(--input-block-color);
540
+ @input-block-hover-color: var(--input-block-hover-color);
541
+
542
+ @input-icon-size: var(--input-icon-size);
543
+ @input-maxlength-color: var(--input-maxlength-color);
50
544
 
51
545
  //button theme
52
- @button-primary-hover-color: #5594fa;
53
- @button-danger-hover-color: #ff5656;
54
- @button-success-hover-color: #45e35f;
55
- @button-warning-hover-color: #ffb848;
56
- @button-default-hover-border-color: #979ba5;
57
- @button-primary-active-color: #2c77f4;
58
- @button-danger-active-color: #db2626;
59
- @button-success-active-color: #1ab943;
60
- @button-warning-active-color: #eb9000;
61
- @button-selected-bg-color: #e1ecff;
62
- @button-disabled-selected-bg-color: #f0f1f5;
546
+ @button-primary-hover-color: var(--button-primary-hover-color);
547
+ @button-danger-hover-color: var(--button-danger-hover-color);
548
+ @button-success-hover-color: var(--button-success-hover-color);
549
+ @button-warning-hover-color: var(--button-warning-hover-color);
550
+ @button-default-hover-border-color: var(--button-default-hover-border-color);
551
+ @button-primary-active-color: var(--button-primary-active-color);
552
+ @button-danger-active-color: var(--button-danger-active-color);
553
+ @button-success-active-color: var(--button-success-active-color);
554
+ @button-warning-active-color: var(--button-warning-active-color);
555
+ @button-selected-bg-color: var(--button-selected-bg-color);
556
+ @button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
63
557
 
64
558
  // radio theme
65
- @radio-font-color: #63656e;
66
- @radio-active-color: #5594fa;
67
- @radio-hover-border-color: #979ba5;
68
- @radio-disabled-border: #dcdee5;
69
- @radio-disabled-font-color: #c4c6cc;
70
- @radio-distable-checked-bg: #fafbfd;
71
- @radio-button-checked-bg: #e1ecff;
559
+ @radio-font-color: var(--radio-font-color);
560
+ @radio-active-color: var(--radio-active-color);
561
+ @radio-hover-border-color: var(--radio-hover-border-color);
562
+ @radio-disabled-border: var(--radio-disabled-border);
563
+ @radio-disabled-font-color: var(--radio-disabled-font-color);
564
+ @radio-distable-checked-bg: var(--radio-distable-checked-bg);
565
+ @radio-button-checked-bg: var(--radio-button-checked-bg);
72
566
 
73
567
 
74
568
  // fixed-navbar theme
75
- @fixed-navbar-background: #fff;
76
- @fixed-navbar-boxshadow-color: rgba(0,0,0,.1);
569
+ @fixed-navbar-background: var(--fixed-navbar-background);
570
+ @fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
77
571
 
78
572
  // switch theme
79
- @switch-default-color: #fff;
80
- @switch-grey-color: #c4c6cc;
573
+ @switch-default-color: var(--switch-default-color);
574
+ @switch-grey-color: var(--switch-grey-color);
81
575
 
82
576
  // breadcrumb theme
83
- @breadcrumb-black-color: #979ba5;
84
- @breadcrumb-primary-hover-color: #0082ff;
85
- @breadcrumb-fn-main-color: #63656e;
577
+ @breadcrumb-black-color: var(--breadcrumb-black-color);
578
+ @breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
579
+ @breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
86
580
 
87
581
  // link theme
88
- @link-default-hover-color: #979ba5;
89
- @link-primary-hover-color: #699df4;
90
- @link-success-hover-color: #45e35f;
91
- @link-warning-hover-color: #ffb848;
92
- @link-danger-hover-color: #ff5656;
93
- @link-default-disabled-color: #dcdee5;
94
- @link-primary-disabled-color: #a3c5fd;
95
- @link-success-disabled-color: #94f5a4;
96
- @link-warning-disabled-color: #ffd695;
97
- @link-danger-disabled-color: #fd9c9c;
582
+ @link-default-hover-color: var(--link-default-hover-color);
583
+ @link-primary-hover-color: var(--link-primary-hover-color);
584
+ @link-success-hover-color: var(--link-success-hover-color);
585
+ @link-warning-hover-color: var(--link-warning-hover-color);
586
+ @link-danger-hover-color: var(--link-danger-hover-color);
587
+ @link-default-disabled-color: var(--link-default-disabled-color);
588
+ @link-primary-disabled-color: var(--link-primary-disabled-color);
589
+ @link-success-disabled-color: var(--link-success-disabled-color);
590
+ @link-warning-disabled-color: var(--link-warning-disabled-color);
591
+ @link-danger-disabled-color: var(--link-danger-disabled-color);
98
592
 
99
593
  // message theme
100
- @message-color: @default-color;
101
- @message-primary-bg-color: #f0f8ff;
102
- @message-primary-border-color: #e1ecff;
103
- @message-primary-shadow-color: #e1e8f4;
104
- @message-warning-bg-color: #fff4e2;
105
- @message-warning-border-color: #ffe8c3;
106
- @message-warning-shadow-color: #ede6db;
107
- @message-success-bg-color: #f2fff4;
108
- @message-success-border-color: #dcffe2;
109
- @message-success-shadow-color: #cef0d7;
110
- @message-danger-bg-color: #ffeded;
111
- @message-danger-border-color: #ffdddd;
112
- @message-danger-shadow-color: #f6dada;
594
+ @message-color: var(--message-color);
595
+ @message-primary-bg-color: var(--message-primary-bg-color);
596
+ @message-primary-border-color: var(--message-primary-border-color);
597
+ @message-primary-shadow-color: var(--message-primary-shadow-color);
598
+ @message-warning-bg-color: var(--message-warning-bg-color);
599
+ @message-warning-border-color: var(--message-warning-border-color);
600
+ @message-warning-shadow-color: var(--message-warning-shadow-color);
601
+ @message-success-bg-color: var(--message-success-bg-color);
602
+ @message-success-border-color: var(--message-success-border-color);
603
+ @message-success-shadow-color: var(--message-success-shadow-color);
604
+ @message-danger-bg-color: var(--message-danger-bg-color);
605
+ @message-danger-border-color: var(--message-danger-border-color);
606
+ @message-danger-shadow-color: var(--message-danger-shadow-color);
113
607
 
114
608
  // slider theme
115
- @slider-default-bg: #dcdee5;
116
- @slider-disable-bar-bg: #979ba5;
609
+ @slider-default-bg: var(--slider-default-bg);
610
+ @slider-disable-bar-bg: var(--slider-disable-bar-bg);
117
611
 
118
612
 
119
613
  // menu theme
120
- @menu-bg-color: #182132;
121
- @submenu-bg-color: #151d2c;
122
- @menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
123
- @menu-color: #96a2b9;
124
- @menu-group-color: @default-color;
125
- @menu-width: 260px;
126
- @menu-collapse-width: 60px;
127
- @menu-active-color: white;
614
+ @menu-bg-color: var(--menu-bg-color);
615
+ @submenu-bg-color: var(--submenu-bg-color);
616
+ @menu-active-bg-color: var(--menu-active-bg-color);
617
+ @menu-color: var(--menu-color);
618
+ @menu-group-color: var(--menu-group-color);
619
+ @menu-width: var(--menu-width);
620
+ @menu-collapse-width: var(--menu-collapse-width);
621
+ @menu-active-color: var(--menu-active-color);
128
622
 
129
623
  // navigation theme
130
- @nav-header-bg-color: #182132;
131
- @nav-bg-color: #182132;
624
+ @nav-header-bg-color: var(--nav-header-bg-color);
625
+ @nav-bg-color: var(--nav-bg-color);
132
626
 
133
627
  // date-picker theme
134
- @date-picker-disabled-bg: #fafbfd;
135
- @date-picker-dropdown-mb: 4px;
136
- @date-picker-dropdown-bg: #fff;
628
+ @date-picker-disabled-bg: var(--date-picker-disabled-bg);
629
+ @date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
630
+ @date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
137
631
 
138
632
  // table theme
139
- @table-bg-color: @white-color;
140
- @table-border-color: #dcdee5;
633
+ @table-bg-color: var(--table-bg-color);
634
+ @table-border-color: var(--table-border-color);
141
635
 
142
- @table-head-bg-color: #fafbfd;
143
- @table-head-font-color: #313238;
636
+ @table-head-bg-color: var(--table-head-bg-color);
637
+ @table-head-font-color: var(--table-head-font-color);
144
638
 
145
- @table-body-font-color: #575961;
146
- @table-row-hover-bg-color: #f5f7fa;
147
- @table-row-active-bg-color: #f0f1f5;
639
+ @table-body-font-color: var(--table-body-font-color);
640
+ @table-row-hover-bg-color: var(--table-row-hover-bg-color);
641
+ @table-row-active-bg-color: var(--table-row-active-bg-color);
148
642
 
149
643
  // cascader theme
150
- @cascader-panel-border-color: #dcdee5;
151
- @cascader-panel-hover: #f5f7fa;
152
- @cascader-panel-active: #e1ecff;
153
- @cascader-panel-disabled-bg: #fff;
644
+ @cascader-panel-border-color: var(--cascader-panel-border-color);
645
+ @cascader-panel-hover: var(--cascader-panel-hover);
646
+ @cascader-panel-active: var(--cascader-panel-active);
647
+ @cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
154
648
 
155
649
 
156
650
  // search-select theme
157
- @search-select-focus-border-color: @primary-color;
158
- @search-select-focus-color: #3c96ff;
159
- @search-select-font-color: @default-color;
160
- @search-select-placeholder-color: @light-gray;
161
- @search-select-message-color: @danger-color;
651
+ @search-select-focus-border-color: var(--search-select-focus-border-color);
652
+ @search-select-focus-color: var(--search-select-focus-color);
653
+ @search-select-font-color: var(--search-select-font-color);
654
+ @search-select-placeholder-color: var(--search-select-placeholder-color);
655
+ @search-select-message-color: var(--search-select-message-color);
656
+
657
+
658
+