bkui-vue 1.0.3-beta.26 → 1.0.3-beta.27

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 (287) hide show
  1. package/dist/index.cjs.js +46 -46
  2. package/dist/index.esm.js +6162 -6148
  3. package/dist/index.umd.js +46 -46
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/affix/affix.css +1 -1
  7. package/lib/affix/affix.less +2 -2
  8. package/lib/affix/affix.variable.css +3 -3
  9. package/lib/affix/index.js +13 -15
  10. package/lib/alert/alert.css +21 -21
  11. package/lib/alert/alert.less +16 -17
  12. package/lib/alert/alert.variable.css +23 -23
  13. package/lib/alert/index.js +22 -24
  14. package/lib/animate-number/index.js +5 -6
  15. package/lib/backtop/backtop.css +11 -11
  16. package/lib/backtop/backtop.less +3 -3
  17. package/lib/backtop/backtop.variable.css +13 -13
  18. package/lib/backtop/index.js +20 -22
  19. package/lib/badge/badge.css +32 -32
  20. package/lib/badge/badge.less +5 -5
  21. package/lib/badge/badge.variable.css +34 -34
  22. package/lib/badge/index.js +19 -21
  23. package/lib/breadcrumb/breadcrumb.css +31 -31
  24. package/lib/breadcrumb/breadcrumb.less +8 -8
  25. package/lib/breadcrumb/breadcrumb.variable.css +33 -33
  26. package/lib/breadcrumb/index.js +24 -26
  27. package/lib/button/button.css +69 -69
  28. package/lib/button/button.less +5 -3
  29. package/lib/button/button.variable.css +71 -71
  30. package/lib/button/index.js +28 -37
  31. package/lib/card/card.css +31 -31
  32. package/lib/card/card.less +4 -4
  33. package/lib/card/card.variable.css +33 -33
  34. package/lib/card/index.js +35 -43
  35. package/lib/cascader/cascader.css +63 -63
  36. package/lib/cascader/cascader.less +11 -12
  37. package/lib/cascader/cascader.variable.css +65 -65
  38. package/lib/cascader/index.js +80 -100
  39. package/lib/checkbox/checkbox.css +21 -21
  40. package/lib/checkbox/checkbox.less +8 -8
  41. package/lib/checkbox/checkbox.variable.css +23 -23
  42. package/lib/checkbox/index.js +32 -34
  43. package/lib/code-diff/code-diff.css +97 -97
  44. package/lib/code-diff/code-diff.less +4 -3
  45. package/lib/code-diff/code-diff.variable.css +99 -99
  46. package/lib/code-diff/index.js +12 -14
  47. package/lib/collapse/collapse.css +30 -30
  48. package/lib/collapse/collapse.less +24 -25
  49. package/lib/collapse/collapse.variable.css +32 -32
  50. package/lib/collapse/index.js +39 -41
  51. package/lib/collapse-transition/collapse-transition.css +32 -32
  52. package/lib/collapse-transition/collapse-transition.less +48 -59
  53. package/lib/collapse-transition/collapse-transition.variable.css +34 -34
  54. package/lib/collapse-transition/index.js +8 -9
  55. package/lib/color-picker/color-picker.css +57 -57
  56. package/lib/color-picker/color-picker.less +30 -36
  57. package/lib/color-picker/color-picker.variable.css +59 -59
  58. package/lib/color-picker/index.js +48 -50
  59. package/lib/components.js +505 -60
  60. package/lib/config-provider/config-provider.variable.css +2 -2
  61. package/lib/config-provider/index.js +8 -9
  62. package/lib/container/container.css +19 -19
  63. package/lib/container/container.less +3 -3
  64. package/lib/container/container.variable.css +21 -21
  65. package/lib/container/index.js +19 -21
  66. package/lib/date-picker/date-picker.css +92 -92
  67. package/lib/date-picker/date-picker.d.ts +1 -0
  68. package/lib/date-picker/date-picker.less +54 -55
  69. package/lib/date-picker/date-picker.variable.css +94 -94
  70. package/lib/date-picker/index.d.ts +3 -0
  71. package/lib/date-picker/index.js +69 -77
  72. package/lib/date-picker/time-picker.d.ts +1 -0
  73. package/lib/dialog/dialog.css +51 -51
  74. package/lib/dialog/dialog.less +1 -1
  75. package/lib/dialog/dialog.variable.css +53 -53
  76. package/lib/dialog/index.js +49 -63
  77. package/lib/directives/index.js +12 -13
  78. package/lib/dist.index.js +62 -5
  79. package/lib/divider/divider.css +8 -8
  80. package/lib/divider/divider.less +8 -5
  81. package/lib/divider/divider.variable.css +10 -10
  82. package/lib/divider/index.js +13 -15
  83. package/lib/dropdown/dropdown.css +15 -15
  84. package/lib/dropdown/dropdown.less +6 -6
  85. package/lib/dropdown/dropdown.variable.css +17 -17
  86. package/lib/dropdown/index.js +24 -32
  87. package/lib/exception/exception.css +13 -13
  88. package/lib/exception/exception.less +6 -6
  89. package/lib/exception/exception.variable.css +15 -15
  90. package/lib/exception/index.js +11 -13
  91. package/lib/fixed-navbar/fixed-navbar.css +9 -9
  92. package/lib/fixed-navbar/fixed-navbar.less +2 -1
  93. package/lib/fixed-navbar/fixed-navbar.variable.css +11 -11
  94. package/lib/fixed-navbar/index.js +13 -15
  95. package/lib/form/form.css +63 -63
  96. package/lib/form/form.less +16 -14
  97. package/lib/form/form.variable.css +65 -65
  98. package/lib/form/index.js +48 -50
  99. package/lib/hooks.js +48 -1
  100. package/lib/icon/index.js +0 -1
  101. package/lib/image/image-viewer.css +23 -23
  102. package/lib/image/image-viewer.less +25 -24
  103. package/lib/image/image-viewer.variable.css +25 -25
  104. package/lib/image/image.css +29 -29
  105. package/lib/image/image.less +8 -6
  106. package/lib/image/image.variable.css +31 -31
  107. package/lib/image/index.js +38 -39
  108. package/lib/index.js +72 -7
  109. package/lib/info-box/index.js +13 -21
  110. package/lib/info-box/info-box.css +10 -10
  111. package/lib/info-box/info-box.less +2 -1
  112. package/lib/info-box/info-box.variable.css +12 -12
  113. package/lib/input/index.js +59 -61
  114. package/lib/input/input.css +104 -102
  115. package/lib/input/input.less +33 -27
  116. package/lib/input/input.variable.css +106 -104
  117. package/lib/link/index.js +13 -15
  118. package/lib/link/link.css +18 -18
  119. package/lib/link/link.less +3 -1
  120. package/lib/link/link.variable.css +20 -20
  121. package/lib/loading/index.js +17 -19
  122. package/lib/loading/loading.css +94 -94
  123. package/lib/loading/loading.less +4 -4
  124. package/lib/loading/loading.variable.css +96 -96
  125. package/lib/locale/index.js +0 -1
  126. package/lib/menu/index.js +13 -15
  127. package/lib/menu/menu.css +38 -38
  128. package/lib/menu/menu.less +10 -10
  129. package/lib/menu/menu.variable.css +40 -40
  130. package/lib/menu/submenu.css +1 -1
  131. package/lib/menu/submenu.less +1 -1
  132. package/lib/menu/submenu.variable.css +3 -3
  133. package/lib/message/index.js +38 -40
  134. package/lib/message/message.css +59 -59
  135. package/lib/message/message.less +24 -25
  136. package/lib/message/message.variable.css +61 -61
  137. package/lib/modal/index.js +41 -43
  138. package/lib/modal/modal.css +26 -26
  139. package/lib/modal/modal.less +12 -8
  140. package/lib/modal/modal.variable.css +28 -28
  141. package/lib/navigation/index.js +14 -16
  142. package/lib/navigation/navigation.css +25 -25
  143. package/lib/navigation/navigation.less +9 -9
  144. package/lib/navigation/navigation.variable.css +27 -27
  145. package/lib/notify/index.js +31 -33
  146. package/lib/notify/notify.css +17 -17
  147. package/lib/notify/notify.less +6 -8
  148. package/lib/notify/notify.variable.css +19 -19
  149. package/lib/overflow-title/index.js +14 -22
  150. package/lib/pagination/index.js +50 -65
  151. package/lib/pagination/pagination.css +60 -60
  152. package/lib/pagination/pagination.less +25 -24
  153. package/lib/pagination/pagination.variable.css +62 -62
  154. package/lib/plugin-popover/index.js +53 -54
  155. package/lib/plugins/index.js +0 -1
  156. package/lib/pop-confirm/index.js +28 -42
  157. package/lib/pop-confirm/pop-confirm.css +10 -10
  158. package/lib/pop-confirm/pop-confirm.less +11 -14
  159. package/lib/pop-confirm/pop-confirm.variable.css +12 -12
  160. package/lib/popover/index.js +52 -54
  161. package/lib/popover/popover.css +5 -5
  162. package/lib/popover/popover.less +6 -5
  163. package/lib/popover/popover.variable.css +7 -7
  164. package/lib/popover2/index.js +3 -4
  165. package/lib/preset.js +64 -18
  166. package/lib/process/index.js +26 -27
  167. package/lib/process/process.css +33 -36
  168. package/lib/process/process.less +7 -8
  169. package/lib/process/process.variable.css +35 -38
  170. package/lib/progress/index.js +26 -28
  171. package/lib/progress/progress.css +33 -33
  172. package/lib/progress/progress.less +5 -6
  173. package/lib/progress/progress.variable.css +35 -35
  174. package/lib/radio/index.js +32 -34
  175. package/lib/radio/radio.css +51 -51
  176. package/lib/radio/radio.less +20 -13
  177. package/lib/radio/radio.variable.css +53 -53
  178. package/lib/rate/index.js +22 -24
  179. package/lib/rate/rate.css +2 -2
  180. package/lib/rate/rate.less +1 -1
  181. package/lib/rate/rate.variable.css +4 -4
  182. package/lib/rate/star.css +7 -7
  183. package/lib/rate/star.less +1 -1
  184. package/lib/rate/star.variable.css +9 -9
  185. package/lib/resize-layout/index.js +25 -27
  186. package/lib/resize-layout/resize-layout.css +42 -42
  187. package/lib/resize-layout/resize-layout.less +10 -17
  188. package/lib/resize-layout/resize-layout.variable.css +44 -44
  189. package/lib/search-select/index.js +49 -68
  190. package/lib/search-select/search-select.css +15 -15
  191. package/lib/search-select/search-select.variable.css +17 -17
  192. package/lib/select/index.js +129 -168
  193. package/lib/select/select.css +87 -87
  194. package/lib/select/select.less +22 -27
  195. package/lib/select/select.variable.css +89 -89
  196. package/lib/shared/index.js +4 -7
  197. package/lib/sideslider/index.js +14 -22
  198. package/lib/sideslider/sideslider.css +14 -14
  199. package/lib/sideslider/sideslider.less +13 -9
  200. package/lib/sideslider/sideslider.variable.css +16 -16
  201. package/lib/slider/index.js +22 -36
  202. package/lib/slider/slider.css +31 -31
  203. package/lib/slider/slider.less +8 -8
  204. package/lib/slider/slider.variable.css +33 -33
  205. package/lib/steps/index.js +28 -30
  206. package/lib/steps/steps.css +134 -134
  207. package/lib/steps/steps.less +48 -44
  208. package/lib/steps/steps.variable.css +136 -136
  209. package/lib/styles/mixins/animate.css +4 -4
  210. package/lib/styles/mixins/animate.less +3 -3
  211. package/lib/styles/mixins/animate.variable.css +6 -6
  212. package/lib/styles/mixins/mixins.css +15 -15
  213. package/lib/styles/mixins/mixins.variable.css +15 -15
  214. package/lib/styles/mixins/popper.css +11 -11
  215. package/lib/styles/mixins/popper.less +6 -6
  216. package/lib/styles/mixins/popper.variable.css +13 -13
  217. package/lib/styles/mixins/scroll.css +5 -5
  218. package/lib/styles/mixins/scroll.less +4 -4
  219. package/lib/styles/mixins/scroll.variable.css +7 -7
  220. package/lib/styles/reset.css +6 -6
  221. package/lib/styles/reset.less +5 -4
  222. package/lib/styles/reset.variable.css +8 -8
  223. package/lib/styles/themes/themes.less +10 -3
  224. package/lib/swiper/index.js +14 -16
  225. package/lib/swiper/swiper.css +15 -15
  226. package/lib/swiper/swiper.less +8 -8
  227. package/lib/swiper/swiper.variable.css +17 -17
  228. package/lib/switcher/index.js +29 -31
  229. package/lib/switcher/switcher.css +57 -57
  230. package/lib/switcher/switcher.less +22 -14
  231. package/lib/switcher/switcher.variable.css +59 -59
  232. package/lib/tab/index.js +44 -46
  233. package/lib/tab/tab.css +78 -78
  234. package/lib/tab/tab.less +39 -40
  235. package/lib/tab/tab.variable.css +80 -80
  236. package/lib/table/components/table-column.d.ts +1 -0
  237. package/lib/table/index.d.ts +1 -0
  238. package/lib/table/index.js +168 -207
  239. package/lib/table/plugins/head-filter.css +13 -13
  240. package/lib/table/plugins/head-filter.less +3 -3
  241. package/lib/table/plugins/head-filter.variable.css +15 -15
  242. package/lib/table/plugins/head-sort.css +5 -5
  243. package/lib/table/plugins/head-sort.less +2 -2
  244. package/lib/table/plugins/head-sort.variable.css +7 -7
  245. package/lib/table/plugins/settings.css +26 -26
  246. package/lib/table/plugins/settings.less +3 -1
  247. package/lib/table/plugins/settings.variable.css +28 -28
  248. package/lib/table/table.css +380 -380
  249. package/lib/table/table.less +14 -10
  250. package/lib/table/table.variable.css +382 -382
  251. package/lib/table-column/index.d.ts +3 -0
  252. package/lib/table-column/index.js +57 -43
  253. package/lib/tag/index.js +19 -21
  254. package/lib/tag/tag.css +51 -51
  255. package/lib/tag/tag.less +34 -34
  256. package/lib/tag/tag.variable.css +53 -53
  257. package/lib/tag-input/index.js +65 -80
  258. package/lib/tag-input/tag-input.css +38 -38
  259. package/lib/tag-input/tag-input.less +3 -3
  260. package/lib/tag-input/tag-input.variable.css +40 -40
  261. package/lib/time-picker/index.d.ts +3 -0
  262. package/lib/time-picker/index.js +7 -9
  263. package/lib/time-picker/time-picker.css +40 -40
  264. package/lib/time-picker/time-picker.less +44 -76
  265. package/lib/time-picker/time-picker.variable.css +42 -42
  266. package/lib/timeline/index.js +12 -13
  267. package/lib/timeline/timeline.css +69 -69
  268. package/lib/timeline/timeline.less +12 -6
  269. package/lib/timeline/timeline.variable.css +71 -71
  270. package/lib/transfer/index.js +36 -51
  271. package/lib/transfer/transfer.css +89 -89
  272. package/lib/transfer/transfer.less +1 -1
  273. package/lib/transfer/transfer.variable.css +91 -91
  274. package/lib/tree/index.js +72 -92
  275. package/lib/tree/tree.css +49 -49
  276. package/lib/tree/tree.less +7 -6
  277. package/lib/tree/tree.variable.css +51 -51
  278. package/lib/upload/index.js +48 -63
  279. package/lib/upload/upload.css +98 -98
  280. package/lib/upload/upload.less +69 -68
  281. package/lib/upload/upload.variable.css +100 -100
  282. package/lib/virtual-render/index.js +33 -35
  283. package/lib/virtual-render/virtual-render.css +9 -9
  284. package/lib/virtual-render/virtual-render.less +1 -1
  285. package/lib/virtual-render/virtual-render.variable.css +11 -11
  286. package/package.json +1 -1
  287. package/lib/styles/themes/themes copy.less +0 -167
package/lib/color-picker/color-picker.less CHANGED
@@ -1,6 +1,6 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- :where(.@{bk-prefix}-color-picker) {
3
+ .@{bk-prefix}-color-picker {
4
4
  position: relative;
5
5
  display: inline-flex;
6
6
  height: 32px;
@@ -9,9 +9,7 @@
9
9
  border: 1px solid #dcdee5;
10
10
  border-radius: 2px;
11
11
  outline: none;
12
- transition:
13
- border 0.2s,
14
- box-shadow 0.2s;
12
+ transition: border .2s, box-shadow .2s;
15
13
  align-content: center;
16
14
 
17
15
  &.@{bk-prefix}-color-picker-show-value {
@@ -59,19 +57,17 @@
59
57
  &:hover,
60
58
  &:focus {
61
59
  border-color: #3a84ff;
62
- transition: border 0.2s;
60
+ transition: border .2s;
63
61
  }
64
62
 
65
63
  &.@{bk-prefix}-color-picker-show-dropdown {
66
64
  border-color: #3a84ff;
67
- box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
68
- transition:
69
- border 0.2s,
70
- box-shadow 0.2s;
65
+ box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
66
+ transition: border .2s, box-shadow .2s;
71
67
 
72
68
  .icon-angle-down {
73
69
  transform: rotate(-180deg);
74
- transition: transform 0.3s;
70
+ transition: transform .3s;
75
71
  }
76
72
  }
77
73
 
@@ -99,7 +95,7 @@
99
95
  height: 18px;
100
96
  font-size: 18px;
101
97
  color: #3a84ff;
102
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
98
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
103
99
  }
104
100
  }
105
101
 
@@ -127,6 +123,7 @@
127
123
  margin-right: 5px;
128
124
  transform: rotate(180deg);
129
125
 
126
+
130
127
  .icon-angle-down {
131
128
  position: absolute;
132
129
  right: 4px;
@@ -134,17 +131,17 @@
134
131
  align-items: center;
135
132
  font-size: 20px;
136
133
  color: #979ba5;
137
- transition: transform 0.3s;
134
+ transition: transform .3s;
138
135
  }
139
136
  }
140
137
  }
141
138
 
142
139
  /*下拉面板*/
143
- :where(.@{bk-prefix}-color-picker-dropdown) {
140
+ .@{bk-prefix}-color-picker-dropdown {
144
141
  width: 272px;
145
142
  }
146
143
 
147
- :where(.@{bk-prefix}-color-picker-saturation) {
144
+ .@{bk-prefix}-color-picker-saturation {
148
145
  position: relative;
149
146
  height: 180px;
150
147
  margin: 0 6px 6px;
@@ -168,7 +165,7 @@
168
165
  }
169
166
  }
170
167
 
171
- :where(.@{bk-prefix}-color-picker-hue) {
168
+ .@{bk-prefix}-color-picker-hue {
172
169
  position: relative;
173
170
  height: 10px;
174
171
  margin: 0 6px 6px;
@@ -187,12 +184,12 @@
187
184
  background: #fff;
188
185
  border-radius: 1px;
189
186
  transform: translateX(-2px);
190
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
187
+ box-shadow: 0 0 2px rgba(0, 0, 0, .6);
191
188
  }
192
189
  }
193
190
  }
194
191
 
195
- :where(.@{bk-prefix}-color-picker-input) {
192
+ .@{bk-prefix}-color-picker-input {
196
193
  display: flex;
197
194
  margin: 0 6px 1px;
198
195
  font-size: 12px;
@@ -221,11 +218,11 @@
221
218
  border: 1px solid #c4c6cc;
222
219
  border-radius: 2px;
223
220
  outline: none;
224
- transition: border 0.2s;
221
+ transition: border .2s;
225
222
 
226
223
  &:focus {
227
- border-color: #3a84ff;
228
- transition: border 0.2s;
224
+ border-color: #3a84ff;;
225
+ transition: border .2s;
229
226
  }
230
227
 
231
228
  &.error {
@@ -247,7 +244,7 @@
247
244
  }
248
245
  }
249
246
 
250
- :where(.@{bk-prefix}-color-picker-recommend-container) {
247
+ .@{bk-prefix}-color-picker-recommend-container {
251
248
  padding: 6px;
252
249
  border-top: 1px solid #f0f1f5;
253
250
 
@@ -261,29 +258,29 @@
261
258
  margin: 3px;
262
259
  cursor: pointer;
263
260
  border-radius: 3px;
264
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
261
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
265
262
 
266
263
  &.@{bk-prefix}-color-picker-recommend-selected-color {
267
- box-shadow: 0 0 3px 2px #3a84ff;
264
+ box-shadow: 0 0 3px 2px #3a84ff;;
268
265
  }
269
266
  }
270
267
  }
271
268
  }
272
269
 
273
- :where(.@{bk-prefix}-color-picker-saturation),
274
- :where(.@{bk-prefix}-color-picker-hue),
275
- :where(.@{bk-prefix}-color-picker-recommend) {
270
+ .@{bk-prefix}-color-picker-saturation,
271
+ .@{bk-prefix}-color-picker-hue,
272
+ .@{bk-prefix}-color-picker-recommend {
276
273
  outline: none;
277
- transition: box-shadow 0.2s;
274
+ transition: box-shadow .2s;
278
275
 
279
276
  &:focus {
280
- box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
281
- transition: box-shadow 0.2s;
277
+ box-shadow: 0 0 0 2px rgba(45, 140, 240, .5);
278
+ transition: box-shadow .2s;
282
279
  }
283
280
  }
284
281
 
285
282
  /*饱和度和预设值共用样式*/
286
- :where(.@{bk-prefix}-color-picker-pointer) {
283
+ .@{bk-prefix}-color-picker-pointer {
287
284
  position: absolute;
288
285
  top: 50%;
289
286
  left: 50%;
@@ -300,14 +297,11 @@
300
297
  cursor: pointer;
301
298
  border-radius: 50%;
302
299
  transform: translate(-2px, -2px);
303
- box-shadow:
304
- 0 0 0 1.5px #fff,
305
- inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
306
- 0 0 1px 2px rgba(0, 0, 0, 0.4);
300
+ box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
307
301
  }
308
302
  }
309
303
 
310
- :where(.@{bk-prefix}-color-picker-empty) {
304
+ .@{bk-prefix}-color-picker-empty {
311
305
  position: relative;
312
306
 
313
307
  &::after {
@@ -323,7 +317,7 @@
323
317
  }
324
318
  }
325
319
 
326
- :where(.@{bk-prefix}-color-dropdown-container) {
320
+ .@{bk-prefix}-color-dropdown-container {
327
321
  padding: 0px;
328
322
  cursor: default;
329
323
  transform-origin: center top;
package/lib/color-picker/color-picker.variable.css CHANGED
@@ -12,13 +12,13 @@
12
12
  --whitesmoke-color: #fafbfd;
13
13
  --disable-color: #dcdee5;
14
14
  --disable-bg-color: #f9fafd;
15
+ --border-color: #dcdee5;
15
16
  --font-size-base: 12px;
16
17
  --font-size-medium: 14px;
17
18
  --font-size-large: 16px;
18
19
  --line-height-base: 16px;
19
20
  --line-height-medium: 16px;
20
21
  --line-height-large: 18px;
21
- --border-color: #dcdee5;
22
22
  --component-size-small: 26px;
23
23
  --component-size-base: 32px;
24
24
  --component-size-large: 40px;
@@ -111,7 +111,7 @@
111
111
  --table-border-color: #dcdee5;
112
112
  --table-head-bg-color: #fafbfd;
113
113
  --table-head-font-color: #313238;
114
- --table-body-font-color: #63656e;
114
+ --table-body-font-color: #63656E;
115
115
  --table-row-hover-bg-color: #f5f7fa;
116
116
  --table-row-active-bg-color: #f0f1f5;
117
117
  --cascader-panel-border-color: #dcdee5;
@@ -127,7 +127,7 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- :where(.bk-color-picker) {
130
+ .bk-color-picker {
131
131
  position: relative;
132
132
  display: inline-flex;
133
133
  height: 32px;
@@ -139,77 +139,77 @@
139
139
  transition: border 0.2s, box-shadow 0.2s;
140
140
  align-content: center;
141
141
  }
142
- :where(.bk-color-picker).bk-color-picker-show-value {
142
+ .bk-color-picker.bk-color-picker-show-value {
143
143
  width: 150px;
144
144
  }
145
- :where(.bk-color-picker).bk-color-picker-large {
145
+ .bk-color-picker.bk-color-picker-large {
146
146
  height: 36px;
147
147
  }
148
- :where(.bk-color-picker).bk-color-picker-large.bk-color-picker-show-value {
148
+ .bk-color-picker.bk-color-picker-large.bk-color-picker-show-value {
149
149
  width: 170px;
150
150
  }
151
- :where(.bk-color-picker).bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
151
+ .bk-color-picker.bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
152
152
  width: calc(100% - 62px);
153
153
  font-size: 16px;
154
154
  }
155
- :where(.bk-color-picker).bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
155
+ .bk-color-picker.bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
156
156
  width: 22px;
157
157
  height: 22px;
158
158
  font-size: 22px;
159
159
  }
160
- :where(.bk-color-picker).bk-color-picker-small {
160
+ .bk-color-picker.bk-color-picker-small {
161
161
  height: 28px;
162
162
  }
163
- :where(.bk-color-picker).bk-color-picker-small.bk-color-picker-show-value {
163
+ .bk-color-picker.bk-color-picker-small.bk-color-picker-show-value {
164
164
  width: 132px;
165
165
  }
166
- :where(.bk-color-picker).bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
166
+ .bk-color-picker.bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
167
167
  width: calc(100% - 56px);
168
168
  font-size: 12px;
169
169
  }
170
- :where(.bk-color-picker).bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
170
+ .bk-color-picker.bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
171
171
  width: 16px;
172
172
  height: 16px;
173
173
  font-size: 16px;
174
174
  }
175
- :where(.bk-color-picker):hover,
176
- :where(.bk-color-picker):focus {
175
+ .bk-color-picker:hover,
176
+ .bk-color-picker:focus {
177
177
  border-color: #3a84ff;
178
178
  transition: border 0.2s;
179
179
  }
180
- :where(.bk-color-picker).bk-color-picker-show-dropdown {
180
+ .bk-color-picker.bk-color-picker-show-dropdown {
181
181
  border-color: #3a84ff;
182
182
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
183
183
  transition: border 0.2s, box-shadow 0.2s;
184
184
  }
185
- :where(.bk-color-picker).bk-color-picker-show-dropdown .icon-angle-down {
185
+ .bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
186
186
  transform: rotate(-180deg);
187
187
  transition: transform 0.3s;
188
188
  }
189
- :where(.bk-color-picker).bk-color-picker-disabled {
189
+ .bk-color-picker.bk-color-picker-disabled {
190
190
  cursor: not-allowed;
191
191
  background-color: #e1ecff;
192
192
  border-color: #699df4;
193
193
  }
194
- :where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-text {
194
+ .bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
195
195
  color: #3a84ff;
196
196
  }
197
- :where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
197
+ .bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
198
198
  color: #3a84ff;
199
199
  }
200
- :where(.bk-color-picker) .bk-color-picker-color {
200
+ .bk-color-picker .bk-color-picker-color {
201
201
  display: flex;
202
202
  margin-left: 6px;
203
203
  align-items: center;
204
204
  }
205
- :where(.bk-color-picker) .bk-color-picker-color .bk-color-picker-color-square {
205
+ .bk-color-picker .bk-color-picker-color .bk-color-picker-color-square {
206
206
  width: 18px;
207
207
  height: 18px;
208
208
  font-size: 18px;
209
209
  color: #3a84ff;
210
210
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
211
211
  }
212
- :where(.bk-color-picker) .bk-color-picker-text {
212
+ .bk-color-picker .bk-color-picker-text {
213
213
  display: flex;
214
214
  width: calc(100% - 58px);
215
215
  margin-left: 6px;
@@ -218,12 +218,12 @@
218
218
  color: #63656e;
219
219
  align-items: center;
220
220
  }
221
- :where(.bk-color-picker) .bk-color-picker-text span {
221
+ .bk-color-picker .bk-color-picker-text span {
222
222
  overflow: hidden;
223
223
  text-overflow: ellipsis;
224
224
  white-space: nowrap;
225
225
  }
226
- :where(.bk-color-picker) .bk-color-picker-icon {
226
+ .bk-color-picker .bk-color-picker-icon {
227
227
  display: flex;
228
228
  justify-content: center;
229
229
  align-items: center;
@@ -231,7 +231,7 @@
231
231
  margin-right: 5px;
232
232
  transform: rotate(180deg);
233
233
  }
234
- :where(.bk-color-picker) .bk-color-picker-icon .icon-angle-down {
234
+ .bk-color-picker .bk-color-picker-icon .icon-angle-down {
235
235
  position: absolute;
236
236
  right: 4px;
237
237
  display: flex;
@@ -241,22 +241,22 @@
241
241
  transition: transform 0.3s;
242
242
  }
243
243
  /*下拉面板*/
244
- :where(.bk-color-picker-dropdown) {
244
+ .bk-color-picker-dropdown {
245
245
  width: 272px;
246
246
  }
247
- :where(.bk-color-picker-saturation) {
247
+ .bk-color-picker-saturation {
248
248
  position: relative;
249
249
  height: 180px;
250
250
  margin: 0 6px 6px;
251
251
  }
252
- :where(.bk-color-picker-saturation) .bk-color-picker-saturation-white {
252
+ .bk-color-picker-saturation .bk-color-picker-saturation-white {
253
253
  background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
254
254
  }
255
- :where(.bk-color-picker-saturation) .bk-color-picker-saturation-black {
255
+ .bk-color-picker-saturation .bk-color-picker-saturation-black {
256
256
  background: linear-gradient(0deg, #000, transparent);
257
257
  }
258
- :where(.bk-color-picker-saturation) .bk-color-picker-saturation-white,
259
- :where(.bk-color-picker-saturation) .bk-color-picker-saturation-black {
258
+ .bk-color-picker-saturation .bk-color-picker-saturation-white,
259
+ .bk-color-picker-saturation .bk-color-picker-saturation-black {
260
260
  position: absolute;
261
261
  top: 0;
262
262
  left: 0;
@@ -264,18 +264,18 @@
264
264
  height: 100%;
265
265
  cursor: pointer;
266
266
  }
267
- :where(.bk-color-picker-hue) {
267
+ .bk-color-picker-hue {
268
268
  position: relative;
269
269
  height: 10px;
270
270
  margin: 0 6px 6px;
271
271
  cursor: pointer;
272
272
  background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
273
273
  }
274
- :where(.bk-color-picker-hue) .bk-color-picker-hue-pointer {
274
+ .bk-color-picker-hue .bk-color-picker-hue-pointer {
275
275
  position: absolute;
276
276
  top: 0;
277
277
  }
278
- :where(.bk-color-picker-hue) .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
278
+ .bk-color-picker-hue .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
279
279
  width: 4px;
280
280
  height: 8px;
281
281
  margin-top: 1px;
@@ -285,26 +285,26 @@
285
285
  transform: translateX(-2px);
286
286
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
287
287
  }
288
- :where(.bk-color-picker-input) {
288
+ .bk-color-picker-input {
289
289
  display: flex;
290
290
  margin: 0 6px 1px;
291
291
  font-size: 12px;
292
292
  color: #63656e;
293
293
  justify-content: space-between;
294
294
  }
295
- :where(.bk-color-picker-input) .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
295
+ .bk-color-picker-input .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
296
296
  width: 70px;
297
297
  }
298
- :where(.bk-color-picker-input) .bk-color-picker-input-rgba {
298
+ .bk-color-picker-input .bk-color-picker-input-rgba {
299
299
  display: flex;
300
300
  width: 160px;
301
301
  justify-content: space-between;
302
302
  }
303
- :where(.bk-color-picker-input) .bk-color-picker-input-part {
303
+ .bk-color-picker-input .bk-color-picker-input-part {
304
304
  display: flex;
305
305
  flex-flow: column;
306
306
  }
307
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value {
307
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value {
308
308
  width: 32px;
309
309
  height: 22px;
310
310
  padding: 0 4px;
@@ -314,32 +314,32 @@
314
314
  outline: none;
315
315
  transition: border 0.2s;
316
316
  }
317
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value:focus {
317
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value:focus {
318
318
  border-color: #3a84ff;
319
319
  transition: border 0.2s;
320
320
  }
321
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value.error {
321
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value.error {
322
322
  border-color: #3a84ff;
323
323
  }
324
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
325
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button {
324
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
325
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button {
326
326
  margin: 0;
327
327
  appearance: none;
328
328
  }
329
- :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-text {
329
+ .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-text {
330
330
  height: 18px;
331
331
  line-height: 18px;
332
332
  text-align: center;
333
333
  }
334
- :where(.bk-color-picker-recommend-container) {
334
+ .bk-color-picker-recommend-container {
335
335
  padding: 6px;
336
336
  border-top: 1px solid #f0f1f5;
337
337
  }
338
- :where(.bk-color-picker-recommend-container) .bk-color-picker-recommend {
338
+ .bk-color-picker-recommend-container .bk-color-picker-recommend {
339
339
  display: flex;
340
340
  flex-wrap: wrap;
341
341
  }
342
- :where(.bk-color-picker-recommend-container) .bk-color-picker-recommend .bk-color-picker-recommend-color {
342
+ .bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color {
343
343
  width: 20px;
344
344
  height: 20px;
345
345
  margin: 3px;
@@ -347,23 +347,23 @@
347
347
  border-radius: 3px;
348
348
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
349
349
  }
350
- :where(.bk-color-picker-recommend-container) .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
350
+ .bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
351
351
  box-shadow: 0 0 3px 2px #3a84ff;
352
352
  }
353
- :where(.bk-color-picker-saturation),
354
- :where(.bk-color-picker-hue),
355
- :where(.bk-color-picker-recommend) {
353
+ .bk-color-picker-saturation,
354
+ .bk-color-picker-hue,
355
+ .bk-color-picker-recommend {
356
356
  outline: none;
357
357
  transition: box-shadow 0.2s;
358
358
  }
359
- :where(.bk-color-picker-saturation):focus,
360
- :where(.bk-color-picker-hue):focus,
361
- :where(.bk-color-picker-recommend):focus {
359
+ .bk-color-picker-saturation:focus,
360
+ .bk-color-picker-hue:focus,
361
+ .bk-color-picker-recommend:focus {
362
362
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
363
363
  transition: box-shadow 0.2s;
364
364
  }
365
365
  /*饱和度和预设值共用样式*/
366
- :where(.bk-color-picker-pointer) {
366
+ .bk-color-picker-pointer {
367
367
  position: absolute;
368
368
  top: 50%;
369
369
  left: 50%;
@@ -371,7 +371,7 @@
371
371
  height: 4px;
372
372
  cursor: pointer;
373
373
  }
374
- :where(.bk-color-picker-pointer) .bk-color-picker-circle {
374
+ .bk-color-picker-pointer .bk-color-picker-circle {
375
375
  position: absolute;
376
376
  top: 0;
377
377
  left: 0;
@@ -382,10 +382,10 @@
382
382
  transform: translate(-2px, -2px);
383
383
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
384
384
  }
385
- :where(.bk-color-picker-empty) {
385
+ .bk-color-picker-empty {
386
386
  position: relative;
387
387
  }
388
- :where(.bk-color-picker-empty)::after {
388
+ .bk-color-picker-empty::after {
389
389
  position: absolute;
390
390
  top: 1px;
391
391
  left: calc(50% - 1px);
@@ -396,7 +396,7 @@
396
396
  content: '';
397
397
  transform: rotate(45deg);
398
398
  }
399
- :where(.bk-color-dropdown-container) {
399
+ .bk-color-dropdown-container {
400
400
  padding: 0px;
401
401
  cursor: default;
402
402
  transform-origin: center top;