bkui-vue 1.0.3-beta.24 → 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 (205) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/style.variable.css +1 -1
  3. package/lib/affix/affix.css +1 -1
  4. package/lib/affix/affix.less +2 -2
  5. package/lib/affix/affix.variable.css +3 -3
  6. package/lib/alert/alert.css +21 -21
  7. package/lib/alert/alert.less +17 -16
  8. package/lib/alert/alert.variable.css +23 -23
  9. package/lib/backtop/backtop.css +11 -11
  10. package/lib/backtop/backtop.less +3 -3
  11. package/lib/backtop/backtop.variable.css +13 -13
  12. package/lib/badge/badge.css +32 -32
  13. package/lib/badge/badge.less +5 -5
  14. package/lib/badge/badge.variable.css +34 -34
  15. package/lib/breadcrumb/breadcrumb.css +31 -31
  16. package/lib/breadcrumb/breadcrumb.less +8 -8
  17. package/lib/breadcrumb/breadcrumb.variable.css +33 -33
  18. package/lib/button/button.css +69 -69
  19. package/lib/button/button.less +3 -5
  20. package/lib/button/button.variable.css +71 -71
  21. package/lib/card/card.css +31 -31
  22. package/lib/card/card.less +4 -4
  23. package/lib/card/card.variable.css +33 -33
  24. package/lib/cascader/cascader.css +63 -63
  25. package/lib/cascader/cascader.less +12 -11
  26. package/lib/cascader/cascader.variable.css +65 -65
  27. package/lib/checkbox/checkbox.css +21 -21
  28. package/lib/checkbox/checkbox.less +8 -8
  29. package/lib/checkbox/checkbox.variable.css +23 -23
  30. package/lib/code-diff/code-diff.css +97 -97
  31. package/lib/code-diff/code-diff.less +3 -4
  32. package/lib/code-diff/code-diff.variable.css +99 -99
  33. package/lib/collapse/collapse.css +30 -30
  34. package/lib/collapse/collapse.less +25 -24
  35. package/lib/collapse/collapse.variable.css +32 -32
  36. package/lib/collapse-transition/collapse-transition.css +32 -32
  37. package/lib/collapse-transition/collapse-transition.less +59 -48
  38. package/lib/collapse-transition/collapse-transition.variable.css +34 -34
  39. package/lib/color-picker/color-picker.css +57 -57
  40. package/lib/color-picker/color-picker.less +36 -30
  41. package/lib/color-picker/color-picker.variable.css +59 -59
  42. package/lib/config-provider/config-provider.variable.css +2 -2
  43. package/lib/container/container.css +19 -19
  44. package/lib/container/container.less +3 -3
  45. package/lib/container/container.variable.css +21 -21
  46. package/lib/date-picker/date-picker.css +92 -92
  47. package/lib/date-picker/date-picker.less +55 -54
  48. package/lib/date-picker/date-picker.variable.css +94 -94
  49. package/lib/dialog/dialog.css +51 -51
  50. package/lib/dialog/dialog.less +1 -1
  51. package/lib/dialog/dialog.variable.css +53 -53
  52. package/lib/divider/divider.css +8 -8
  53. package/lib/divider/divider.less +5 -8
  54. package/lib/divider/divider.variable.css +10 -10
  55. package/lib/dropdown/dropdown.css +15 -15
  56. package/lib/dropdown/dropdown.less +6 -6
  57. package/lib/dropdown/dropdown.variable.css +17 -17
  58. package/lib/exception/exception.css +13 -13
  59. package/lib/exception/exception.less +6 -6
  60. package/lib/exception/exception.variable.css +15 -15
  61. package/lib/fixed-navbar/fixed-navbar.css +9 -9
  62. package/lib/fixed-navbar/fixed-navbar.less +1 -2
  63. package/lib/fixed-navbar/fixed-navbar.variable.css +11 -11
  64. package/lib/form/form.css +63 -63
  65. package/lib/form/form.less +14 -16
  66. package/lib/form/form.variable.css +65 -65
  67. package/lib/image/image-viewer.css +23 -23
  68. package/lib/image/image-viewer.less +24 -25
  69. package/lib/image/image-viewer.variable.css +25 -25
  70. package/lib/image/image.css +29 -29
  71. package/lib/image/image.less +6 -8
  72. package/lib/image/image.variable.css +31 -31
  73. package/lib/info-box/info-box.css +10 -10
  74. package/lib/info-box/info-box.less +1 -2
  75. package/lib/info-box/info-box.variable.css +12 -12
  76. package/lib/input/input.css +102 -104
  77. package/lib/input/input.less +27 -33
  78. package/lib/input/input.variable.css +104 -106
  79. package/lib/link/link.css +18 -18
  80. package/lib/link/link.less +1 -3
  81. package/lib/link/link.variable.css +20 -20
  82. package/lib/loading/loading.css +94 -94
  83. package/lib/loading/loading.less +4 -4
  84. package/lib/loading/loading.variable.css +96 -96
  85. package/lib/menu/menu.css +38 -38
  86. package/lib/menu/menu.less +10 -10
  87. package/lib/menu/menu.variable.css +40 -40
  88. package/lib/menu/submenu.css +1 -1
  89. package/lib/menu/submenu.less +1 -1
  90. package/lib/menu/submenu.variable.css +3 -3
  91. package/lib/message/message.css +59 -59
  92. package/lib/message/message.less +25 -24
  93. package/lib/message/message.variable.css +61 -61
  94. package/lib/modal/modal.css +26 -26
  95. package/lib/modal/modal.less +8 -12
  96. package/lib/modal/modal.variable.css +28 -28
  97. package/lib/navigation/navigation.css +25 -25
  98. package/lib/navigation/navigation.less +9 -9
  99. package/lib/navigation/navigation.variable.css +27 -27
  100. package/lib/notify/notify.css +17 -17
  101. package/lib/notify/notify.less +8 -6
  102. package/lib/notify/notify.variable.css +19 -19
  103. package/lib/pagination/pagination.css +60 -60
  104. package/lib/pagination/pagination.less +24 -25
  105. package/lib/pagination/pagination.variable.css +62 -62
  106. package/lib/pop-confirm/pop-confirm.css +10 -10
  107. package/lib/pop-confirm/pop-confirm.less +14 -11
  108. package/lib/pop-confirm/pop-confirm.variable.css +12 -12
  109. package/lib/popover/popover.css +5 -5
  110. package/lib/popover/popover.less +5 -6
  111. package/lib/popover/popover.variable.css +7 -7
  112. package/lib/process/process.css +36 -33
  113. package/lib/process/process.less +8 -7
  114. package/lib/process/process.variable.css +38 -35
  115. package/lib/progress/progress.css +33 -33
  116. package/lib/progress/progress.less +6 -5
  117. package/lib/progress/progress.variable.css +35 -35
  118. package/lib/radio/radio.css +51 -51
  119. package/lib/radio/radio.less +13 -20
  120. package/lib/radio/radio.variable.css +53 -53
  121. package/lib/rate/rate.css +2 -2
  122. package/lib/rate/rate.less +1 -1
  123. package/lib/rate/rate.variable.css +4 -4
  124. package/lib/rate/star.css +7 -7
  125. package/lib/rate/star.less +1 -1
  126. package/lib/rate/star.variable.css +9 -9
  127. package/lib/resize-layout/resize-layout.css +42 -42
  128. package/lib/resize-layout/resize-layout.less +17 -10
  129. package/lib/resize-layout/resize-layout.variable.css +44 -44
  130. package/lib/search-select/search-select.css +15 -15
  131. package/lib/search-select/search-select.variable.css +17 -17
  132. package/lib/select/select.css +87 -87
  133. package/lib/select/select.less +27 -22
  134. package/lib/select/select.variable.css +89 -89
  135. package/lib/sideslider/sideslider.css +14 -14
  136. package/lib/sideslider/sideslider.less +9 -13
  137. package/lib/sideslider/sideslider.variable.css +16 -16
  138. package/lib/slider/slider.css +31 -31
  139. package/lib/slider/slider.less +8 -8
  140. package/lib/slider/slider.variable.css +33 -33
  141. package/lib/steps/steps.css +134 -134
  142. package/lib/steps/steps.less +44 -48
  143. package/lib/steps/steps.variable.css +136 -136
  144. package/lib/styles/mixins/animate.css +4 -4
  145. package/lib/styles/mixins/animate.less +3 -3
  146. package/lib/styles/mixins/animate.variable.css +6 -6
  147. package/lib/styles/mixins/mixins.css +15 -15
  148. package/lib/styles/mixins/mixins.variable.css +15 -15
  149. package/lib/styles/mixins/popper.css +11 -11
  150. package/lib/styles/mixins/popper.less +6 -6
  151. package/lib/styles/mixins/popper.variable.css +13 -13
  152. package/lib/styles/mixins/scroll.css +5 -5
  153. package/lib/styles/mixins/scroll.less +4 -4
  154. package/lib/styles/mixins/scroll.variable.css +7 -7
  155. package/lib/styles/reset.css +6 -6
  156. package/lib/styles/reset.less +4 -5
  157. package/lib/styles/reset.variable.css +8 -8
  158. package/lib/styles/themes/themes copy.less +167 -0
  159. package/lib/styles/themes/themes.less +3 -10
  160. package/lib/swiper/swiper.css +15 -15
  161. package/lib/swiper/swiper.less +8 -8
  162. package/lib/swiper/swiper.variable.css +17 -17
  163. package/lib/switcher/switcher.css +57 -57
  164. package/lib/switcher/switcher.less +14 -22
  165. package/lib/switcher/switcher.variable.css +59 -59
  166. package/lib/tab/tab.css +78 -78
  167. package/lib/tab/tab.less +40 -39
  168. package/lib/tab/tab.variable.css +80 -80
  169. package/lib/table/plugins/head-filter.css +13 -13
  170. package/lib/table/plugins/head-filter.less +3 -3
  171. package/lib/table/plugins/head-filter.variable.css +15 -15
  172. package/lib/table/plugins/head-sort.css +5 -5
  173. package/lib/table/plugins/head-sort.less +2 -2
  174. package/lib/table/plugins/head-sort.variable.css +7 -7
  175. package/lib/table/plugins/settings.css +26 -26
  176. package/lib/table/plugins/settings.less +1 -3
  177. package/lib/table/plugins/settings.variable.css +28 -28
  178. package/lib/table/table.css +380 -380
  179. package/lib/table/table.less +10 -14
  180. package/lib/table/table.variable.css +382 -382
  181. package/lib/tag/tag.css +51 -51
  182. package/lib/tag/tag.less +34 -34
  183. package/lib/tag/tag.variable.css +53 -53
  184. package/lib/tag-input/tag-input.css +38 -38
  185. package/lib/tag-input/tag-input.less +3 -3
  186. package/lib/tag-input/tag-input.variable.css +40 -40
  187. package/lib/time-picker/time-picker.css +40 -40
  188. package/lib/time-picker/time-picker.less +76 -44
  189. package/lib/time-picker/time-picker.variable.css +42 -42
  190. package/lib/timeline/timeline.css +69 -69
  191. package/lib/timeline/timeline.less +6 -12
  192. package/lib/timeline/timeline.variable.css +71 -71
  193. package/lib/transfer/transfer.css +89 -89
  194. package/lib/transfer/transfer.less +1 -1
  195. package/lib/transfer/transfer.variable.css +91 -91
  196. package/lib/tree/tree.css +49 -49
  197. package/lib/tree/tree.less +6 -7
  198. package/lib/tree/tree.variable.css +51 -51
  199. package/lib/upload/upload.css +98 -98
  200. package/lib/upload/upload.less +68 -69
  201. package/lib/upload/upload.variable.css +100 -100
  202. package/lib/virtual-render/virtual-render.css +9 -9
  203. package/lib/virtual-render/virtual-render.less +1 -1
  204. package/lib/virtual-render/virtual-render.variable.css +11 -11
  205. package/package.json +1 -1
package/lib/timeline/timeline.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;
@@ -130,7 +130,7 @@
130
130
  * {
131
131
  box-sizing: border-box;
132
132
  }
133
- .bk-timeline {
133
+ :where(.bk-timeline) {
134
134
  padding: 0;
135
135
  margin: 16px 0 0;
136
136
  font-style: normal;
@@ -139,7 +139,7 @@
139
139
  text-align: left;
140
140
  list-style: none;
141
141
  }
142
- .bk-timeline .bk-timeline-dot {
142
+ :where(.bk-timeline) .bk-timeline-dot {
143
143
  position: relative;
144
144
  padding-bottom: 24px;
145
145
  padding-left: 16px;
@@ -148,7 +148,7 @@
148
148
  font-size: 0;
149
149
  border-left: 1px solid #d8d8d8;
150
150
  }
151
- .bk-timeline .bk-timeline-dot::before {
151
+ :where(.bk-timeline) .bk-timeline-dot::before {
152
152
  position: absolute;
153
153
  top: calc(12px * -1);
154
154
  left: -6px;
@@ -161,12 +161,12 @@
161
161
  content: '';
162
162
  box-sizing: border-box;
163
163
  }
164
- .bk-timeline .bk-timeline-dot:last-child {
164
+ :where(.bk-timeline) .bk-timeline-dot:last-child {
165
165
  padding-bottom: 0;
166
166
  /* 保留border使用间距保持一致 */
167
167
  border-left: 1px solid transparent;
168
168
  }
169
- .bk-timeline .bk-timeline-dot .bk-timeline-title {
169
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-title {
170
170
  display: inline-block;
171
171
  padding-bottom: 10px;
172
172
  margin-top: -3px;
@@ -174,13 +174,13 @@
174
174
  color: #63656e;
175
175
  cursor: pointer;
176
176
  }
177
- .bk-timeline .bk-timeline-dot .bk-timeline-content {
177
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-content {
178
178
  max-width: 300px;
179
179
  font-size: 14px;
180
180
  color: #979ba5;
181
181
  word-break: break-all;
182
182
  }
183
- .bk-timeline .bk-timeline-dot .bk-timeline-icon {
183
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-icon {
184
184
  position: absolute;
185
185
  top: calc(16px * -1);
186
186
  left: -8px;
@@ -192,165 +192,165 @@
192
192
  justify-content: center;
193
193
  align-items: center;
194
194
  }
195
- .bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
195
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
196
196
  display: inline-block;
197
197
  }
198
- .bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
198
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
199
199
  font-size: 12px;
200
200
  }
201
- .bk-timeline .bk-timeline-dot .bk-timeline-section {
201
+ :where(.bk-timeline) .bk-timeline-dot .bk-timeline-section {
202
202
  position: relative;
203
203
  top: calc((11px + 2px) * -1);
204
204
  }
205
- .bk-timeline .bk-timeline-dot.bk-timeline-large {
205
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-large {
206
206
  margin-top: calc(15px + 2px);
207
207
  }
208
- .bk-timeline .bk-timeline-dot.bk-timeline-large::before {
208
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-large::before {
209
209
  top: calc((15px + 1px) * -1);
210
210
  left: -8px;
211
211
  width: 15px;
212
212
  height: 15px;
213
213
  }
214
- .bk-timeline .bk-timeline-dot.bk-timeline-large > .bk-timeline-section {
214
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-large > .bk-timeline-section {
215
215
  top: calc((15px + 1px) * -1);
216
216
  }
217
- .bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon {
217
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-item-custom-icon {
218
218
  margin-top: calc(15px + 2px);
219
219
  }
220
- .bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon::before {
220
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-item-custom-icon::before {
221
221
  display: none;
222
222
  }
223
- .bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section {
223
+ :where(.bk-timeline) .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section {
224
224
  top: calc((15px + 1px) * -1);
225
225
  }
226
- .bk-timeline .bk-timeline-dot:first-child {
226
+ :where(.bk-timeline) .bk-timeline-dot:first-child {
227
227
  margin-top: 0;
228
228
  }
229
- .bk-timeline .bk-timeline-custom::before {
229
+ :where(.bk-timeline) .bk-timeline-custom::before {
230
230
  /* stylelint-disable-next-line declaration-no-important */
231
231
  border: none !important;
232
232
  }
233
- .bk-timeline .bk-timeline-custom .bk-timeline-icon {
233
+ :where(.bk-timeline) .bk-timeline-custom .bk-timeline-icon {
234
234
  /* stylelint-disable-next-line declaration-no-important */
235
235
  border: none !important;
236
236
  }
237
- .bk-timeline .bk-timeline-primary {
237
+ :where(.bk-timeline) .bk-timeline-primary {
238
238
  border-left: 1px solid var(--primary-color);
239
239
  }
240
- .bk-timeline .bk-timeline-primary::before,
241
- .bk-timeline .bk-timeline-primary .bk-timeline-icon {
240
+ :where(.bk-timeline) .bk-timeline-primary::before,
241
+ :where(.bk-timeline) .bk-timeline-primary .bk-timeline-icon {
242
242
  color: var(--primary-color);
243
243
  border: 2px solid var(--primary-color);
244
244
  }
245
- .bk-timeline .bk-timeline-primary.bk-timeline-filled::before,
246
- .bk-timeline .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
245
+ :where(.bk-timeline) .bk-timeline-primary.bk-timeline-filled::before,
246
+ :where(.bk-timeline) .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
247
247
  background: var(--primary-color);
248
248
  }
249
- .bk-timeline .bk-timeline-warning {
249
+ :where(.bk-timeline) .bk-timeline-warning {
250
250
  border-left: 1px solid var(--warning-color);
251
251
  }
252
- .bk-timeline .bk-timeline-warning::before,
253
- .bk-timeline .bk-timeline-warning .bk-timeline-icon {
252
+ :where(.bk-timeline) .bk-timeline-warning::before,
253
+ :where(.bk-timeline) .bk-timeline-warning .bk-timeline-icon {
254
254
  color: var(--warning-color);
255
255
  border: 2px solid var(--warning-color);
256
256
  }
257
- .bk-timeline .bk-timeline-warning.bk-timeline-filled::before,
258
- .bk-timeline .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
257
+ :where(.bk-timeline) .bk-timeline-warning.bk-timeline-filled::before,
258
+ :where(.bk-timeline) .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
259
259
  background: var(--warning-color);
260
260
  }
261
- .bk-timeline .bk-timeline-success {
261
+ :where(.bk-timeline) .bk-timeline-success {
262
262
  border-left: 1px solid var(--success-color);
263
263
  }
264
- .bk-timeline .bk-timeline-success::before,
265
- .bk-timeline .bk-timeline-success .bk-timeline-icon {
264
+ :where(.bk-timeline) .bk-timeline-success::before,
265
+ :where(.bk-timeline) .bk-timeline-success .bk-timeline-icon {
266
266
  color: var(--success-color);
267
267
  border: 2px solid var(--success-color);
268
268
  }
269
- .bk-timeline .bk-timeline-success.bk-timeline-filled::before,
270
- .bk-timeline .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
269
+ :where(.bk-timeline) .bk-timeline-success.bk-timeline-filled::before,
270
+ :where(.bk-timeline) .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
271
271
  background: var(--success-color);
272
272
  }
273
- .bk-timeline .bk-timeline-danger {
273
+ :where(.bk-timeline) .bk-timeline-danger {
274
274
  border-left: 1px solid var(--danger-color);
275
275
  }
276
- .bk-timeline .bk-timeline-danger::before,
277
- .bk-timeline .bk-timeline-danger .bk-timeline-icon {
276
+ :where(.bk-timeline) .bk-timeline-danger::before,
277
+ :where(.bk-timeline) .bk-timeline-danger .bk-timeline-icon {
278
278
  color: var(--danger-color);
279
279
  border: 2px solid var(--danger-color);
280
280
  }
281
- .bk-timeline .bk-timeline-danger.bk-timeline-filled::before,
282
- .bk-timeline .bk-timeline-danger.bk-timeline-filled .bk-timeline-icon {
281
+ :where(.bk-timeline) .bk-timeline-danger.bk-timeline-filled::before,
282
+ :where(.bk-timeline) .bk-timeline-danger.bk-timeline-filled .bk-timeline-icon {
283
283
  background: var(--danger-color);
284
284
  }
285
- .bk-timeline .bk-timeline-blue::before,
286
- .bk-timeline .bk-timeline-blue .bk-timeline-icon {
285
+ :where(.bk-timeline) .bk-timeline-blue::before,
286
+ :where(.bk-timeline) .bk-timeline-blue .bk-timeline-icon {
287
287
  color: #3a84ff;
288
288
  border: 2px solid #3a84ff;
289
289
  }
290
- .bk-timeline .bk-timeline-blue.bk-timeline-filled::before,
291
- .bk-timeline .bk-timeline-blue.bk-timeline-filled .bk-timeline-icon {
290
+ :where(.bk-timeline) .bk-timeline-blue.bk-timeline-filled::before,
291
+ :where(.bk-timeline) .bk-timeline-blue.bk-timeline-filled .bk-timeline-icon {
292
292
  background: #3a84ff;
293
293
  }
294
- .bk-timeline .bk-timeline-red::before,
295
- .bk-timeline .bk-timeline-red .bk-timeline-icon {
294
+ :where(.bk-timeline) .bk-timeline-red::before,
295
+ :where(.bk-timeline) .bk-timeline-red .bk-timeline-icon {
296
296
  color: #ea3636;
297
297
  border: 2px solid #ea3636;
298
298
  }
299
- .bk-timeline .bk-timeline-red.bk-timeline-filled::before,
300
- .bk-timeline .bk-timeline-red.bk-timeline-filled .bk-timeline-icon {
299
+ :where(.bk-timeline) .bk-timeline-red.bk-timeline-filled::before,
300
+ :where(.bk-timeline) .bk-timeline-red.bk-timeline-filled .bk-timeline-icon {
301
301
  background: #ea3636;
302
302
  }
303
- .bk-timeline .bk-timeline-green::before,
304
- .bk-timeline .bk-timeline-green .bk-timeline-icon {
303
+ :where(.bk-timeline) .bk-timeline-green::before,
304
+ :where(.bk-timeline) .bk-timeline-green .bk-timeline-icon {
305
305
  color: #2dcb56;
306
306
  border: 2px solid #2dcb56;
307
307
  }
308
- .bk-timeline .bk-timeline-green.bk-timeline-filled::before,
309
- .bk-timeline .bk-timeline-green.bk-timeline-filled .bk-timeline-icon {
308
+ :where(.bk-timeline) .bk-timeline-green.bk-timeline-filled::before,
309
+ :where(.bk-timeline) .bk-timeline-green.bk-timeline-filled .bk-timeline-icon {
310
310
  background: #2dcb56;
311
311
  }
312
- .bk-timeline .bk-timeline-yellow::before,
313
- .bk-timeline .bk-timeline-yellow .bk-timeline-icon {
312
+ :where(.bk-timeline) .bk-timeline-yellow::before,
313
+ :where(.bk-timeline) .bk-timeline-yellow .bk-timeline-icon {
314
314
  color: #ff9c01;
315
315
  border: 2px solid #ff9c01;
316
316
  }
317
- .bk-timeline .bk-timeline-yellow.bk-timeline-filled::before,
318
- .bk-timeline .bk-timeline-yellow.bk-timeline-filled .bk-timeline-icon {
317
+ :where(.bk-timeline) .bk-timeline-yellow.bk-timeline-filled::before,
318
+ :where(.bk-timeline) .bk-timeline-yellow.bk-timeline-filled .bk-timeline-icon {
319
319
  background: #ff9c01;
320
320
  }
321
- .bk-timeline .bk-timeline-gray::before,
322
- .bk-timeline .bk-timeline-gray .bk-timeline-icon {
321
+ :where(.bk-timeline) .bk-timeline-gray::before,
322
+ :where(.bk-timeline) .bk-timeline-gray .bk-timeline-icon {
323
323
  color: #63656e;
324
324
  border: 2px solid #63656e;
325
325
  }
326
- .bk-timeline .bk-timeline-gray.bk-timeline-filled::before,
327
- .bk-timeline .bk-timeline-gray.bk-timeline-filled .bk-timeline-icon {
326
+ :where(.bk-timeline) .bk-timeline-gray.bk-timeline-filled::before,
327
+ :where(.bk-timeline) .bk-timeline-gray.bk-timeline-filled .bk-timeline-icon {
328
328
  background: #63656e;
329
329
  }
330
- .bk-timeline-dashed .bk-step .bk-step-title::after,
331
- .bk-timeline-dashed .bk-step .bk-step-indicator::after {
330
+ :where(.bk-timeline) .bk-timeline-dashed .bk-step .bk-step-title::after,
331
+ :where(.bk-timeline) .bk-timeline-dashed .bk-step .bk-step-indicator::after {
332
332
  background-image: linear-gradient(to right, var(--light-gray) 50%, transparent 0%);
333
333
  background-position: bottom;
334
334
  background-repeat: repeat-x;
335
335
  background-size: 6px 1px;
336
336
  }
337
- .bk-timeline-solid .bk-step .bk-step-title::after,
338
- .bk-timeline-solid .bk-step .bk-step-indicator::after {
337
+ :where(.bk-timeline) .bk-timeline-solid .bk-step .bk-step-title::after,
338
+ :where(.bk-timeline) .bk-timeline-solid .bk-step .bk-step-indicator::after {
339
339
  background-color: var(--light-gray);
340
340
  }
341
- .bk-timeline-vertical {
341
+ :where(.bk-timeline) .bk-timeline-vertical {
342
342
  height: 100%;
343
343
  flex-direction: column;
344
344
  }
345
- .bk-timeline-vertical .bk-step {
345
+ :where(.bk-timeline) .bk-timeline-vertical .bk-step {
346
346
  margin-right: 0;
347
347
  margin-bottom: 8px;
348
348
  }
349
- .bk-timeline-vertical .bk-step .bk-step-title::after,
350
- .bk-timeline-vertical .bk-step .bk-step-indicator::after {
349
+ :where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-title::after,
350
+ :where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-indicator::after {
351
351
  display: none;
352
352
  }
353
- .bk-timeline-vertical .bk-step::after {
353
+ :where(.bk-timeline) .bk-timeline-vertical .bk-step::after {
354
354
  position: absolute;
355
355
  top: 32px;
356
356
  left: 12px;
@@ -362,7 +362,7 @@
362
362
  background-size: 1px 6px;
363
363
  content: '';
364
364
  }
365
- .bk-timeline-vertical .bk-step .bk-step-title {
365
+ :where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-title {
366
366
  display: flex;
367
367
  height: 100%;
368
368
  margin-top: 0;
package/lib/transfer/transfer.css CHANGED
@@ -1,18 +1,18 @@
1
- .bk-transfer {
1
+ :where(.bk-transfer) {
2
2
  display: flex;
3
3
  justify-content: center;
4
4
  align-items: center;
5
5
  font-size: 14px;
6
6
  }
7
- .bk-transfer .transfer {
7
+ :where(.bk-transfer) .transfer {
8
8
  margin: 0 8px;
9
9
  font-size: 24px;
10
10
  color: #c4c6cc;
11
11
  }
12
- .bk-transfer .transfer-button-group {
12
+ :where(.bk-transfer) .transfer-button-group {
13
13
  margin: 0 8px;
14
14
  }
15
- .bk-transfer .transfer-button-group .transfer-button {
15
+ :where(.bk-transfer) .transfer-button-group .transfer-button {
16
16
  display: flex;
17
17
  width: 24px;
18
18
  height: 24px;
@@ -24,20 +24,20 @@
24
24
  align-items: center;
25
25
  justify-content: center;
26
26
  }
27
- .bk-transfer .transfer-button-group .transfer-button:first-child {
27
+ :where(.bk-transfer) .transfer-button-group .transfer-button:first-child {
28
28
  margin-bottom: 8px;
29
29
  }
30
- .bk-transfer .transfer-button-group .transfer-button.disabled {
30
+ :where(.bk-transfer) .transfer-button-group .transfer-button.disabled {
31
31
  color: #c4c6cc;
32
32
  cursor: not-allowed;
33
33
  background-color: #fafbfd;
34
34
  border-color: #dcdee5;
35
35
  }
36
- .bk-transfer .transfer-button-group .transfer-button span {
36
+ :where(.bk-transfer) .transfer-button-group .transfer-button span {
37
37
  font-size: 18px;
38
38
  }
39
- .bk-transfer .source-list,
40
- .bk-transfer .target-list {
39
+ :where(.bk-transfer) .source-list,
40
+ :where(.bk-transfer) .target-list {
41
41
  flex: 1;
42
42
  display: flex;
43
43
  flex-direction: column;
@@ -48,41 +48,41 @@
48
48
  border: 1px solid #dcdee5;
49
49
  border-radius: 2px;
50
50
  }
51
- .bk-transfer .source-list .slot-header,
52
- .bk-transfer .target-list .slot-header,
53
- .bk-transfer .source-list .header,
54
- .bk-transfer .target-list .header {
51
+ :where(.bk-transfer) .source-list .slot-header,
52
+ :where(.bk-transfer) .target-list .slot-header,
53
+ :where(.bk-transfer) .source-list .header,
54
+ :where(.bk-transfer) .target-list .header {
55
55
  height: 40px;
56
56
  padding: 0 16px;
57
57
  background-color: #fafbfd;
58
58
  border-bottom: 1px solid #dcdee5;
59
59
  }
60
- .bk-transfer .source-list .header,
61
- .bk-transfer .target-list .header {
60
+ :where(.bk-transfer) .source-list .header,
61
+ :where(.bk-transfer) .target-list .header {
62
62
  display: flex;
63
63
  align-items: center;
64
64
  justify-content: space-between;
65
65
  font-weight: 700;
66
66
  }
67
- .bk-transfer .source-list .header .select-all,
68
- .bk-transfer .target-list .header .select-all {
67
+ :where(.bk-transfer) .source-list .header .select-all,
68
+ :where(.bk-transfer) .target-list .header .select-all {
69
69
  font-size: 12px;
70
70
  font-weight: normal;
71
71
  color: #3a84ff;
72
72
  cursor: pointer;
73
73
  }
74
- .bk-transfer .source-list .header .select-all.disabled,
75
- .bk-transfer .target-list .header .select-all.disabled {
74
+ :where(.bk-transfer) .source-list .header .select-all.disabled,
75
+ :where(.bk-transfer) .target-list .header .select-all.disabled {
76
76
  color: #c4c6cc;
77
77
  cursor: not-allowed;
78
78
  }
79
- .bk-transfer .source-list .header .select-total-count,
80
- .bk-transfer .target-list .header .select-total-count {
79
+ :where(.bk-transfer) .source-list .header .select-total-count,
80
+ :where(.bk-transfer) .target-list .header .select-total-count {
81
81
  font-weight: normal;
82
82
  color: #979ba5;
83
83
  }
84
- .bk-transfer .source-list .transfer-search-input,
85
- .bk-transfer .target-list .transfer-search-input {
84
+ :where(.bk-transfer) .source-list .transfer-search-input,
85
+ :where(.bk-transfer) .target-list .transfer-search-input {
86
86
  width: calc(100% - 32px);
87
87
  height: 30px;
88
88
  margin: 8px 16px 0;
@@ -91,22 +91,22 @@
91
91
  border-radius: 0;
92
92
  outline: none;
93
93
  }
94
- .bk-transfer .source-list .transfer-search-input.is-focused,
95
- .bk-transfer .target-list .transfer-search-input.is-focused {
94
+ :where(.bk-transfer) .source-list .transfer-search-input.is-focused,
95
+ :where(.bk-transfer) .target-list .transfer-search-input.is-focused {
96
96
  box-shadow: none;
97
97
  }
98
- .bk-transfer .source-list .transfer-search-input .icon-search,
99
- .bk-transfer .target-list .transfer-search-input .icon-search {
98
+ :where(.bk-transfer) .source-list .transfer-search-input .icon-search,
99
+ :where(.bk-transfer) .target-list .transfer-search-input .icon-search {
100
100
  font-size: 18px;
101
101
  line-height: 28px;
102
102
  color: #c4c6cc;
103
103
  }
104
- .bk-transfer .source-list .transfer-search-input input,
105
- .bk-transfer .target-list .transfer-search-input input {
104
+ :where(.bk-transfer) .source-list .transfer-search-input input,
105
+ :where(.bk-transfer) .target-list .transfer-search-input input {
106
106
  padding-left: 4px;
107
107
  }
108
- .bk-transfer .source-list .empty,
109
- .bk-transfer .target-list .empty {
108
+ :where(.bk-transfer) .source-list .empty,
109
+ :where(.bk-transfer) .target-list .empty {
110
110
  flex: 1;
111
111
  display: flex;
112
112
  align-items: center;
@@ -115,23 +115,23 @@
115
115
  color: #c4c6cc;
116
116
  cursor: default;
117
117
  }
118
- .bk-transfer .source-list .content,
119
- .bk-transfer .target-list .content {
118
+ :where(.bk-transfer) .source-list .content,
119
+ :where(.bk-transfer) .target-list .content {
120
120
  flex: 1;
121
121
  margin: 4px 0;
122
122
  overflow-y: auto;
123
123
  }
124
- .bk-transfer .source-list .content.is-flex,
125
- .bk-transfer .target-list .content.is-flex {
124
+ :where(.bk-transfer) .source-list .content.is-flex,
125
+ :where(.bk-transfer) .target-list .content.is-flex {
126
126
  display: flex;
127
127
  flex-direction: column;
128
128
  }
129
- .bk-transfer .source-list .content li.custom-item,
130
- .bk-transfer .target-list .content li.custom-item,
131
- .bk-transfer .source-list .content li .item-content,
132
- .bk-transfer .target-list .content li .item-content,
133
- .bk-transfer .source-list .content .checkbox-item,
134
- .bk-transfer .target-list .content .checkbox-item {
129
+ :where(.bk-transfer) .source-list .content li.custom-item,
130
+ :where(.bk-transfer) .target-list .content li.custom-item,
131
+ :where(.bk-transfer) .source-list .content li .item-content,
132
+ :where(.bk-transfer) .target-list .content li .item-content,
133
+ :where(.bk-transfer) .source-list .content .checkbox-item,
134
+ :where(.bk-transfer) .target-list .content .checkbox-item {
135
135
  display: flex;
136
136
  height: 32px;
137
137
  padding: 0 16px;
@@ -139,80 +139,80 @@
139
139
  cursor: pointer;
140
140
  align-items: center;
141
141
  }
142
- .bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled),
143
- .bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled),
144
- .bk-transfer .source-list .content li .item-content:hover:not(.is-disabled),
145
- .bk-transfer .target-list .content li .item-content:hover:not(.is-disabled),
146
- .bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled),
147
- .bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) {
142
+ :where(.bk-transfer) .source-list .content li.custom-item:hover:not(.is-disabled),
143
+ :where(.bk-transfer) .target-list .content li.custom-item:hover:not(.is-disabled),
144
+ :where(.bk-transfer) .source-list .content li .item-content:hover:not(.is-disabled),
145
+ :where(.bk-transfer) .target-list .content li .item-content:hover:not(.is-disabled),
146
+ :where(.bk-transfer) .source-list .content .checkbox-item:hover:not(.is-disabled),
147
+ :where(.bk-transfer) .target-list .content .checkbox-item:hover:not(.is-disabled) {
148
148
  color: #3a84ff;
149
149
  background-color: #e1ecff;
150
150
  }
151
- .bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
152
- .bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
153
- .bk-transfer .source-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
154
- .bk-transfer .target-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
155
- .bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper,
156
- .bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper {
151
+ :where(.bk-transfer) .source-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
152
+ :where(.bk-transfer) .target-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
153
+ :where(.bk-transfer) .source-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
154
+ :where(.bk-transfer) .target-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
155
+ :where(.bk-transfer) .source-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper,
156
+ :where(.bk-transfer) .target-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper {
157
157
  visibility: visible;
158
158
  }
159
- .bk-transfer .source-list .content li.custom-item .content-text,
160
- .bk-transfer .target-list .content li.custom-item .content-text,
161
- .bk-transfer .source-list .content li .item-content .content-text,
162
- .bk-transfer .target-list .content li .item-content .content-text,
163
- .bk-transfer .source-list .content .checkbox-item .content-text,
164
- .bk-transfer .target-list .content .checkbox-item .content-text {
159
+ :where(.bk-transfer) .source-list .content li.custom-item .content-text,
160
+ :where(.bk-transfer) .target-list .content li.custom-item .content-text,
161
+ :where(.bk-transfer) .source-list .content li .item-content .content-text,
162
+ :where(.bk-transfer) .target-list .content li .item-content .content-text,
163
+ :where(.bk-transfer) .source-list .content .checkbox-item .content-text,
164
+ :where(.bk-transfer) .target-list .content .checkbox-item .content-text {
165
165
  flex: 1;
166
166
  overflow: hidden;
167
167
  text-overflow: ellipsis;
168
168
  white-space: nowrap;
169
169
  }
170
- .bk-transfer .source-list .content li.custom-item .icon-wrapper,
171
- .bk-transfer .target-list .content li.custom-item .icon-wrapper,
172
- .bk-transfer .source-list .content li .item-content .icon-wrapper,
173
- .bk-transfer .target-list .content li .item-content .icon-wrapper,
174
- .bk-transfer .source-list .content .checkbox-item .icon-wrapper,
175
- .bk-transfer .target-list .content .checkbox-item .icon-wrapper {
170
+ :where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper,
171
+ :where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper,
172
+ :where(.bk-transfer) .source-list .content li .item-content .icon-wrapper,
173
+ :where(.bk-transfer) .target-list .content li .item-content .icon-wrapper,
174
+ :where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper,
175
+ :where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper {
176
176
  visibility: hidden;
177
177
  }
178
- .bk-transfer .source-list .content li.custom-item .icon-wrapper .bk-icon,
179
- .bk-transfer .target-list .content li.custom-item .icon-wrapper .bk-icon,
180
- .bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
181
- .bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon,
182
- .bk-transfer .source-list .content .checkbox-item .icon-wrapper .bk-icon,
183
- .bk-transfer .target-list .content .checkbox-item .icon-wrapper .bk-icon {
178
+ :where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper .bk-icon,
179
+ :where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper .bk-icon,
180
+ :where(.bk-transfer) .source-list .content li .item-content .icon-wrapper .bk-icon,
181
+ :where(.bk-transfer) .target-list .content li .item-content .icon-wrapper .bk-icon,
182
+ :where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper .bk-icon,
183
+ :where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper .bk-icon {
184
184
  display: flex;
185
185
  font-size: 30px;
186
186
  }
187
- .bk-transfer .source-list .content li.custom-item .icon-wrapper .icon-delete,
188
- .bk-transfer .target-list .content li.custom-item .icon-wrapper .icon-delete,
189
- .bk-transfer .source-list .content li .item-content .icon-wrapper .icon-delete,
190
- .bk-transfer .target-list .content li .item-content .icon-wrapper .icon-delete,
191
- .bk-transfer .source-list .content .checkbox-item .icon-wrapper .icon-delete,
192
- .bk-transfer .target-list .content .checkbox-item .icon-wrapper .icon-delete {
187
+ :where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper .icon-delete,
188
+ :where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper .icon-delete,
189
+ :where(.bk-transfer) .source-list .content li .item-content .icon-wrapper .icon-delete,
190
+ :where(.bk-transfer) .target-list .content li .item-content .icon-wrapper .icon-delete,
191
+ :where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper .icon-delete,
192
+ :where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper .icon-delete {
193
193
  margin-right: 6px;
194
194
  font-size: 16px;
195
195
  }
196
- .bk-transfer .source-list .content li.custom-item.is-disabled,
197
- .bk-transfer .target-list .content li.custom-item.is-disabled,
198
- .bk-transfer .source-list .content li .item-content.is-disabled,
199
- .bk-transfer .target-list .content li .item-content.is-disabled,
200
- .bk-transfer .source-list .content .checkbox-item.is-disabled,
201
- .bk-transfer .target-list .content .checkbox-item.is-disabled {
196
+ :where(.bk-transfer) .source-list .content li.custom-item.is-disabled,
197
+ :where(.bk-transfer) .target-list .content li.custom-item.is-disabled,
198
+ :where(.bk-transfer) .source-list .content li .item-content.is-disabled,
199
+ :where(.bk-transfer) .target-list .content li .item-content.is-disabled,
200
+ :where(.bk-transfer) .source-list .content .checkbox-item.is-disabled,
201
+ :where(.bk-transfer) .target-list .content .checkbox-item.is-disabled {
202
202
  color: #c4c6cc;
203
203
  cursor: not-allowed;
204
204
  }
205
- .bk-transfer .source-list .content .checkbox-item .item-content,
206
- .bk-transfer .target-list .content .checkbox-item .item-content {
205
+ :where(.bk-transfer) .source-list .content .checkbox-item .item-content,
206
+ :where(.bk-transfer) .target-list .content .checkbox-item .item-content {
207
207
  display: flex;
208
208
  align-items: center;
209
209
  }
210
- .bk-transfer .source-list .content::-webkit-scrollbar,
211
- .bk-transfer .target-list .content::-webkit-scrollbar {
210
+ :where(.bk-transfer) .source-list .content::-webkit-scrollbar,
211
+ :where(.bk-transfer) .target-list .content::-webkit-scrollbar {
212
212
  width: 4px;
213
213
  }
214
- .bk-transfer .source-list .content::-webkit-scrollbar-thumb,
215
- .bk-transfer .target-list .content::-webkit-scrollbar-thumb {
214
+ :where(.bk-transfer) .source-list .content::-webkit-scrollbar-thumb,
215
+ :where(.bk-transfer) .target-list .content::-webkit-scrollbar-thumb {
216
216
  height: 5px;
217
217
  background-color: #dcdee5;
218
218
  border-radius: 2px;
package/lib/transfer/transfer.less CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @transfer-item-hover-background-color: #e1ecff;
4
4
 
5
- .@{bk-prefix}-transfer {
5
+ :where(.@{bk-prefix}-transfer) {
6
6
  display: flex;
7
7
  justify-content: center;
8
8
  align-items: center;