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
@@ -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,92 +127,92 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-tab {
130
+ :where(.bk-tab) {
131
131
  position: relative;
132
132
  display: flex;
133
133
  }
134
- .bk-tab--top {
134
+ :where(.bk-tab) .bk-tab--top {
135
135
  flex-direction: column;
136
136
  }
137
- .bk-tab--right {
137
+ :where(.bk-tab) .bk-tab--right {
138
138
  flex-direction: row-reverse;
139
139
  }
140
- .bk-tab-header {
140
+ :where(.bk-tab) .bk-tab-header {
141
141
  position: relative;
142
142
  display: flex;
143
143
  color: var(--default-color);
144
144
  }
145
- .bk-tab--left .bk-tab-header {
145
+ .bk-tab--left :where(.bk-tab) .bk-tab-header {
146
146
  border-right: 1px solid var(--disable-color);
147
147
  }
148
- .bk-tab--right .bk-tab-header {
148
+ .bk-tab--right :where(.bk-tab) .bk-tab-header {
149
149
  border-left: 1px solid var(--disable-color);
150
150
  }
151
- .bk-tab--vertical-tab .bk-tab-header {
151
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header {
152
152
  border: 0;
153
153
  }
154
- .bk-tab--left .bk-tab-header,
155
- .bk-tab--right .bk-tab-header {
154
+ .bk-tab--left :where(.bk-tab) .bk-tab-header,
155
+ .bk-tab--right :where(.bk-tab) .bk-tab-header {
156
156
  flex-direction: column;
157
157
  }
158
- .bk-tab--left .bk-tab-header > div,
159
- .bk-tab--right .bk-tab-header > div {
158
+ .bk-tab--left :where(.bk-tab) .bk-tab-header > div,
159
+ .bk-tab--right :where(.bk-tab) .bk-tab-header > div {
160
160
  flex-direction: column;
161
161
  }
162
- .bk-tab--card-tab .bk-tab-header,
163
- .bk-tab--vertical-tab .bk-tab-header {
164
- background: #F0F1F5;
162
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header,
163
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header {
164
+ background: #f0f1f5;
165
165
  }
166
- .bk-tab--card-tab .bk-tab-header {
166
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header {
167
167
  border-radius: 4px 4px 0;
168
168
  }
169
- .bk-tab--card .bk-tab-header,
170
- .bk-tab--vertical-card .bk-tab-header {
169
+ .bk-tab--card :where(.bk-tab) .bk-tab-header,
170
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header {
171
171
  border-bottom: 1px solid var(--disable-color);
172
172
  }
173
- .bk-tab--border-card .bk-tab-header {
173
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header {
174
174
  border: solid var(--disable-color);
175
175
  border-width: 1px 1px 1px 0;
176
176
  }
177
- .bk-tab--border-card .bk-tab-header {
178
- background: #FAFBFD;
177
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header {
178
+ background: #fafbfd;
179
179
  }
180
- .bk-tab--unborder-card .bk-tab-header {
180
+ .bk-tab--unborder-card :where(.bk-tab) .bk-tab-header {
181
181
  border-bottom: 1px solid var(--disable-color);
182
182
  }
183
- .bk-tab-header > div {
183
+ :where(.bk-tab) .bk-tab-header > div {
184
184
  display: flex;
185
185
  flex-wrap: nowrap;
186
186
  }
187
- .bk-tab--card .bk-tab-header > div,
188
- .bk-tab--vertical-card .bk-tab-header > div,
189
- .bk-tab--border-card .bk-tab-header > div {
187
+ .bk-tab--card :where(.bk-tab) .bk-tab-header > div,
188
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header > div,
189
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header > div {
190
190
  margin-bottom: -1px;
191
191
  }
192
- .bk-tab-header-nav {
192
+ :where(.bk-tab) .bk-tab-header-nav {
193
193
  position: relative;
194
194
  }
195
- .bk-tab--top .bk-tab-header-nav {
195
+ .bk-tab--top :where(.bk-tab) .bk-tab-header-nav {
196
196
  overflow-x: auto;
197
197
  overflow-y: visible;
198
198
  }
199
- .bk-tab--left .bk-tab-header-nav,
200
- .bk-tab--right .bk-tab-header-nav {
199
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-nav,
200
+ .bk-tab--right :where(.bk-tab) .bk-tab-header-nav {
201
201
  overflow-x: visible;
202
202
  overflow-y: auto;
203
203
  }
204
- .bk-tab--card .bk-tab-header-nav,
205
- .bk-tab--border-card .bk-tab-header-nav,
206
- .bk-tab--vertical-card .bk-tab-header-nav {
204
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-nav,
205
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header-nav,
206
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-nav {
207
207
  border-left: 1px solid var(--disable-color);
208
208
  }
209
- .bk-tab-header-nav::-webkit-scrollbar {
209
+ :where(.bk-tab) .bk-tab-header-nav::-webkit-scrollbar {
210
210
  display: none;
211
211
  width: 0;
212
212
  height: 0;
213
213
  }
214
- .bk-tab-header-next,
215
- .bk-tab-header-prev {
214
+ :where(.bk-tab) .bk-tab-header-next,
215
+ :where(.bk-tab) .bk-tab-header-prev {
216
216
  position: absolute;
217
217
  top: 1px;
218
218
  bottom: 1px;
@@ -220,51 +220,51 @@
220
220
  background: #fff;
221
221
  content: '';
222
222
  }
223
- .bk-tab-header-prev {
223
+ :where(.bk-tab) .bk-tab-header-prev {
224
224
  left: 1px;
225
225
  }
226
- .bk-tab-header-next {
226
+ :where(.bk-tab) .bk-tab-header-next {
227
227
  right: 1px;
228
228
  }
229
- .bk-tab-header-operation .bk-tab-header-item {
229
+ :where(.bk-tab) .bk-tab-header-operation .bk-tab-header-item {
230
230
  padding: 0 12px;
231
231
  }
232
- .bk-tab-header-setting {
232
+ :where(.bk-tab) .bk-tab-header-setting {
233
233
  justify-self: flex-end;
234
234
  margin-left: auto;
235
235
  white-space: nowrap;
236
236
  }
237
- .bk-tab-header-item {
237
+ :where(.bk-tab) .bk-tab-header-item {
238
238
  display: flex;
239
239
  white-space: nowrap;
240
240
  cursor: pointer;
241
241
  justify-content: center;
242
242
  align-items: center;
243
243
  }
244
- .bk-tab--top .bk-tab-header-item {
244
+ .bk-tab--top :where(.bk-tab) .bk-tab-header-item {
245
245
  padding: 0 20px;
246
246
  }
247
- .bk-tab--left .bk-tab-header-item,
248
- .bk-tab--right .bk-tab-header-item {
247
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-item,
248
+ .bk-tab--right :where(.bk-tab) .bk-tab-header-item {
249
249
  padding: 0 12px;
250
250
  }
251
- .bk-tab--left .bk-tab-header-item {
251
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-item {
252
252
  text-align: right;
253
253
  }
254
- .bk-tab--card .bk-tab-header-item,
255
- .bk-tab--vertical-card .bk-tab-header-item {
254
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-item,
255
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-item {
256
256
  border-top: 1px solid var(--disable-color);
257
257
  }
258
- .bk-tab--card .bk-tab-header-item,
259
- .bk-tab--border-card .bk-tab-header-item,
260
- .bk-tab--vertical-card .bk-tab-header-item {
258
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-item,
259
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header-item,
260
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-item {
261
261
  border-right: 1px solid var(--disable-color);
262
262
  }
263
- .bk-tab--card-tab .bk-tab-header-item {
263
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item {
264
264
  position: relative;
265
265
  }
266
- .bk-tab--card-tab .bk-tab-header-item:not(:first-of-type):before,
267
- .bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
266
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:not(:first-of-type):before,
267
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:last-of-type:after {
268
268
  position: absolute;
269
269
  top: 50%;
270
270
  left: 0;
@@ -275,30 +275,30 @@
275
275
  background: #c4c6cc;
276
276
  content: '';
277
277
  }
278
- .bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
278
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:last-of-type:after {
279
279
  right: 0;
280
280
  left: initial;
281
281
  }
282
- .bk-tab--card-grid .bk-tab-header-item {
282
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-header-item {
283
283
  height: 40px;
284
284
  margin-right: 8px;
285
285
  line-height: 40px;
286
286
  background: #eaebf0;
287
287
  border-radius: 4px 4px 0 0;
288
288
  }
289
- .bk-tab-header-operation .bk-tab-header-item {
289
+ .bk-tab-header-operation :where(.bk-tab) .bk-tab-header-item {
290
290
  padding-right: 12px;
291
291
  padding-left: 12px;
292
292
  }
293
- .bk-tab-header-item:hover {
293
+ :where(.bk-tab) .bk-tab-header-item:hover {
294
294
  color: var(--primary-color);
295
295
  }
296
- .bk-tab-header-item:hover .bk-tab-header--close {
296
+ :where(.bk-tab) .bk-tab-header-item:hover .bk-tab-header--close {
297
297
  display: block;
298
298
  margin-left: 5px;
299
299
  color: var(--danger-color);
300
300
  }
301
- .bk-tab-header--active {
301
+ :where(.bk-tab) .bk-tab-header--active {
302
302
  color: var(--primary-color);
303
303
  /* 激活边框,跟随,不再用固定样式
304
304
  //.@{bk-prefix}-tab--unborder-card & {
@@ -313,61 +313,61 @@
313
313
  }
314
314
  */
315
315
  }
316
- .bk-tab--card .bk-tab-header--active,
317
- .bk-tab--border-card .bk-tab-header--active,
318
- .bk-tab--vertical-card .bk-tab-header--active {
316
+ .bk-tab--card :where(.bk-tab) .bk-tab-header--active,
317
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header--active,
318
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header--active {
319
319
  background: var(--white-color);
320
320
  border-bottom-color: var(--white-color);
321
321
  }
322
- .bk-tab--card-tab .bk-tab-header--active,
323
- .bk-tab--vertical-tab .bk-tab-header--active {
322
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active,
323
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header--active {
324
324
  background: #fff;
325
325
  }
326
- .bk-tab--card-tab .bk-tab-header--active {
326
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active {
327
327
  border-radius: 4px 4px 0 0;
328
328
  }
329
- .bk-tab--card-tab .bk-tab-header--active:after,
330
- .bk-tab--card-tab .bk-tab-header--active:before,
331
- .bk-tab--card-tab .bk-tab-header--active + .bk-tab-header-item:before {
329
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active:after,
330
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active:before,
331
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active + .bk-tab-header-item:before {
332
332
  /* stylelint-disable-next-line declaration-no-important */
333
333
  display: none !important;
334
334
  }
335
- .bk-tab--card-grid .bk-tab-header--active {
335
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-header--active {
336
336
  background: #fff;
337
337
  }
338
- .bk-tab-header--close {
338
+ :where(.bk-tab) .bk-tab-header--close {
339
339
  display: none;
340
340
  font-size: 16px;
341
341
  color: var(--light-gray);
342
342
  }
343
- .bk-tab-header--disabled {
343
+ :where(.bk-tab) .bk-tab-header--disabled {
344
344
  cursor: not-allowed;
345
345
  }
346
- .bk-tab-header--disabled,
347
- .bk-tab-header--disabled:hover {
346
+ :where(.bk-tab) .bk-tab-header--disabled,
347
+ :where(.bk-tab) .bk-tab-header--disabled:hover {
348
348
  color: #aaa;
349
349
  }
350
- .bk-tab-header-active-bar {
350
+ :where(.bk-tab) .bk-tab-header-active-bar {
351
351
  position: absolute;
352
352
  width: 0;
353
353
  height: 0;
354
354
  background: var(--primary-color);
355
355
  transition: all ease-in 300ms;
356
356
  }
357
- .bk-tab-content {
357
+ :where(.bk-tab) .bk-tab-content {
358
358
  flex: 1;
359
359
  padding: 10px;
360
360
  }
361
- .bk-tab--border-card .bk-tab-content,
362
- .bk-tab--vertical-card .bk-tab-content {
361
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-content,
362
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-content {
363
363
  border: solid var(--disable-color);
364
364
  border-width: 0 1px 1px;
365
365
  }
366
- .bk-tab--card-grid .bk-tab-content {
366
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-content {
367
367
  background: #fff;
368
368
  border-radius: 0 4px 4px 4px;
369
369
  box-shadow: 0 2px 4px 0 #1919290d;
370
370
  }
371
- .bk-tab-panel {
371
+ :where(.bk-tab) .bk-tab-panel {
372
372
  height: 100%;
373
373
  }
@@ -1,4 +1,4 @@
1
- .bk-table-head-action {
1
+ :where(.bk-table-head-action) {
2
2
  display: flex;
3
3
  height: var(--row-height);
4
4
  padding: 0 10px 0 6px;
@@ -7,31 +7,31 @@
7
7
  cursor: pointer;
8
8
  align-items: center;
9
9
  }
10
- .bk-table-head-action:last-of-type {
10
+ :where(.bk-table-head-action):last-of-type {
11
11
  margin-right: -10px;
12
12
  }
13
- .bk-table-head-action.active {
13
+ :where(.bk-table-head-action).active {
14
14
  color: #3a84ff;
15
15
  }
16
- .bk-table-head-action.opened {
16
+ :where(.bk-table-head-action).opened {
17
17
  color: inherit;
18
18
  }
19
- .bk-popover.bk-pop2-content.bk-table-head-filter {
19
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter {
20
20
  padding: 5px 0 0 0;
21
21
  background-color: #fff;
22
22
  border-radius: 2px;
23
23
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
24
24
  }
25
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list {
25
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list {
26
26
  display: inline-block;
27
27
  max-width: 300px;
28
28
  min-width: 200px;
29
29
  }
30
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items {
30
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items {
31
31
  max-height: 200px;
32
32
  min-height: 40px;
33
33
  }
34
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
34
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
35
35
  width: 100%;
36
36
  height: 32px;
37
37
  padding: 0 10px;
@@ -40,19 +40,19 @@
40
40
  color: #63656e;
41
41
  text-align: left;
42
42
  }
43
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
43
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
44
44
  background: #f0f1f5;
45
45
  }
46
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
46
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
47
47
  background: #f0f1f5;
48
48
  }
49
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
49
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
50
50
  white-space: nowrap;
51
51
  }
52
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
52
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
53
53
  margin-left: 0;
54
54
  }
55
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
55
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-footer {
56
56
  display: flex;
57
57
  padding: 12px;
58
58
  border-top: solid 1px #dcdee5;
@@ -1,5 +1,5 @@
1
1
  @import '../../styles/themes/themes.less';
2
- .@{bk-prefix}-table-head-action {
2
+ :where(.@{bk-prefix}-table-head-action) {
3
3
  display: flex;
4
4
  height: var(--row-height);
5
5
  padding: 0 10px 0 6px;
@@ -21,13 +21,13 @@
21
21
  }
22
22
  }
23
23
 
24
- .@{bk-prefix}-popover {
24
+ :where(.@{bk-prefix}-popover) {
25
25
  &.@{bk-prefix}-pop2-content {
26
26
  &.@{bk-prefix}-table-head-filter {
27
27
  padding: 5px 0 0 0;
28
28
  background-color: #fff;
29
29
  border-radius: 2px;
30
- box-shadow: 0 3px 6px 0 rgba(0,0,0,.10);
30
+ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
31
31
 
32
32
  .content-list {
33
33
  display: inline-block;
@@ -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-table-head-action {
130
+ :where(.bk-table-head-action) {
131
131
  display: flex;
132
132
  height: var(--row-height);
133
133
  padding: 0 10px 0 6px;
@@ -136,31 +136,31 @@
136
136
  cursor: pointer;
137
137
  align-items: center;
138
138
  }
139
- .bk-table-head-action:last-of-type {
139
+ :where(.bk-table-head-action):last-of-type {
140
140
  margin-right: -10px;
141
141
  }
142
- .bk-table-head-action.active {
142
+ :where(.bk-table-head-action).active {
143
143
  color: #3a84ff;
144
144
  }
145
- .bk-table-head-action.opened {
145
+ :where(.bk-table-head-action).opened {
146
146
  color: inherit;
147
147
  }
148
- .bk-popover.bk-pop2-content.bk-table-head-filter {
148
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter {
149
149
  padding: 5px 0 0 0;
150
150
  background-color: #fff;
151
151
  border-radius: 2px;
152
152
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
153
153
  }
154
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list {
154
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list {
155
155
  display: inline-block;
156
156
  max-width: 300px;
157
157
  min-width: 200px;
158
158
  }
159
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items {
159
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items {
160
160
  max-height: 200px;
161
161
  min-height: 40px;
162
162
  }
163
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
163
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
164
164
  width: 100%;
165
165
  height: 32px;
166
166
  padding: 0 10px;
@@ -169,19 +169,19 @@
169
169
  color: #63656e;
170
170
  text-align: left;
171
171
  }
172
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
172
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
173
173
  background: #f0f1f5;
174
174
  }
175
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
175
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
176
176
  background: #f0f1f5;
177
177
  }
178
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
178
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
179
179
  white-space: nowrap;
180
180
  }
181
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
181
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
182
182
  margin-left: 0;
183
183
  }
184
- .bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
184
+ :where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-footer {
185
185
  display: flex;
186
186
  padding: 12px;
187
187
  border-top: solid 1px #dcdee5;
@@ -1,4 +1,4 @@
1
- .bk-head-cell-sort {
1
+ :where(.bk-head-cell-sort) {
2
2
  display: flex;
3
3
  height: 100%;
4
4
  padding: 0 4px;
@@ -9,18 +9,18 @@
9
9
  justify-content: center;
10
10
  align-items: center;
11
11
  }
12
- .bk-head-cell-sort .sort-action {
12
+ :where(.bk-head-cell-sort) .sort-action {
13
13
  display: flex;
14
14
  height: 50%;
15
15
  color: #c0c4cc;
16
16
  cursor: pointer;
17
17
  }
18
- .bk-head-cell-sort .sort-action.active {
18
+ :where(.bk-head-cell-sort) .sort-action.active {
19
19
  color: #3a84ff;
20
20
  }
21
- .bk-head-cell-sort .sort-action.sort-asc {
21
+ :where(.bk-head-cell-sort) .sort-action.sort-asc {
22
22
  align-items: flex-end;
23
23
  }
24
- .bk-head-cell-sort .sort-action.sort-desc {
24
+ :where(.bk-head-cell-sort) .sort-action.sort-desc {
25
25
  align-items: flex-start;
26
26
  }
@@ -1,6 +1,6 @@
1
1
  @import '../../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-head-cell-sort {
3
+ :where(.@{bk-prefix}-head-cell-sort) {
4
4
  display: flex;
5
5
  height: 100%;
6
6
  padding: 0 4px;
@@ -29,4 +29,4 @@
29
29
  align-items: flex-start;
30
30
  }
31
31
  }
32
- }
32
+ }
@@ -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-head-cell-sort {
130
+ :where(.bk-head-cell-sort) {
131
131
  display: flex;
132
132
  height: 100%;
133
133
  padding: 0 4px;
@@ -138,18 +138,18 @@
138
138
  justify-content: center;
139
139
  align-items: center;
140
140
  }
141
- .bk-head-cell-sort .sort-action {
141
+ :where(.bk-head-cell-sort) .sort-action {
142
142
  display: flex;
143
143
  height: 50%;
144
144
  color: #c0c4cc;
145
145
  cursor: pointer;
146
146
  }
147
- .bk-head-cell-sort .sort-action.active {
147
+ :where(.bk-head-cell-sort) .sort-action.active {
148
148
  color: #3a84ff;
149
149
  }
150
- .bk-head-cell-sort .sort-action.sort-asc {
150
+ :where(.bk-head-cell-sort) .sort-action.sort-asc {
151
151
  align-items: flex-end;
152
152
  }
153
- .bk-head-cell-sort .sort-action.sort-desc {
153
+ :where(.bk-head-cell-sort) .sort-action.sort-desc {
154
154
  align-items: flex-start;
155
155
  }