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/badge/badge.less CHANGED
@@ -12,7 +12,7 @@
12
12
  border-color: @white-color;
13
13
  }
14
14
 
15
- .@{bk-prefix}-badge-main {
15
+ :where(.@{bk-prefix}-badge-main) {
16
16
  position: relative;
17
17
  display: inline-block;
18
18
  .@{bk-prefix}-badge {
@@ -126,14 +126,14 @@
126
126
  border: 1px solid @white-color;
127
127
  }
128
128
  &.@{bk-prefix}-badge-icon {
129
- margin: 0;
129
+ display: flex;
130
+ width: 16px;
131
+ height: 16px;
130
132
  padding: 0;
133
+ margin: 0;
131
134
  font-size: 16px;
132
- display: flex;
133
135
  align-items: center;
134
136
  justify-content: center;
135
- height: 16px;
136
- width: 16px;
137
137
  }
138
138
  }
139
139
  }
package/lib/badge/badge.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,11 +127,11 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-badge-main {
130
+ :where(.bk-badge-main) {
131
131
  position: relative;
132
132
  display: inline-block;
133
133
  }
134
- .bk-badge-main .bk-badge {
134
+ :where(.bk-badge-main) .bk-badge {
135
135
  position: relative;
136
136
  display: inline-block;
137
137
  height: 18px;
@@ -142,112 +142,112 @@
142
142
  background-color: var(--white-color);
143
143
  border-radius: 18px;
144
144
  }
145
- .bk-badge-main .bk-badge.pinned {
145
+ :where(.bk-badge-main) .bk-badge.pinned {
146
146
  position: absolute;
147
147
  }
148
- .bk-badge-main .bk-badge.pinned.top-right {
148
+ :where(.bk-badge-main) .bk-badge.pinned.top-right {
149
149
  top: 0;
150
150
  right: 0;
151
151
  transform: translate(50%, -50%) scale(1, 1);
152
152
  }
153
- .bk-badge-main .bk-badge.pinned.top-right.fade-center-enter,
154
- .bk-badge-main .bk-badge.pinned.top-right.fade-center-leave-active {
153
+ :where(.bk-badge-main) .bk-badge.pinned.top-right.fade-center-enter,
154
+ :where(.bk-badge-main) .bk-badge.pinned.top-right.fade-center-leave-active {
155
155
  opacity: 0;
156
156
  transform: translate(50%, -50%) scale(0, 0);
157
157
  }
158
- .bk-badge-main .bk-badge.pinned.right {
158
+ :where(.bk-badge-main) .bk-badge.pinned.right {
159
159
  top: 4px;
160
160
  right: 4px;
161
161
  }
162
- .bk-badge-main .bk-badge.pinned.right.fade-center-enter,
163
- .bk-badge-main .bk-badge.pinned.right.fade-center-leave-active {
162
+ :where(.bk-badge-main) .bk-badge.pinned.right.fade-center-enter,
163
+ :where(.bk-badge-main) .bk-badge.pinned.right.fade-center-leave-active {
164
164
  opacity: 0;
165
165
  transform: translate(50%, -50%) scale(0, 0);
166
166
  }
167
- .bk-badge-main .bk-badge.pinned.bottom-right {
167
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right {
168
168
  right: 0;
169
169
  bottom: 0;
170
170
  transform: translate(50%, 50%) scale(1, 1);
171
171
  }
172
- .bk-badge-main .bk-badge.pinned.bottom-right.fade-center-enter,
173
- .bk-badge-main .bk-badge.pinned.bottom-right.fade-center-leave-active {
172
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right.fade-center-enter,
173
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right.fade-center-leave-active {
174
174
  opacity: 0;
175
175
  transform: translate(50%, 50%) scale(0, 0);
176
176
  }
177
- .bk-badge-main .bk-badge.pinned.top-left {
177
+ :where(.bk-badge-main) .bk-badge.pinned.top-left {
178
178
  top: 0;
179
179
  left: 0;
180
180
  transform: translate(-50%, -50%) scale(1, 1);
181
181
  }
182
- .bk-badge-main .bk-badge.pinned.top-left.fade-center-enter,
183
- .bk-badge-main .bk-badge.pinned.top-left.fade-center-leave-active {
182
+ :where(.bk-badge-main) .bk-badge.pinned.top-left.fade-center-enter,
183
+ :where(.bk-badge-main) .bk-badge.pinned.top-left.fade-center-leave-active {
184
184
  opacity: 0;
185
185
  transform: translate(-50%, -50%) scale(0, 0);
186
186
  }
187
- .bk-badge-main .bk-badge.pinned.bottom-left {
187
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left {
188
188
  bottom: 0;
189
189
  left: 0;
190
190
  transform: translate(-50%, 50%) scale(1, 1);
191
191
  }
192
- .bk-badge-main .bk-badge.pinned.bottom-left.fade-center-enter,
193
- .bk-badge-main .bk-badge.pinned.bottom-left.fade-center-leave-active {
192
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left.fade-center-enter,
193
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left.fade-center-leave-active {
194
194
  opacity: 0;
195
195
  transform: translate(-50%, 50%) scale(0, 0);
196
196
  }
197
- .bk-badge-main .bk-badge.bk-danger {
197
+ :where(.bk-badge-main) .bk-badge.bk-danger {
198
198
  color: var(--white-color);
199
199
  background-color: var(--danger-color);
200
200
  border: 2px solid var(--white-color);
201
201
  }
202
- .bk-badge-main .bk-badge.bk-danger.is-icon {
202
+ :where(.bk-badge-main) .bk-badge.bk-danger.is-icon {
203
203
  color: var(--danger-color);
204
204
  background-color: var(--white-color);
205
205
  border-color: var(--white-color);
206
206
  }
207
- .bk-badge-main .bk-badge.bk-warning {
207
+ :where(.bk-badge-main) .bk-badge.bk-warning {
208
208
  color: var(--white-color);
209
209
  background-color: var(--warning-color);
210
210
  border: 2px solid var(--white-color);
211
211
  }
212
- .bk-badge-main .bk-badge.bk-warning.is-icon {
212
+ :where(.bk-badge-main) .bk-badge.bk-warning.is-icon {
213
213
  color: var(--warning-color);
214
214
  background-color: var(--white-color);
215
215
  border-color: var(--white-color);
216
216
  }
217
- .bk-badge-main .bk-badge.bk-success {
217
+ :where(.bk-badge-main) .bk-badge.bk-success {
218
218
  color: var(--white-color);
219
219
  background-color: var(--success-color);
220
220
  border: 2px solid var(--white-color);
221
221
  }
222
- .bk-badge-main .bk-badge.bk-success.is-icon {
222
+ :where(.bk-badge-main) .bk-badge.bk-success.is-icon {
223
223
  color: var(--success-color);
224
224
  background-color: var(--white-color);
225
225
  border-color: var(--white-color);
226
226
  }
227
- .bk-badge-main .bk-badge.bk-primary {
227
+ :where(.bk-badge-main) .bk-badge.bk-primary {
228
228
  color: var(--white-color);
229
229
  background-color: var(--primary-color);
230
230
  border: 2px solid var(--white-color);
231
231
  }
232
- .bk-badge-main .bk-badge.bk-primary.is-icon {
232
+ :where(.bk-badge-main) .bk-badge.bk-primary.is-icon {
233
233
  color: var(--primary-color);
234
234
  background-color: var(--white-color);
235
235
  border-color: var(--white-color);
236
236
  }
237
- .bk-badge-main .bk-badge.dot {
237
+ :where(.bk-badge-main) .bk-badge.dot {
238
238
  width: 8px;
239
239
  height: 8px;
240
240
  min-width: 8px;
241
241
  padding: 0;
242
242
  border: 1px solid var(--white-color);
243
243
  }
244
- .bk-badge-main .bk-badge.bk-badge-icon {
245
- margin: 0;
244
+ :where(.bk-badge-main) .bk-badge.bk-badge-icon {
245
+ display: flex;
246
+ width: 16px;
247
+ height: 16px;
246
248
  padding: 0;
249
+ margin: 0;
247
250
  font-size: 16px;
248
- display: flex;
249
251
  align-items: center;
250
252
  justify-content: center;
251
- height: 16px;
252
- width: 16px;
253
253
  }
package/lib/breadcrumb/breadcrumb.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,85 +35,85 @@
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-breadcrumb {
73
+ :where(.bk-breadcrumb) {
74
74
  display: flex;
75
75
  font-size: 14px;
76
76
  color: #979ba5;
77
77
  align-items: center;
78
78
  }
79
- .bk-breadcrumb::after {
79
+ :where(.bk-breadcrumb)::after {
80
80
  clear: both;
81
81
  }
82
- .bk-breadcrumb-separator {
82
+ :where(.bk-breadcrumb) .bk-breadcrumb-separator {
83
83
  margin: 0 9px;
84
84
  font-weight: bold;
85
85
  }
86
- .bk-breadcrumb-separator[class*=icon] {
86
+ :where(.bk-breadcrumb) .bk-breadcrumb-separator[class*='icon'] {
87
87
  margin: 0 6px;
88
88
  font-weight: normal;
89
89
  }
90
- .bk-breadcrumb-goback {
90
+ :where(.bk-breadcrumb) .bk-breadcrumb-goback {
91
91
  margin-right: 12px;
92
92
  color: #0082ff;
93
93
  cursor: pointer;
94
94
  }
95
- .bk-breadcrumb-goback svg {
95
+ :where(.bk-breadcrumb) .bk-breadcrumb-goback svg {
96
96
  font-size: 26px;
97
97
  }
98
- .bk-breadcrumb-item-inner.is-link,
99
- .bk-breadcrumb-item-inner a {
98
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner.is-link,
99
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner a {
100
100
  color: #63656e;
101
101
  text-decoration: none;
102
102
  }
103
- .bk-breadcrumb-item-inner.is-link:hover,
104
- .bk-breadcrumb-item-inner a:hover {
103
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner.is-link:hover,
104
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner a:hover {
105
105
  color: #0082ff;
106
106
  cursor: pointer;
107
107
  }
108
- .bk-breadcrumb-item:last-child {
108
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child {
109
109
  color: #979ba5;
110
110
  }
111
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
112
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
113
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner:hover,
114
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner a:hover {
111
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
112
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
113
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner:hover,
114
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner a:hover {
115
115
  cursor: text;
116
116
  }
117
- .bk-breadcrumb-item:last-child .bk-breadcrumb-separator {
117
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .bk-breadcrumb-separator {
118
118
  display: none;
119
119
  }
package/lib/breadcrumb/breadcrumb.less CHANGED
@@ -1,27 +1,27 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import '../styles/mixins/mixins.less';
3
3
 
4
- .@{bk-prefix}-breadcrumb {
4
+ :where(.@{bk-prefix}-breadcrumb) {
5
5
  display: flex;
6
6
  font-size: 14px;
7
- color: @breadcrumb-black-color ;
7
+ color: @breadcrumb-black-color;
8
8
  align-items: center;
9
9
 
10
10
  &::after {
11
- clear: both
11
+ clear: both;
12
12
  }
13
13
 
14
- &-separator {
14
+ .@{bk-prefix}-breadcrumb-separator {
15
15
  margin: 0 9px;
16
16
  font-weight: bold;
17
17
 
18
- &[class*=icon] {
18
+ &[class*='icon'] {
19
19
  margin: 0 6px;
20
20
  font-weight: normal;
21
21
  }
22
22
  }
23
23
 
24
- &-goback {
24
+ .@{bk-prefix}-breadcrumb-goback {
25
25
  margin-right: 12px;
26
26
  color: @breadcrumb-primary-hover-color;
27
27
  cursor: pointer;
@@ -31,11 +31,11 @@
31
31
  }
32
32
  }
33
33
 
34
- &-item {
34
+ .@{bk-prefix}-breadcrumb-item {
35
35
  &-inner {
36
36
  &.is-link,
37
37
  & a {
38
- color: @breadcrumb-fn-main-color ;
38
+ color: @breadcrumb-fn-main-color;
39
39
  text-decoration: none;
40
40
 
41
41
  &:hover {
package/lib/breadcrumb/breadcrumb.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,85 +164,85 @@
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-breadcrumb {
202
+ :where(.bk-breadcrumb) {
203
203
  display: flex;
204
204
  font-size: 14px;
205
205
  color: #979ba5;
206
206
  align-items: center;
207
207
  }
208
- .bk-breadcrumb::after {
208
+ :where(.bk-breadcrumb)::after {
209
209
  clear: both;
210
210
  }
211
- .bk-breadcrumb-separator {
211
+ :where(.bk-breadcrumb) .bk-breadcrumb-separator {
212
212
  margin: 0 9px;
213
213
  font-weight: bold;
214
214
  }
215
- .bk-breadcrumb-separator[class*=icon] {
215
+ :where(.bk-breadcrumb) .bk-breadcrumb-separator[class*='icon'] {
216
216
  margin: 0 6px;
217
217
  font-weight: normal;
218
218
  }
219
- .bk-breadcrumb-goback {
219
+ :where(.bk-breadcrumb) .bk-breadcrumb-goback {
220
220
  margin-right: 12px;
221
221
  color: #0082ff;
222
222
  cursor: pointer;
223
223
  }
224
- .bk-breadcrumb-goback svg {
224
+ :where(.bk-breadcrumb) .bk-breadcrumb-goback svg {
225
225
  font-size: 26px;
226
226
  }
227
- .bk-breadcrumb-item-inner.is-link,
228
- .bk-breadcrumb-item-inner a {
227
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner.is-link,
228
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner a {
229
229
  color: #63656e;
230
230
  text-decoration: none;
231
231
  }
232
- .bk-breadcrumb-item-inner.is-link:hover,
233
- .bk-breadcrumb-item-inner a:hover {
232
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner.is-link:hover,
233
+ :where(.bk-breadcrumb) .bk-breadcrumb-item-inner a:hover {
234
234
  color: #0082ff;
235
235
  cursor: pointer;
236
236
  }
237
- .bk-breadcrumb-item:last-child {
237
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child {
238
238
  color: #979ba5;
239
239
  }
240
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
241
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
242
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner:hover,
243
- .bk-breadcrumb-item:last-child .el-breadcrumb__inner a:hover {
240
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
241
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
242
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner:hover,
243
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .el-breadcrumb__inner a:hover {
244
244
  cursor: text;
245
245
  }
246
- .bk-breadcrumb-item:last-child .bk-breadcrumb-separator {
246
+ :where(.bk-breadcrumb) .bk-breadcrumb-item:last-child .bk-breadcrumb-separator {
247
247
  display: none;
248
248
  }