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

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 (219) hide show
  1. package/dist/index.cjs.js +46 -46
  2. package/dist/index.esm.js +6148 -6162
  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/alert/alert.css +21 -21
  10. package/lib/alert/alert.less +17 -16
  11. package/lib/alert/alert.variable.css +23 -23
  12. package/lib/backtop/backtop.css +11 -11
  13. package/lib/backtop/backtop.less +3 -3
  14. package/lib/backtop/backtop.variable.css +13 -13
  15. package/lib/badge/badge.css +32 -32
  16. package/lib/badge/badge.less +5 -5
  17. package/lib/badge/badge.variable.css +34 -34
  18. package/lib/breadcrumb/breadcrumb.css +31 -31
  19. package/lib/breadcrumb/breadcrumb.less +8 -8
  20. package/lib/breadcrumb/breadcrumb.variable.css +33 -33
  21. package/lib/button/button.css +69 -69
  22. package/lib/button/button.less +3 -5
  23. package/lib/button/button.variable.css +71 -71
  24. package/lib/card/card.css +31 -31
  25. package/lib/card/card.less +4 -4
  26. package/lib/card/card.variable.css +33 -33
  27. package/lib/cascader/cascader.css +63 -63
  28. package/lib/cascader/cascader.less +12 -11
  29. package/lib/cascader/cascader.variable.css +65 -65
  30. package/lib/checkbox/checkbox.css +21 -21
  31. package/lib/checkbox/checkbox.less +8 -8
  32. package/lib/checkbox/checkbox.variable.css +23 -23
  33. package/lib/code-diff/code-diff.css +97 -97
  34. package/lib/code-diff/code-diff.less +3 -4
  35. package/lib/code-diff/code-diff.variable.css +99 -99
  36. package/lib/collapse/collapse.css +30 -30
  37. package/lib/collapse/collapse.less +25 -24
  38. package/lib/collapse/collapse.variable.css +32 -32
  39. package/lib/collapse-transition/collapse-transition.css +32 -32
  40. package/lib/collapse-transition/collapse-transition.less +59 -48
  41. package/lib/collapse-transition/collapse-transition.variable.css +34 -34
  42. package/lib/color-picker/color-picker.css +57 -57
  43. package/lib/color-picker/color-picker.less +36 -30
  44. package/lib/color-picker/color-picker.variable.css +59 -59
  45. package/lib/config-provider/config-provider.variable.css +2 -2
  46. package/lib/container/container.css +19 -19
  47. package/lib/container/container.less +3 -3
  48. package/lib/container/container.variable.css +21 -21
  49. package/lib/date-picker/date-picker.css +92 -92
  50. package/lib/date-picker/date-picker.d.ts +0 -1
  51. package/lib/date-picker/date-picker.less +55 -54
  52. package/lib/date-picker/date-picker.variable.css +94 -94
  53. package/lib/date-picker/index.d.ts +0 -3
  54. package/lib/date-picker/index.js +8 -8
  55. package/lib/date-picker/time-picker.d.ts +0 -1
  56. package/lib/dialog/dialog.css +51 -51
  57. package/lib/dialog/dialog.less +1 -1
  58. package/lib/dialog/dialog.variable.css +53 -53
  59. package/lib/divider/divider.css +8 -8
  60. package/lib/divider/divider.less +5 -8
  61. package/lib/divider/divider.variable.css +10 -10
  62. package/lib/dropdown/dropdown.css +15 -15
  63. package/lib/dropdown/dropdown.less +6 -6
  64. package/lib/dropdown/dropdown.variable.css +17 -17
  65. package/lib/exception/exception.css +13 -13
  66. package/lib/exception/exception.less +6 -6
  67. package/lib/exception/exception.variable.css +15 -15
  68. package/lib/fixed-navbar/fixed-navbar.css +9 -9
  69. package/lib/fixed-navbar/fixed-navbar.less +1 -2
  70. package/lib/fixed-navbar/fixed-navbar.variable.css +11 -11
  71. package/lib/form/form.css +63 -63
  72. package/lib/form/form.less +14 -16
  73. package/lib/form/form.variable.css +65 -65
  74. package/lib/image/image-viewer.css +23 -23
  75. package/lib/image/image-viewer.less +24 -25
  76. package/lib/image/image-viewer.variable.css +25 -25
  77. package/lib/image/image.css +29 -29
  78. package/lib/image/image.less +6 -8
  79. package/lib/image/image.variable.css +31 -31
  80. package/lib/info-box/info-box.css +10 -10
  81. package/lib/info-box/info-box.less +1 -2
  82. package/lib/info-box/info-box.variable.css +12 -12
  83. package/lib/input/input.css +102 -104
  84. package/lib/input/input.less +27 -33
  85. package/lib/input/input.variable.css +104 -106
  86. package/lib/link/link.css +18 -18
  87. package/lib/link/link.less +1 -3
  88. package/lib/link/link.variable.css +20 -20
  89. package/lib/loading/loading.css +94 -94
  90. package/lib/loading/loading.less +4 -4
  91. package/lib/loading/loading.variable.css +96 -96
  92. package/lib/menu/menu.css +38 -38
  93. package/lib/menu/menu.less +10 -10
  94. package/lib/menu/menu.variable.css +40 -40
  95. package/lib/menu/submenu.css +1 -1
  96. package/lib/menu/submenu.less +1 -1
  97. package/lib/menu/submenu.variable.css +3 -3
  98. package/lib/message/message.css +59 -59
  99. package/lib/message/message.less +25 -24
  100. package/lib/message/message.variable.css +61 -61
  101. package/lib/modal/modal.css +26 -26
  102. package/lib/modal/modal.less +8 -12
  103. package/lib/modal/modal.variable.css +28 -28
  104. package/lib/navigation/navigation.css +25 -25
  105. package/lib/navigation/navigation.less +9 -9
  106. package/lib/navigation/navigation.variable.css +27 -27
  107. package/lib/notify/notify.css +17 -17
  108. package/lib/notify/notify.less +8 -6
  109. package/lib/notify/notify.variable.css +19 -19
  110. package/lib/pagination/pagination.css +60 -60
  111. package/lib/pagination/pagination.less +24 -25
  112. package/lib/pagination/pagination.variable.css +62 -62
  113. package/lib/pop-confirm/pop-confirm.css +10 -10
  114. package/lib/pop-confirm/pop-confirm.less +14 -11
  115. package/lib/pop-confirm/pop-confirm.variable.css +12 -12
  116. package/lib/popover/popover.css +5 -5
  117. package/lib/popover/popover.less +5 -6
  118. package/lib/popover/popover.variable.css +7 -7
  119. package/lib/process/process.css +36 -33
  120. package/lib/process/process.less +8 -7
  121. package/lib/process/process.variable.css +38 -35
  122. package/lib/progress/progress.css +33 -33
  123. package/lib/progress/progress.less +6 -5
  124. package/lib/progress/progress.variable.css +35 -35
  125. package/lib/radio/radio.css +51 -51
  126. package/lib/radio/radio.less +13 -20
  127. package/lib/radio/radio.variable.css +53 -53
  128. package/lib/rate/rate.css +2 -2
  129. package/lib/rate/rate.less +1 -1
  130. package/lib/rate/rate.variable.css +4 -4
  131. package/lib/rate/star.css +7 -7
  132. package/lib/rate/star.less +1 -1
  133. package/lib/rate/star.variable.css +9 -9
  134. package/lib/resize-layout/resize-layout.css +42 -42
  135. package/lib/resize-layout/resize-layout.less +17 -10
  136. package/lib/resize-layout/resize-layout.variable.css +44 -44
  137. package/lib/search-select/search-select.css +15 -15
  138. package/lib/search-select/search-select.variable.css +17 -17
  139. package/lib/select/select.css +87 -87
  140. package/lib/select/select.less +27 -22
  141. package/lib/select/select.variable.css +89 -89
  142. package/lib/shared/index.js +6 -4
  143. package/lib/sideslider/sideslider.css +14 -14
  144. package/lib/sideslider/sideslider.less +9 -13
  145. package/lib/sideslider/sideslider.variable.css +16 -16
  146. package/lib/slider/slider.css +31 -31
  147. package/lib/slider/slider.less +8 -8
  148. package/lib/slider/slider.variable.css +33 -33
  149. package/lib/steps/steps.css +134 -134
  150. package/lib/steps/steps.less +44 -48
  151. package/lib/steps/steps.variable.css +136 -136
  152. package/lib/styles/mixins/animate.css +4 -4
  153. package/lib/styles/mixins/animate.less +3 -3
  154. package/lib/styles/mixins/animate.variable.css +6 -6
  155. package/lib/styles/mixins/mixins.css +15 -15
  156. package/lib/styles/mixins/mixins.variable.css +15 -15
  157. package/lib/styles/mixins/popper.css +11 -11
  158. package/lib/styles/mixins/popper.less +6 -6
  159. package/lib/styles/mixins/popper.variable.css +13 -13
  160. package/lib/styles/mixins/scroll.css +5 -5
  161. package/lib/styles/mixins/scroll.less +4 -4
  162. package/lib/styles/mixins/scroll.variable.css +7 -7
  163. package/lib/styles/reset.css +6 -6
  164. package/lib/styles/reset.less +4 -5
  165. package/lib/styles/reset.variable.css +8 -8
  166. package/lib/styles/themes/themes copy.less +167 -0
  167. package/lib/styles/themes/themes.less +3 -10
  168. package/lib/swiper/swiper.css +15 -15
  169. package/lib/swiper/swiper.less +8 -8
  170. package/lib/swiper/swiper.variable.css +17 -17
  171. package/lib/switcher/switcher.css +57 -57
  172. package/lib/switcher/switcher.less +14 -22
  173. package/lib/switcher/switcher.variable.css +59 -59
  174. package/lib/tab/tab.css +78 -78
  175. package/lib/tab/tab.less +40 -39
  176. package/lib/tab/tab.variable.css +80 -80
  177. package/lib/table/components/table-column.d.ts +0 -1
  178. package/lib/table/index.d.ts +0 -1
  179. package/lib/table/index.js +0 -20
  180. package/lib/table/plugins/head-filter.css +13 -13
  181. package/lib/table/plugins/head-filter.less +3 -3
  182. package/lib/table/plugins/head-filter.variable.css +15 -15
  183. package/lib/table/plugins/head-sort.css +5 -5
  184. package/lib/table/plugins/head-sort.less +2 -2
  185. package/lib/table/plugins/head-sort.variable.css +7 -7
  186. package/lib/table/plugins/settings.css +26 -26
  187. package/lib/table/plugins/settings.less +1 -3
  188. package/lib/table/plugins/settings.variable.css +28 -28
  189. package/lib/table/table.css +380 -380
  190. package/lib/table/table.less +10 -14
  191. package/lib/table/table.variable.css +382 -382
  192. package/lib/table-column/index.d.ts +0 -3
  193. package/lib/table-column/index.js +0 -15
  194. package/lib/tag/tag.css +51 -51
  195. package/lib/tag/tag.less +34 -34
  196. package/lib/tag/tag.variable.css +53 -53
  197. package/lib/tag-input/tag-input.css +38 -38
  198. package/lib/tag-input/tag-input.less +3 -3
  199. package/lib/tag-input/tag-input.variable.css +40 -40
  200. package/lib/time-picker/index.d.ts +0 -3
  201. package/lib/time-picker/time-picker.css +40 -40
  202. package/lib/time-picker/time-picker.less +76 -44
  203. package/lib/time-picker/time-picker.variable.css +42 -42
  204. package/lib/timeline/timeline.css +69 -69
  205. package/lib/timeline/timeline.less +6 -12
  206. package/lib/timeline/timeline.variable.css +71 -71
  207. package/lib/transfer/transfer.css +89 -89
  208. package/lib/transfer/transfer.less +1 -1
  209. package/lib/transfer/transfer.variable.css +91 -91
  210. package/lib/tree/tree.css +49 -49
  211. package/lib/tree/tree.less +6 -7
  212. package/lib/tree/tree.variable.css +51 -51
  213. package/lib/upload/upload.css +98 -98
  214. package/lib/upload/upload.less +68 -69
  215. package/lib/upload/upload.variable.css +100 -100
  216. package/lib/virtual-render/virtual-render.css +9 -9
  217. package/lib/virtual-render/virtual-render.less +1 -1
  218. package/lib/virtual-render/virtual-render.variable.css +11 -11
  219. package/package.json +1 -1
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;
16
15
  --font-size-base: 12px;
17
16
  --font-size-medium: 14px;
18
17
  --font-size-large: 16px;
19
18
  --line-height-base: 16px;
20
19
  --line-height-medium: 16px;
21
20
  --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
- .bk-color-picker {
130
+ :where(.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
- .bk-color-picker.bk-color-picker-show-value {
142
+ :where(.bk-color-picker).bk-color-picker-show-value {
143
143
  width: 150px;
144
144
  }
145
- .bk-color-picker.bk-color-picker-large {
145
+ :where(.bk-color-picker).bk-color-picker-large {
146
146
  height: 36px;
147
147
  }
148
- .bk-color-picker.bk-color-picker-large.bk-color-picker-show-value {
148
+ :where(.bk-color-picker).bk-color-picker-large.bk-color-picker-show-value {
149
149
  width: 170px;
150
150
  }
151
- .bk-color-picker.bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
151
+ :where(.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
- .bk-color-picker.bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
155
+ :where(.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
- .bk-color-picker.bk-color-picker-small {
160
+ :where(.bk-color-picker).bk-color-picker-small {
161
161
  height: 28px;
162
162
  }
163
- .bk-color-picker.bk-color-picker-small.bk-color-picker-show-value {
163
+ :where(.bk-color-picker).bk-color-picker-small.bk-color-picker-show-value {
164
164
  width: 132px;
165
165
  }
166
- .bk-color-picker.bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
166
+ :where(.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
- .bk-color-picker.bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
170
+ :where(.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
- .bk-color-picker:hover,
176
- .bk-color-picker:focus {
175
+ :where(.bk-color-picker):hover,
176
+ :where(.bk-color-picker):focus {
177
177
  border-color: #3a84ff;
178
178
  transition: border 0.2s;
179
179
  }
180
- .bk-color-picker.bk-color-picker-show-dropdown {
180
+ :where(.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
- .bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
185
+ :where(.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
- .bk-color-picker.bk-color-picker-disabled {
189
+ :where(.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
- .bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
194
+ :where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-text {
195
195
  color: #3a84ff;
196
196
  }
197
- .bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
197
+ :where(.bk-color-picker).bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
198
198
  color: #3a84ff;
199
199
  }
200
- .bk-color-picker .bk-color-picker-color {
200
+ :where(.bk-color-picker) .bk-color-picker-color {
201
201
  display: flex;
202
202
  margin-left: 6px;
203
203
  align-items: center;
204
204
  }
205
- .bk-color-picker .bk-color-picker-color .bk-color-picker-color-square {
205
+ :where(.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
- .bk-color-picker .bk-color-picker-text {
212
+ :where(.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
- .bk-color-picker .bk-color-picker-text span {
221
+ :where(.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
- .bk-color-picker .bk-color-picker-icon {
226
+ :where(.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
- .bk-color-picker .bk-color-picker-icon .icon-angle-down {
234
+ :where(.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
- .bk-color-picker-dropdown {
244
+ :where(.bk-color-picker-dropdown) {
245
245
  width: 272px;
246
246
  }
247
- .bk-color-picker-saturation {
247
+ :where(.bk-color-picker-saturation) {
248
248
  position: relative;
249
249
  height: 180px;
250
250
  margin: 0 6px 6px;
251
251
  }
252
- .bk-color-picker-saturation .bk-color-picker-saturation-white {
252
+ :where(.bk-color-picker-saturation) .bk-color-picker-saturation-white {
253
253
  background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
254
254
  }
255
- .bk-color-picker-saturation .bk-color-picker-saturation-black {
255
+ :where(.bk-color-picker-saturation) .bk-color-picker-saturation-black {
256
256
  background: linear-gradient(0deg, #000, transparent);
257
257
  }
258
- .bk-color-picker-saturation .bk-color-picker-saturation-white,
259
- .bk-color-picker-saturation .bk-color-picker-saturation-black {
258
+ :where(.bk-color-picker-saturation) .bk-color-picker-saturation-white,
259
+ :where(.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
- .bk-color-picker-hue {
267
+ :where(.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
- .bk-color-picker-hue .bk-color-picker-hue-pointer {
274
+ :where(.bk-color-picker-hue) .bk-color-picker-hue-pointer {
275
275
  position: absolute;
276
276
  top: 0;
277
277
  }
278
- .bk-color-picker-hue .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
278
+ :where(.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
- .bk-color-picker-input {
288
+ :where(.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
- .bk-color-picker-input .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
295
+ :where(.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
- .bk-color-picker-input .bk-color-picker-input-rgba {
298
+ :where(.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
- .bk-color-picker-input .bk-color-picker-input-part {
303
+ :where(.bk-color-picker-input) .bk-color-picker-input-part {
304
304
  display: flex;
305
305
  flex-flow: column;
306
306
  }
307
- .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value {
307
+ :where(.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
- .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value:focus {
317
+ :where(.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
- .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value.error {
321
+ :where(.bk-color-picker-input) .bk-color-picker-input-part .bk-color-picker-input-value.error {
322
322
  border-color: #3a84ff;
323
323
  }
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 {
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 {
326
326
  margin: 0;
327
327
  appearance: none;
328
328
  }
329
- .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-text {
329
+ :where(.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
- .bk-color-picker-recommend-container {
334
+ :where(.bk-color-picker-recommend-container) {
335
335
  padding: 6px;
336
336
  border-top: 1px solid #f0f1f5;
337
337
  }
338
- .bk-color-picker-recommend-container .bk-color-picker-recommend {
338
+ :where(.bk-color-picker-recommend-container) .bk-color-picker-recommend {
339
339
  display: flex;
340
340
  flex-wrap: wrap;
341
341
  }
342
- .bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color {
342
+ :where(.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
- .bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
350
+ :where(.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
- .bk-color-picker-saturation,
354
- .bk-color-picker-hue,
355
- .bk-color-picker-recommend {
353
+ :where(.bk-color-picker-saturation),
354
+ :where(.bk-color-picker-hue),
355
+ :where(.bk-color-picker-recommend) {
356
356
  outline: none;
357
357
  transition: box-shadow 0.2s;
358
358
  }
359
- .bk-color-picker-saturation:focus,
360
- .bk-color-picker-hue:focus,
361
- .bk-color-picker-recommend:focus {
359
+ :where(.bk-color-picker-saturation):focus,
360
+ :where(.bk-color-picker-hue):focus,
361
+ :where(.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
- .bk-color-picker-pointer {
366
+ :where(.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
- .bk-color-picker-pointer .bk-color-picker-circle {
374
+ :where(.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
- .bk-color-picker-empty {
385
+ :where(.bk-color-picker-empty) {
386
386
  position: relative;
387
387
  }
388
- .bk-color-picker-empty::after {
388
+ :where(.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
- .bk-color-dropdown-container {
399
+ :where(.bk-color-dropdown-container) {
400
400
  padding: 0px;
401
401
  cursor: default;
402
402
  transform-origin: center top;
package/lib/config-provider/config-provider.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;
16
15
  --font-size-base: 12px;
17
16
  --font-size-medium: 14px;
18
17
  --font-size-large: 16px;
19
18
  --line-height-base: 16px;
20
19
  --line-height-medium: 16px;
21
20
  --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;
package/lib/container/container.css CHANGED
@@ -11,12 +11,12 @@
11
11
  background-color: transparent;
12
12
  }
13
13
  }
14
- .bk-transition .bk-fade-enter-active,
15
- .bk-transition .bk-fade-leave-active {
14
+ :where(.bk-transition) .bk-fade-enter-active,
15
+ :where(.bk-transition) .bk-fade-leave-active {
16
16
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
17
17
  }
18
- .bk-transition .bk-fade-enter,
19
- .bk-transition .bk-fade-leave-to {
18
+ :where(.bk-transition) .bk-fade-enter,
19
+ :where(.bk-transition) .bk-fade-leave-to {
20
20
  opacity: 0;
21
21
  }
22
22
  .clearfix-style::after {
@@ -27,7 +27,7 @@
27
27
  content: '';
28
28
  visibility: hidden;
29
29
  }
30
- .bk-popper {
30
+ :where(.bk-popper) {
31
31
  display: none;
32
32
  padding: 7px 14px;
33
33
  font-size: 12px;
@@ -35,46 +35,46 @@
35
35
  background: #333;
36
36
  border-radius: 4px;
37
37
  }
38
- .bk-popper.light {
38
+ :where(.bk-popper).light {
39
39
  color: #63656e;
40
40
  background: #fff;
41
41
  box-shadow: #dcdee5 0 0 6px 0;
42
42
  }
43
- .bk-popper .bk-popper-arrow,
44
- .bk-popper .bk-popper-arrow::before {
43
+ :where(.bk-popper) .bk-popper-arrow,
44
+ :where(.bk-popper) .bk-popper-arrow::before {
45
45
  position: absolute;
46
46
  width: 8px;
47
47
  height: 8px;
48
48
  background: inherit;
49
49
  }
50
- .bk-popper .bk-popper-arrow {
50
+ :where(.bk-popper) .bk-popper-arrow {
51
51
  visibility: hidden;
52
52
  }
53
- .bk-popper .bk-popper-arrow::before {
53
+ :where(.bk-popper) .bk-popper-arrow::before {
54
54
  content: '';
55
55
  visibility: visible;
56
56
  transform: rotate(45deg);
57
57
  }
58
- .bk-popper[data-show] {
58
+ :where(.bk-popper)[data-show] {
59
59
  display: block;
60
60
  }
61
- .bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
61
+ :where(.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow) {
62
62
  bottom: -4px;
63
63
  }
64
- .bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
64
+ :where(.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow) {
65
65
  top: -4px;
66
66
  }
67
- .bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
67
+ :where(.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow) {
68
68
  right: -4px;
69
69
  }
70
- .bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
70
+ :where(.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow) {
71
71
  left: -4px;
72
72
  }
73
- .bk-grid-container {
73
+ :where(.bk-grid-container) {
74
74
  margin-right: auto;
75
75
  margin-left: auto;
76
76
  }
77
- .bk-grid-row::after {
77
+ :where(.bk-grid-row)::after {
78
78
  display: block;
79
79
  height: 0;
80
80
  clear: both;
@@ -82,10 +82,10 @@
82
82
  content: '';
83
83
  visibility: hidden;
84
84
  }
85
- .bk-grid-row .bk-grid-col > .bk-grid-row {
85
+ :where(.bk-grid-row) .bk-grid-col > .bk-grid-row {
86
86
  margin: 0 auto;
87
87
  }
88
- .bk-grid-col {
88
+ :where(.bk-grid-col) {
89
89
  position: relative;
90
90
  float: left;
91
91
  }
package/lib/container/container.less CHANGED
@@ -1,12 +1,12 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import '../styles/mixins/mixins.less';
3
3
 
4
- .@{bk-prefix}-grid-container {
4
+ :where(.@{bk-prefix}-grid-container) {
5
5
  margin-right: auto;
6
6
  margin-left: auto;
7
7
  }
8
8
 
9
- .@{bk-prefix}-grid-row {
9
+ :where(.@{bk-prefix}-grid-row) {
10
10
  .clearfix-style();
11
11
 
12
12
  .@{bk-prefix}-grid-col > .@{bk-prefix}-grid-row {
@@ -14,7 +14,7 @@
14
14
  }
15
15
  }
16
16
 
17
- .@{bk-prefix}-grid-col {
17
+ :where(.@{bk-prefix}-grid-col) {
18
18
  position: relative;
19
19
  float: left;
20
20
  }
package/lib/container/container.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;
16
15
  --font-size-base: 12px;
17
16
  --font-size-medium: 14px;
18
17
  --font-size-large: 16px;
19
18
  --line-height-base: 16px;
20
19
  --line-height-medium: 16px;
21
20
  --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;
@@ -140,12 +140,12 @@
140
140
  background-color: transparent;
141
141
  }
142
142
  }
143
- .bk-transition .bk-fade-enter-active,
144
- .bk-transition .bk-fade-leave-active {
143
+ :where(.bk-transition) .bk-fade-enter-active,
144
+ :where(.bk-transition) .bk-fade-leave-active {
145
145
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
146
146
  }
147
- .bk-transition .bk-fade-enter,
148
- .bk-transition .bk-fade-leave-to {
147
+ :where(.bk-transition) .bk-fade-enter,
148
+ :where(.bk-transition) .bk-fade-leave-to {
149
149
  opacity: 0;
150
150
  }
151
151
  .clearfix-style::after {
@@ -156,7 +156,7 @@
156
156
  content: '';
157
157
  visibility: hidden;
158
158
  }
159
- .bk-popper {
159
+ :where(.bk-popper) {
160
160
  display: none;
161
161
  padding: 7px 14px;
162
162
  font-size: 12px;
@@ -164,46 +164,46 @@
164
164
  background: #333;
165
165
  border-radius: 4px;
166
166
  }
167
- .bk-popper.light {
167
+ :where(.bk-popper).light {
168
168
  color: #63656e;
169
169
  background: #fff;
170
170
  box-shadow: #dcdee5 0 0 6px 0;
171
171
  }
172
- .bk-popper .bk-popper-arrow,
173
- .bk-popper .bk-popper-arrow::before {
172
+ :where(.bk-popper) .bk-popper-arrow,
173
+ :where(.bk-popper) .bk-popper-arrow::before {
174
174
  position: absolute;
175
175
  width: 8px;
176
176
  height: 8px;
177
177
  background: inherit;
178
178
  }
179
- .bk-popper .bk-popper-arrow {
179
+ :where(.bk-popper) .bk-popper-arrow {
180
180
  visibility: hidden;
181
181
  }
182
- .bk-popper .bk-popper-arrow::before {
182
+ :where(.bk-popper) .bk-popper-arrow::before {
183
183
  content: '';
184
184
  visibility: visible;
185
185
  transform: rotate(45deg);
186
186
  }
187
- .bk-popper[data-show] {
187
+ :where(.bk-popper)[data-show] {
188
188
  display: block;
189
189
  }
190
- .bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
190
+ :where(.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow) {
191
191
  bottom: -4px;
192
192
  }
193
- .bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
193
+ :where(.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow) {
194
194
  top: -4px;
195
195
  }
196
- .bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
196
+ :where(.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow) {
197
197
  right: -4px;
198
198
  }
199
- .bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
199
+ :where(.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow) {
200
200
  left: -4px;
201
201
  }
202
- .bk-grid-container {
202
+ :where(.bk-grid-container) {
203
203
  margin-right: auto;
204
204
  margin-left: auto;
205
205
  }
206
- .bk-grid-row::after {
206
+ :where(.bk-grid-row)::after {
207
207
  display: block;
208
208
  height: 0;
209
209
  clear: both;
@@ -211,10 +211,10 @@
211
211
  content: '';
212
212
  visibility: hidden;
213
213
  }
214
- .bk-grid-row .bk-grid-col > .bk-grid-row {
214
+ :where(.bk-grid-row) .bk-grid-col > .bk-grid-row {
215
215
  margin: 0 auto;
216
216
  }
217
- .bk-grid-col {
217
+ :where(.bk-grid-col) {
218
218
  position: relative;
219
219
  float: left;
220
220
  }