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/sideslider/sideslider.variable.css CHANGED
@@ -12,13 +12,13 @@
12
12
  --whitesmoke-color: #fafbfd;
13
13
  --disable-color: #dcdee5;
14
14
  --disable-bg-color: #f9fafd;
15
- --border-color: #dcdee5;
16
15
  --font-size-base: 12px;
17
16
  --font-size-medium: 14px;
18
17
  --font-size-large: 16px;
19
18
  --line-height-base: 16px;
20
19
  --line-height-medium: 16px;
21
20
  --line-height-large: 18px;
21
+ --border-color: #dcdee5;
22
22
  --component-size-small: 26px;
23
23
  --component-size-base: 32px;
24
24
  --component-size-large: 40px;
@@ -111,7 +111,7 @@
111
111
  --table-border-color: #dcdee5;
112
112
  --table-head-bg-color: #fafbfd;
113
113
  --table-head-font-color: #313238;
114
- --table-body-font-color: #63656E;
114
+ --table-body-font-color: #63656e;
115
115
  --table-row-hover-bg-color: #f5f7fa;
116
116
  --table-row-active-bg-color: #f0f1f5;
117
117
  --cascader-panel-border-color: #dcdee5;
@@ -127,7 +127,7 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-sideslider {
130
+ :where(.bk-sideslider) {
131
131
  position: fixed;
132
132
  top: 0;
133
133
  right: 0;
@@ -138,7 +138,7 @@
138
138
  /* slide过渡动画 */
139
139
  .slide-enter-active,
140
140
  .slide-leave-active,
141
- .bk-modal-body {
141
+ :where(.bk-modal-body) {
142
142
  transform: translateX(0);
143
143
  transition: transform 0.25s;
144
144
  }
@@ -166,24 +166,24 @@
166
166
  opacity: 1;
167
167
  }
168
168
  }
169
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
169
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper {
170
170
  position: absolute;
171
171
  top: 0;
172
172
  bottom: 0;
173
173
  left: auto;
174
174
  transform: initial;
175
175
  }
176
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
177
- overflow: auto;
176
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
178
177
  height: 100%;
178
+ overflow: auto;
179
179
  }
180
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
180
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
181
181
  width: 100%;
182
182
  height: 52px;
183
183
  background: #fff;
184
184
  border-bottom: 1px solid #dcdee5;
185
185
  }
186
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
186
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
187
187
  position: absolute;
188
188
  top: 0;
189
189
  width: 30px;
@@ -195,10 +195,10 @@
195
195
  cursor: pointer;
196
196
  background-color: var(--primary-color);
197
197
  }
198
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
198
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
199
199
  left: 0;
200
200
  }
201
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
201
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
202
202
  top: 50%;
203
203
  left: 50%;
204
204
  display: inline-block;
@@ -209,10 +209,10 @@
209
209
  content: '';
210
210
  transform: translate(-50%, -50%) rotate(45deg);
211
211
  }
212
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
212
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
213
213
  right: 0;
214
214
  }
215
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
215
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
216
216
  top: 50%;
217
217
  left: 50%;
218
218
  display: inline-block;
@@ -223,7 +223,7 @@
223
223
  content: '';
224
224
  transform: translate(50%, -50%) rotate(-45deg);
225
225
  }
226
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
226
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
227
227
  display: flex;
228
228
  height: 52px;
229
229
  padding-left: 30px;
@@ -231,11 +231,11 @@
231
231
  color: #313238;
232
232
  align-items: center;
233
233
  }
234
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
234
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
235
235
  width: 100%;
236
236
  padding: 0 0 0 46px;
237
237
  }
238
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
238
+ :where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
239
239
  display: flex;
240
240
  width: 100%;
241
241
  height: 54px;
package/lib/slider/slider.css CHANGED
@@ -1,9 +1,9 @@
1
- .bk-slider {
1
+ :where(.bk-slider) {
2
2
  display: flex;
3
3
  flex-direction: row;
4
4
  align-items: center;
5
5
  }
6
- .bk-slider .bk-slider-runway {
6
+ :where(.bk-slider) .bk-slider-runway {
7
7
  position: relative;
8
8
  width: 100%;
9
9
  height: 4px;
@@ -13,28 +13,28 @@
13
13
  border-radius: 2px;
14
14
  opacity: 1;
15
15
  }
16
- .bk-slider .bk-slider-runway .bk-slider-bar {
16
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar {
17
17
  position: absolute;
18
18
  height: 4px;
19
19
  background: #3a84ff;
20
- border-bottom-left-radius: 3px;
20
+ border-top-right-radius: 3px;
21
21
  border-bottom-right-radius: 3px;
22
+ border-bottom-left-radius: 3px;
22
23
  border-top-left-radius: 3px;
23
- border-top-right-radius: 3px;
24
24
  }
25
- .bk-slider .bk-slider-runway .bk-slider-bar.vertical {
25
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar.vertical {
26
26
  width: 4px;
27
27
  }
28
- .bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
28
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar.horizontal {
29
29
  height: 4px;
30
30
  }
31
- .bk-slider .bk-slider-runway .disable {
31
+ :where(.bk-slider) .bk-slider-runway .disable {
32
32
  background: #979ba5;
33
33
  }
34
- .bk-slider .bk-slider-runway .bk-slider-labels {
34
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels {
35
35
  position: relative;
36
36
  }
37
- .bk-slider .bk-slider-runway .bk-slider-labels.vertical {
37
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels.vertical {
38
38
  left: 18px;
39
39
  display: flex;
40
40
  width: 10px;
@@ -42,7 +42,7 @@
42
42
  flex-direction: column;
43
43
  justify-content: space-between;
44
44
  }
45
- .bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
45
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels.horizontal {
46
46
  top: 10px;
47
47
  display: flex;
48
48
  width: 100%;
@@ -50,7 +50,7 @@
50
50
  flex-direction: row;
51
51
  justify-content: space-between;
52
52
  }
53
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
53
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label {
54
54
  position: absolute;
55
55
  display: flex;
56
56
  width: 10px;
@@ -60,15 +60,15 @@
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  }
63
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
63
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
64
64
  left: 10px;
65
65
  transform: translateY(50%);
66
66
  }
67
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
67
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
68
68
  top: 10px;
69
69
  transform: translateX(-50%);
70
70
  }
71
- .bk-slider .bk-slider-interval {
71
+ :where(.bk-slider) .bk-slider-interval {
72
72
  position: absolute;
73
73
  width: 4px;
74
74
  height: 4px;
@@ -76,22 +76,22 @@
76
76
  border-radius: 100%;
77
77
  transform: translateX(-50%);
78
78
  }
79
- .bk-slider .bk-slider-interval.vertical {
79
+ :where(.bk-slider) .bk-slider-interval.vertical {
80
80
  left: 2px;
81
81
  }
82
- .bk-slider-input {
82
+ :where(.bk-slider) .bk-slider-input {
83
83
  display: flex;
84
84
  margin: 0 0 0 28px;
85
85
  flex-direction: row;
86
86
  align-items: center;
87
87
  }
88
- .bk-slider-input .input-item {
88
+ :where(.bk-slider) .bk-slider-input .input-item {
89
89
  width: 92px;
90
90
  }
91
- .bk-slider-input .input-center {
91
+ :where(.bk-slider) .bk-slider-input .input-center {
92
92
  margin: 0 7px;
93
93
  }
94
- .bk-slider-button {
94
+ :where(.bk-slider-button) {
95
95
  position: absolute;
96
96
  z-index: 1001;
97
97
  display: flex;
@@ -104,21 +104,21 @@
104
104
  justify-content: center;
105
105
  align-items: center;
106
106
  }
107
- .bk-slider-button:hover {
107
+ :where(.bk-slider-button):hover {
108
108
  cursor: grab;
109
109
  }
110
- .bk-slider-button.grabbing {
110
+ :where(.bk-slider-button).grabbing {
111
111
  cursor: grabbing;
112
112
  }
113
- .bk-slider-button.vertical {
113
+ :where(.bk-slider-button).vertical {
114
114
  left: -10px;
115
115
  transform: translateY(50%);
116
116
  }
117
- .bk-slider-button.horizontal {
117
+ :where(.bk-slider-button).horizontal {
118
118
  top: -10px;
119
119
  transform: translateX(-50%);
120
120
  }
121
- .bk-slider-button .slider-button {
121
+ :where(.bk-slider-button) .slider-button {
122
122
  width: 12px;
123
123
  height: 12px;
124
124
  background-color: #fff;
@@ -127,25 +127,25 @@
127
127
  transition: 0.2s;
128
128
  user-select: none;
129
129
  }
130
- .bk-slider-button .slider-button-disable {
130
+ :where(.bk-slider-button) .slider-button-disable {
131
131
  border: 2px solid #979ba5;
132
132
  }
133
- .bk-slider-button .slider-button:hover {
133
+ :where(.bk-slider-button) .slider-button:hover {
134
134
  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
135
135
  }
136
- .bk-slider-button .slider-button:focus {
136
+ :where(.bk-slider-button) .slider-button:focus {
137
137
  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
138
138
  }
139
- .bk-slider-button .slider-button-label {
139
+ :where(.bk-slider-button) .slider-button-label {
140
140
  position: absolute;
141
141
  display: flex;
142
142
  text-align: center;
143
143
  align-items: center;
144
144
  justify-content: center;
145
145
  }
146
- .bk-slider-button .slider-button-label.vertical {
146
+ :where(.bk-slider-button) .slider-button-label.vertical {
147
147
  left: 28px;
148
148
  }
149
- .bk-slider-button .slider-button-label.horizontal {
149
+ :where(.bk-slider-button) .slider-button-label.horizontal {
150
150
  top: 20px;
151
151
  }
package/lib/slider/slider.less CHANGED
@@ -1,6 +1,6 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-slider {
3
+ :where(.@{bk-prefix}-slider) {
4
4
  display: flex;
5
5
  flex-direction: row;
6
6
  align-items: center;
@@ -19,10 +19,10 @@
19
19
  position: absolute;
20
20
  height: 4px;
21
21
  background: @primary-color;
22
- border-bottom-left-radius: 3px;
22
+ border-top-right-radius: 3px;
23
23
  border-bottom-right-radius: 3px;
24
+ border-bottom-left-radius: 3px;
24
25
  border-top-left-radius: 3px;
25
- border-top-right-radius: 3px;
26
26
 
27
27
  &.vertical {
28
28
  width: 4px;
@@ -94,7 +94,7 @@
94
94
  }
95
95
  }
96
96
 
97
- &-input {
97
+ .@{bk-prefix}-slider-input {
98
98
  display: flex;
99
99
  margin: 0 0 0 28px;
100
100
  flex-direction: row;
@@ -110,7 +110,7 @@
110
110
  }
111
111
  }
112
112
 
113
- .@{bk-prefix}-slider-button {
113
+ :where(.@{bk-prefix}-slider-button) {
114
114
  position: absolute;
115
115
  z-index: 1001;
116
116
  display: flex;
@@ -147,7 +147,7 @@
147
147
  background-color: #fff;
148
148
  border: 2px solid @primary-color;
149
149
  border-radius: 50%;
150
- transition: .2s;
150
+ transition: 0.2s;
151
151
  user-select: none;
152
152
 
153
153
  &-disable {
@@ -155,11 +155,11 @@
155
155
  }
156
156
 
157
157
  &:hover {
158
- box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, .30);
158
+ box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
159
159
  }
160
160
 
161
161
  &:focus {
162
- box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, .9);
162
+ box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
163
163
  }
164
164
  }
165
165
 
package/lib/slider/slider.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,12 +127,12 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-slider {
130
+ :where(.bk-slider) {
131
131
  display: flex;
132
132
  flex-direction: row;
133
133
  align-items: center;
134
134
  }
135
- .bk-slider .bk-slider-runway {
135
+ :where(.bk-slider) .bk-slider-runway {
136
136
  position: relative;
137
137
  width: 100%;
138
138
  height: 4px;
@@ -142,28 +142,28 @@
142
142
  border-radius: 2px;
143
143
  opacity: 1;
144
144
  }
145
- .bk-slider .bk-slider-runway .bk-slider-bar {
145
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar {
146
146
  position: absolute;
147
147
  height: 4px;
148
148
  background: var(--primary-color);
149
- border-bottom-left-radius: 3px;
149
+ border-top-right-radius: 3px;
150
150
  border-bottom-right-radius: 3px;
151
+ border-bottom-left-radius: 3px;
151
152
  border-top-left-radius: 3px;
152
- border-top-right-radius: 3px;
153
153
  }
154
- .bk-slider .bk-slider-runway .bk-slider-bar.vertical {
154
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar.vertical {
155
155
  width: 4px;
156
156
  }
157
- .bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
157
+ :where(.bk-slider) .bk-slider-runway .bk-slider-bar.horizontal {
158
158
  height: 4px;
159
159
  }
160
- .bk-slider .bk-slider-runway .disable {
160
+ :where(.bk-slider) .bk-slider-runway .disable {
161
161
  background: var(--slider-disable-bar-bg);
162
162
  }
163
- .bk-slider .bk-slider-runway .bk-slider-labels {
163
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels {
164
164
  position: relative;
165
165
  }
166
- .bk-slider .bk-slider-runway .bk-slider-labels.vertical {
166
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels.vertical {
167
167
  left: 18px;
168
168
  display: flex;
169
169
  width: 10px;
@@ -171,7 +171,7 @@
171
171
  flex-direction: column;
172
172
  justify-content: space-between;
173
173
  }
174
- .bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
174
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels.horizontal {
175
175
  top: 10px;
176
176
  display: flex;
177
177
  width: 100%;
@@ -179,7 +179,7 @@
179
179
  flex-direction: row;
180
180
  justify-content: space-between;
181
181
  }
182
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
182
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label {
183
183
  position: absolute;
184
184
  display: flex;
185
185
  width: 10px;
@@ -189,15 +189,15 @@
189
189
  align-items: center;
190
190
  justify-content: center;
191
191
  }
192
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
192
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
193
193
  left: 10px;
194
194
  transform: translateY(50%);
195
195
  }
196
- .bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
196
+ :where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
197
197
  top: 10px;
198
198
  transform: translateX(-50%);
199
199
  }
200
- .bk-slider .bk-slider-interval {
200
+ :where(.bk-slider) .bk-slider-interval {
201
201
  position: absolute;
202
202
  width: 4px;
203
203
  height: 4px;
@@ -205,22 +205,22 @@
205
205
  border-radius: 100%;
206
206
  transform: translateX(-50%);
207
207
  }
208
- .bk-slider .bk-slider-interval.vertical {
208
+ :where(.bk-slider) .bk-slider-interval.vertical {
209
209
  left: 2px;
210
210
  }
211
- .bk-slider-input {
211
+ :where(.bk-slider) .bk-slider-input {
212
212
  display: flex;
213
213
  margin: 0 0 0 28px;
214
214
  flex-direction: row;
215
215
  align-items: center;
216
216
  }
217
- .bk-slider-input .input-item {
217
+ :where(.bk-slider) .bk-slider-input .input-item {
218
218
  width: 92px;
219
219
  }
220
- .bk-slider-input .input-center {
220
+ :where(.bk-slider) .bk-slider-input .input-center {
221
221
  margin: 0 7px;
222
222
  }
223
- .bk-slider-button {
223
+ :where(.bk-slider-button) {
224
224
  position: absolute;
225
225
  z-index: 1001;
226
226
  display: flex;
@@ -233,21 +233,21 @@
233
233
  justify-content: center;
234
234
  align-items: center;
235
235
  }
236
- .bk-slider-button:hover {
236
+ :where(.bk-slider-button):hover {
237
237
  cursor: grab;
238
238
  }
239
- .bk-slider-button.grabbing {
239
+ :where(.bk-slider-button).grabbing {
240
240
  cursor: grabbing;
241
241
  }
242
- .bk-slider-button.vertical {
242
+ :where(.bk-slider-button).vertical {
243
243
  left: -10px;
244
244
  transform: translateY(50%);
245
245
  }
246
- .bk-slider-button.horizontal {
246
+ :where(.bk-slider-button).horizontal {
247
247
  top: -10px;
248
248
  transform: translateX(-50%);
249
249
  }
250
- .bk-slider-button .slider-button {
250
+ :where(.bk-slider-button) .slider-button {
251
251
  width: 12px;
252
252
  height: 12px;
253
253
  background-color: #fff;
@@ -256,25 +256,25 @@
256
256
  transition: 0.2s;
257
257
  user-select: none;
258
258
  }
259
- .bk-slider-button .slider-button-disable {
259
+ :where(.bk-slider-button) .slider-button-disable {
260
260
  border: 2px solid #979ba5;
261
261
  }
262
- .bk-slider-button .slider-button:hover {
262
+ :where(.bk-slider-button) .slider-button:hover {
263
263
  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
264
264
  }
265
- .bk-slider-button .slider-button:focus {
265
+ :where(.bk-slider-button) .slider-button:focus {
266
266
  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
267
267
  }
268
- .bk-slider-button .slider-button-label {
268
+ :where(.bk-slider-button) .slider-button-label {
269
269
  position: absolute;
270
270
  display: flex;
271
271
  text-align: center;
272
272
  align-items: center;
273
273
  justify-content: center;
274
274
  }
275
- .bk-slider-button .slider-button-label.vertical {
275
+ :where(.bk-slider-button) .slider-button-label.vertical {
276
276
  left: 28px;
277
277
  }
278
- .bk-slider-button .slider-button-label.horizontal {
278
+ :where(.bk-slider-button) .slider-button-label.horizontal {
279
279
  top: 20px;
280
280
  }