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/steps/steps.css CHANGED
@@ -7,12 +7,92 @@
7
7
  transform: rotate(360deg);
8
8
  }
9
9
  }
10
- .bk-steps {
10
+ :where(.bk-steps) {
11
11
  display: flex;
12
12
  width: 100%;
13
13
  font-size: 0;
14
14
  }
15
- .bk-steps .icon-circle-4-1 {
15
+ :where(.bk-steps) .bk-steps-primary .bk-step.done .bk-step-number,
16
+ :where(.bk-steps) .bk-steps-primary .bk-step.done .bk-step-icon,
17
+ :where(.bk-steps) .bk-steps-primary .bk-step.done .bk-step-text {
18
+ color: #3a84ff;
19
+ border-color: #3a84ff;
20
+ }
21
+ :where(.bk-steps) .bk-steps-primary .bk-step.done .bk-step-title::after,
22
+ :where(.bk-steps) .bk-steps-primary .bk-step.done .bk-step-indicator::after {
23
+ background-image: linear-gradient(to right, #3a84ff 50%, transparent 0%);
24
+ }
25
+ :where(.bk-steps) .bk-steps-primary .bk-step.done::after {
26
+ background-image: linear-gradient(#3a84ff 50%, transparent 0%);
27
+ }
28
+ :where(.bk-steps) .bk-steps-primary .bk-step.current .bk-step-number,
29
+ :where(.bk-steps) .bk-steps-primary .bk-step.current .bk-step-icon,
30
+ :where(.bk-steps) .bk-steps-primary .bk-step.current .bk-step-text {
31
+ color: #fff;
32
+ background-color: #3a84ff;
33
+ border-color: #3a84ff;
34
+ }
35
+ :where(.bk-steps) .bk-steps-warning .bk-step.done .bk-step-number,
36
+ :where(.bk-steps) .bk-steps-warning .bk-step.done .bk-step-icon,
37
+ :where(.bk-steps) .bk-steps-warning .bk-step.done .bk-step-text {
38
+ color: #ff9c01;
39
+ border-color: #ff9c01;
40
+ }
41
+ :where(.bk-steps) .bk-steps-warning .bk-step.done .bk-step-title::after,
42
+ :where(.bk-steps) .bk-steps-warning .bk-step.done .bk-step-indicator::after {
43
+ background-image: linear-gradient(to right, #ff9c01 50%, transparent 0%);
44
+ }
45
+ :where(.bk-steps) .bk-steps-warning .bk-step.done::after {
46
+ background-image: linear-gradient(#ff9c01 50%, transparent 0%);
47
+ }
48
+ :where(.bk-steps) .bk-steps-warning .bk-step.current .bk-step-number,
49
+ :where(.bk-steps) .bk-steps-warning .bk-step.current .bk-step-icon,
50
+ :where(.bk-steps) .bk-steps-warning .bk-step.current .bk-step-text {
51
+ color: #fff;
52
+ background-color: #ff9c01;
53
+ border-color: #ff9c01;
54
+ }
55
+ :where(.bk-steps) .bk-steps-success .bk-step.done .bk-step-number,
56
+ :where(.bk-steps) .bk-steps-success .bk-step.done .bk-step-icon,
57
+ :where(.bk-steps) .bk-steps-success .bk-step.done .bk-step-text {
58
+ color: #2dcb56;
59
+ border-color: #2dcb56;
60
+ }
61
+ :where(.bk-steps) .bk-steps-success .bk-step.done .bk-step-title::after,
62
+ :where(.bk-steps) .bk-steps-success .bk-step.done .bk-step-indicator::after {
63
+ background-image: linear-gradient(to right, #2dcb56 50%, transparent 0%);
64
+ }
65
+ :where(.bk-steps) .bk-steps-success .bk-step.done::after {
66
+ background-image: linear-gradient(#2dcb56 50%, transparent 0%);
67
+ }
68
+ :where(.bk-steps) .bk-steps-success .bk-step.current .bk-step-number,
69
+ :where(.bk-steps) .bk-steps-success .bk-step.current .bk-step-icon,
70
+ :where(.bk-steps) .bk-steps-success .bk-step.current .bk-step-text {
71
+ color: #fff;
72
+ background-color: #2dcb56;
73
+ border-color: #2dcb56;
74
+ }
75
+ :where(.bk-steps) .bk-steps-danger .bk-step.done .bk-step-number,
76
+ :where(.bk-steps) .bk-steps-danger .bk-step.done .bk-step-icon,
77
+ :where(.bk-steps) .bk-steps-danger .bk-step.done .bk-step-text {
78
+ color: #ea3636;
79
+ border-color: #ea3636;
80
+ }
81
+ :where(.bk-steps) .bk-steps-danger .bk-step.done .bk-step-title::after,
82
+ :where(.bk-steps) .bk-steps-danger .bk-step.done .bk-step-indicator::after {
83
+ background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
84
+ }
85
+ :where(.bk-steps) .bk-steps-danger .bk-step.done::after {
86
+ background-image: linear-gradient(#ea3636 50%, transparent 0%);
87
+ }
88
+ :where(.bk-steps) .bk-steps-danger .bk-step.current .bk-step-number,
89
+ :where(.bk-steps) .bk-steps-danger .bk-step.current .bk-step-icon,
90
+ :where(.bk-steps) .bk-steps-danger .bk-step.current .bk-step-text {
91
+ color: #fff;
92
+ background-color: #ea3636;
93
+ border-color: #ea3636;
94
+ }
95
+ :where(.bk-steps) .icon-circle-4-1 {
16
96
  width: 12px;
17
97
  height: 12px;
18
98
  border: 2px solid #fff;
@@ -21,16 +101,16 @@
21
101
  border-left: 0;
22
102
  border-radius: 7px;
23
103
  }
24
- .bk-steps .bk-icon {
104
+ :where(.bk-steps) .bk-icon {
25
105
  font-size: 24px;
26
106
  line-height: 24px;
27
107
  }
28
- .bk-steps .bk-icon.icon-loading {
108
+ :where(.bk-steps) .bk-icon.icon-loading {
29
109
  display: inline-block;
30
110
  font-size: 14px;
31
111
  animation: loadingCircle 1s infinite linear;
32
112
  }
33
- .bk-steps .bk-step {
113
+ :where(.bk-steps) .bk-step {
34
114
  position: relative;
35
115
  margin-right: 16px;
36
116
  overflow: hidden;
@@ -38,7 +118,7 @@
38
118
  white-space: nowrap;
39
119
  flex: 1;
40
120
  }
41
- .bk-steps .bk-step .bk-step-indicator {
121
+ :where(.bk-steps) .bk-step .bk-step-indicator {
42
122
  z-index: 1;
43
123
  display: inline-flex;
44
124
  width: 24px;
@@ -56,15 +136,15 @@
56
136
  align-items: center;
57
137
  justify-content: center;
58
138
  }
59
- .bk-steps .bk-step .bk-step-number {
139
+ :where(.bk-steps) .bk-step .bk-step-number {
60
140
  font-family: arial;
61
141
  font-size: 14px;
62
142
  }
63
- .bk-steps .bk-step .bk-step-content {
143
+ :where(.bk-steps) .bk-step .bk-step-content {
64
144
  display: inline-block;
65
145
  vertical-align: top;
66
146
  }
67
- .bk-steps .bk-step .bk-step-title {
147
+ :where(.bk-steps) .bk-step .bk-step-title {
68
148
  position: relative;
69
149
  display: inline-block;
70
150
  padding-right: 16px;
@@ -73,7 +153,7 @@
73
153
  color: #63656e;
74
154
  word-break: break-all;
75
155
  }
76
- .bk-steps .bk-step .bk-step-title::after {
156
+ :where(.bk-steps) .bk-step .bk-step-title::after {
77
157
  position: absolute;
78
158
  top: 12px;
79
159
  left: 100%;
@@ -82,16 +162,16 @@
82
162
  background-color: transparent;
83
163
  content: '';
84
164
  }
85
- .bk-steps .bk-step .bk-step-description {
165
+ :where(.bk-steps) .bk-step .bk-step-description {
86
166
  max-width: 140px;
87
167
  font-size: 12px;
88
168
  color: #979ba5;
89
169
  white-space: normal;
90
170
  }
91
- .bk-steps .bk-step.bk-step-no-content .bk-step-indicator {
171
+ :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator {
92
172
  margin-right: 0;
93
173
  }
94
- .bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
174
+ :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator::after {
95
175
  position: absolute;
96
176
  top: 12px;
97
177
  left: 100%;
@@ -100,167 +180,87 @@
100
180
  background-color: transparent;
101
181
  content: '';
102
182
  }
103
- .bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
183
+ :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator::after {
104
184
  top: 10px;
105
185
  left: 32px;
106
186
  }
107
- .bk-steps .bk-step:last-child {
187
+ :where(.bk-steps) .bk-step:last-child {
108
188
  margin-right: 0;
109
189
  flex: none;
110
190
  }
111
- .bk-steps .bk-step:last-child .bk-step-title {
191
+ :where(.bk-steps) .bk-step:last-child .bk-step-title {
112
192
  padding-right: 0;
113
193
  }
114
- .bk-steps .bk-step:last-child .bk-step-title::after {
194
+ :where(.bk-steps) .bk-step:last-child .bk-step-title::after {
115
195
  display: none;
116
196
  }
117
- .bk-steps .bk-step.done .bk-step-title {
197
+ :where(.bk-steps) .bk-step.done .bk-step-title {
118
198
  color: #63656e;
119
199
  }
120
- .bk-steps .bk-step.done .bk-step-description {
200
+ :where(.bk-steps) .bk-step.done .bk-step-description {
121
201
  color: #979ba5;
122
202
  }
123
- .bk-steps .bk-step.done .bk-steps-icon {
203
+ :where(.bk-steps) .bk-step.done .bk-steps-icon {
124
204
  margin-bottom: 3px;
125
205
  font-size: 22px;
126
206
  }
127
- .bk-steps .bk-step.done .bk-step-iconerror .bk-steps-icon {
207
+ :where(.bk-steps) .bk-step.done .bk-step-iconerror .bk-steps-icon {
128
208
  font-size: 14px;
129
209
  }
130
- .bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-title::after,
131
- .bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-title::after,
132
- .bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-indicator::after,
133
- .bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-indicator::after {
210
+ :where(.bk-steps) .bk-step.done:has(+ .current.is-error) .bk-step-title::after,
211
+ :where(.bk-steps) .bk-step.done:has( + .current.bk-step-error) .bk-step-title::after,
212
+ :where(.bk-steps) .bk-step.done:has(+ .current.is-error) .bk-step-indicator::after,
213
+ :where(.bk-steps) .bk-step.done:has( + .current.bk-step-error) .bk-step-indicator::after {
134
214
  background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
135
215
  }
136
- .bk-steps .bk-step.current .bk-step-number,
137
- .bk-steps .bk-step.current .bk-step-icon,
138
- .bk-steps .bk-step.current .bk-step-text {
216
+ :where(.bk-steps) .bk-step.current .bk-step-number,
217
+ :where(.bk-steps) .bk-step.current .bk-step-icon,
218
+ :where(.bk-steps) .bk-step.current .bk-step-text {
139
219
  border-width: 2px;
140
220
  }
141
- .bk-steps .bk-step.current .bk-step-title,
142
- .bk-steps .bk-step.current .bk-step-description {
221
+ :where(.bk-steps) .bk-step.current .bk-step-title,
222
+ :where(.bk-steps) .bk-step.current .bk-step-description {
143
223
  color: #63656e;
144
224
  }
145
- .bk-steps .bk-step.current.bk-step-error .bk-step-indicator {
225
+ :where(.bk-steps) .bk-step.current.bk-step-error .bk-step-indicator {
146
226
  background-color: #ea3636;
147
227
  border-color: #ea3636;
148
228
  }
149
- .bk-steps .bk-step.current.bk-step-error .bk-step-title,
150
- .bk-steps .bk-step.current.bk-step-error .bk-step-description {
229
+ :where(.bk-steps) .bk-step.current.bk-step-error .bk-step-title,
230
+ :where(.bk-steps) .bk-step.current.bk-step-error .bk-step-description {
151
231
  color: #ea3636;
152
232
  }
153
- .bk-steps .bk-step.is-error .bk-step-indicator {
233
+ :where(.bk-steps) .bk-step.is-error .bk-step-indicator {
154
234
  background-color: #ea3636 !important;
155
235
  border-color: #ea3636 !important;
156
236
  }
157
- .bk-steps .bk-step.is-error .bk-step-content .bk-step-title {
237
+ :where(.bk-steps) .bk-step.is-error .bk-step-content .bk-step-title {
158
238
  color: #ea3636 !important;
159
239
  }
160
- .bk-steps-primary .bk-step.done .bk-step-number,
161
- .bk-steps-primary .bk-step.done .bk-step-icon,
162
- .bk-steps-primary .bk-step.done .bk-step-text {
163
- color: #3a84ff;
164
- border-color: #3a84ff;
165
- }
166
- .bk-steps-primary .bk-step.done .bk-step-title::after,
167
- .bk-steps-primary .bk-step.done .bk-step-indicator::after {
168
- background-image: linear-gradient(to right, #3a84ff 50%, transparent 0%);
169
- }
170
- .bk-steps-primary .bk-step.done::after {
171
- background-image: linear-gradient(#3a84ff 50%, transparent 0%);
172
- }
173
- .bk-steps-primary .bk-step.current .bk-step-number,
174
- .bk-steps-primary .bk-step.current .bk-step-icon,
175
- .bk-steps-primary .bk-step.current .bk-step-text {
176
- color: #fff;
177
- background-color: #3a84ff;
178
- border-color: #3a84ff;
179
- }
180
- .bk-steps-warning .bk-step.done .bk-step-number,
181
- .bk-steps-warning .bk-step.done .bk-step-icon,
182
- .bk-steps-warning .bk-step.done .bk-step-text {
183
- color: #ff9c01;
184
- border-color: #ff9c01;
185
- }
186
- .bk-steps-warning .bk-step.done .bk-step-title::after,
187
- .bk-steps-warning .bk-step.done .bk-step-indicator::after {
188
- background-image: linear-gradient(to right, #ff9c01 50%, transparent 0%);
189
- }
190
- .bk-steps-warning .bk-step.done::after {
191
- background-image: linear-gradient(#ff9c01 50%, transparent 0%);
192
- }
193
- .bk-steps-warning .bk-step.current .bk-step-number,
194
- .bk-steps-warning .bk-step.current .bk-step-icon,
195
- .bk-steps-warning .bk-step.current .bk-step-text {
196
- color: #fff;
197
- background-color: #ff9c01;
198
- border-color: #ff9c01;
199
- }
200
- .bk-steps-success .bk-step.done .bk-step-number,
201
- .bk-steps-success .bk-step.done .bk-step-icon,
202
- .bk-steps-success .bk-step.done .bk-step-text {
203
- color: #2dcb56;
204
- border-color: #2dcb56;
205
- }
206
- .bk-steps-success .bk-step.done .bk-step-title::after,
207
- .bk-steps-success .bk-step.done .bk-step-indicator::after {
208
- background-image: linear-gradient(to right, #2dcb56 50%, transparent 0%);
209
- }
210
- .bk-steps-success .bk-step.done::after {
211
- background-image: linear-gradient(#2dcb56 50%, transparent 0%);
212
- }
213
- .bk-steps-success .bk-step.current .bk-step-number,
214
- .bk-steps-success .bk-step.current .bk-step-icon,
215
- .bk-steps-success .bk-step.current .bk-step-text {
216
- color: #fff;
217
- background-color: #2dcb56;
218
- border-color: #2dcb56;
219
- }
220
- .bk-steps-danger .bk-step.done .bk-step-number,
221
- .bk-steps-danger .bk-step.done .bk-step-icon,
222
- .bk-steps-danger .bk-step.done .bk-step-text {
223
- color: #ea3636;
224
- border-color: #ea3636;
225
- }
226
- .bk-steps-danger .bk-step.done .bk-step-title::after,
227
- .bk-steps-danger .bk-step.done .bk-step-indicator::after {
228
- background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
229
- }
230
- .bk-steps-danger .bk-step.done::after {
231
- background-image: linear-gradient(#ea3636 50%, transparent 0%);
232
- }
233
- .bk-steps-danger .bk-step.current .bk-step-number,
234
- .bk-steps-danger .bk-step.current .bk-step-icon,
235
- .bk-steps-danger .bk-step.current .bk-step-text {
236
- color: #fff;
237
- background-color: #ea3636;
238
- border-color: #ea3636;
239
- }
240
- .bk-steps-dashed .bk-step .bk-step-title::after,
241
- .bk-steps-dashed .bk-step .bk-step-indicator::after {
240
+ :where(.bk-steps) .bk-steps-dashed .bk-step .bk-step-title::after,
241
+ :where(.bk-steps) .bk-steps-dashed .bk-step .bk-step-indicator::after {
242
242
  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
243
243
  background-position: bottom;
244
244
  background-repeat: repeat-x;
245
245
  background-size: 6px 1px;
246
246
  }
247
- .bk-steps-solid .bk-step .bk-step-title::after,
248
- .bk-steps-solid .bk-step .bk-step-indicator::after {
247
+ :where(.bk-steps) .bk-steps-solid .bk-step .bk-step-title::after,
248
+ :where(.bk-steps) .bk-steps-solid .bk-step .bk-step-indicator::after {
249
249
  background-color: #c4c6cc;
250
250
  }
251
- .bk-steps-vertical {
251
+ :where(.bk-steps) .bk-steps-vertical {
252
252
  flex-direction: column;
253
253
  height: 100%;
254
254
  }
255
- .bk-steps-vertical .bk-step {
255
+ :where(.bk-steps) .bk-steps-vertical .bk-step {
256
256
  margin-right: 0;
257
257
  margin-bottom: 8px;
258
258
  }
259
- .bk-steps-vertical .bk-step .bk-step-title::after,
260
- .bk-steps-vertical .bk-step .bk-step-indicator::after {
259
+ :where(.bk-steps) .bk-steps-vertical .bk-step .bk-step-title::after,
260
+ :where(.bk-steps) .bk-steps-vertical .bk-step .bk-step-indicator::after {
261
261
  display: none;
262
262
  }
263
- .bk-steps-vertical .bk-step::after {
263
+ :where(.bk-steps) .bk-steps-vertical .bk-step::after {
264
264
  position: absolute;
265
265
  top: 32px;
266
266
  left: 12px;
@@ -272,41 +272,41 @@
272
272
  background-size: 1px 6px;
273
273
  content: '';
274
274
  }
275
- .bk-steps-vertical .bk-step.done:has(+ .current.is-error)::after,
276
- .bk-steps-vertical .bk-step.done:has( + .current.bk-step-error)::after {
275
+ :where(.bk-steps) .bk-steps-vertical .bk-step.done:has(+ .current.is-error)::after,
276
+ :where(.bk-steps) .bk-steps-vertical .bk-step.done:has( + .current.bk-step-error)::after {
277
277
  background-image: linear-gradient(#ea3636 50%, transparent 0%);
278
278
  }
279
- .bk-steps-vertical .bk-step .bk-step-title {
279
+ :where(.bk-steps) .bk-steps-vertical .bk-step .bk-step-title {
280
280
  display: flex;
281
281
  height: 100%;
282
282
  margin-top: 0;
283
283
  text-align: left;
284
284
  align-items: center;
285
285
  }
286
- .bk-steps-small .bk-step .bk-step-indicator {
286
+ :where(.bk-steps) .bk-steps-small .bk-step .bk-step-indicator {
287
287
  width: 20px;
288
288
  height: 20px;
289
289
  line-height: 20px;
290
290
  }
291
- .bk-steps-small .bk-step .bk-step-title {
291
+ :where(.bk-steps) .bk-steps-small .bk-step .bk-step-title {
292
292
  font-size: 12px;
293
293
  line-height: 20px;
294
294
  }
295
- .bk-steps-small .bk-step .bk-step-number {
295
+ :where(.bk-steps) .bk-steps-small .bk-step .bk-step-number {
296
296
  font-size: 12px;
297
297
  }
298
- .bk-steps-small .bk-step .bk-step-icon {
298
+ :where(.bk-steps) .bk-steps-small .bk-step .bk-step-icon {
299
299
  font-size: 14px;
300
300
  line-height: 14px;
301
301
  }
302
- .bk-steps-small .bk-step::after {
302
+ :where(.bk-steps) .bk-steps-small .bk-step::after {
303
303
  top: 28px;
304
304
  left: 10px;
305
305
  }
306
- .bk-steps-small .bk-step .bk-step-title::after {
306
+ :where(.bk-steps) .bk-steps-small .bk-step .bk-step-title::after {
307
307
  top: 10px;
308
308
  }
309
- .bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after {
309
+ :where(.bk-steps) .bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after {
310
310
  top: 8px;
311
311
  left: 28px;
312
312
  }
package/lib/steps/steps.less CHANGED
@@ -19,18 +19,56 @@
19
19
  }
20
20
  }
21
21
 
22
-
23
22
  @keyframes loadingCircle {
24
23
  100% {
25
24
  transform: rotate(360deg);
26
25
  }
27
26
  }
28
27
 
29
- .@{bk-prefix}-steps {
28
+ :where(.@{bk-prefix}-steps) {
30
29
  display: flex;
31
30
  width: 100%;
32
31
  font-size: 0;
33
32
 
33
+ each(@themeSelectors, {
34
+ @color: '@{value}-color';
35
+ .@{bk-prefix}-steps-@{value} {
36
+ .@{bk-prefix}-step {
37
+ &.done {
38
+ .@{bk-prefix}-step-number,
39
+ .@{bk-prefix}-step-icon,
40
+ .@{bk-prefix}-step-text {
41
+ color: @@color;
42
+ border-color: @@color;
43
+ }
44
+
45
+
46
+ .@{bk-prefix}-step-title,
47
+ .@{bk-prefix}-step-indicator {
48
+ &::after {
49
+ background-image: linear-gradient(to right, @@color 50%, transparent 0%);
50
+ }
51
+ }
52
+
53
+
54
+ &::after {
55
+ background-image: linear-gradient(@@color 50%, transparent 0%);
56
+ }
57
+ }
58
+
59
+ &.current {
60
+ .@{bk-prefix}-step-number,
61
+ .@{bk-prefix}-step-icon,
62
+ .@{bk-prefix}-step-text {
63
+ color: #fff;
64
+ background-color: @@color;
65
+ border-color: @@color;
66
+ }
67
+ }
68
+ }
69
+ }
70
+ });
71
+
34
72
  .icon-circle-4-1 {
35
73
  width: 12px;
36
74
  height: 12px;
@@ -109,7 +147,6 @@
109
147
  font-size: 12px;
110
148
  color: #979ba5;
111
149
  white-space: normal;
112
-
113
150
  }
114
151
 
115
152
  &.@{bk-prefix}-step-no-content {
@@ -207,47 +244,7 @@
207
244
  }
208
245
  }
209
246
 
210
-
211
- each(@themeSelectors, {
212
- @color: '@{value}-color';
213
- &-@{value} {
214
- .@{bk-prefix}-step {
215
- &.done {
216
- .@{bk-prefix}-step-number,
217
- .@{bk-prefix}-step-icon,
218
- .@{bk-prefix}-step-text {
219
- color: @@color;
220
- border-color: @@color;
221
- }
222
-
223
-
224
- .@{bk-prefix}-step-title,
225
- .@{bk-prefix}-step-indicator {
226
- &::after {
227
- background-image: linear-gradient(to right, @@color 50%, transparent 0%);
228
- }
229
- }
230
-
231
-
232
- &::after {
233
- background-image: linear-gradient(@@color 50%, transparent 0%);
234
- }
235
- }
236
-
237
- &.current {
238
- .@{bk-prefix}-step-number,
239
- .@{bk-prefix}-step-icon,
240
- .@{bk-prefix}-step-text {
241
- color: #fff;
242
- background-color: @@color;
243
- border-color: @@color;
244
- }
245
- }
246
- }
247
- }
248
- })
249
-
250
- &-dashed {
247
+ .@{bk-prefix}-steps-dashed {
251
248
  .@{bk-prefix}-step {
252
249
  .@{bk-prefix}-step-title,
253
250
  .@{bk-prefix}-step-indicator {
@@ -261,7 +258,7 @@
261
258
  }
262
259
  }
263
260
 
264
- &-solid {
261
+ .@{bk-prefix}-steps-solid {
265
262
  .@{bk-prefix}-step {
266
263
  .@{bk-prefix}-step-title,
267
264
  .@{bk-prefix}-step-indicator {
@@ -272,7 +269,7 @@
272
269
  }
273
270
  }
274
271
 
275
- &-vertical {
272
+ .@{bk-prefix}-steps-vertical {
276
273
  flex-direction: column;
277
274
  height: 100%;
278
275
 
@@ -319,8 +316,7 @@
319
316
  }
320
317
  }
321
318
 
322
-
323
- &-small {
319
+ .@{bk-prefix}-steps-small {
324
320
  .@{bk-prefix}-step {
325
321
  .@{bk-prefix}-step-indicator {
326
322
  width: 20px;