bkui-vue 1.0.3-beta.26 → 1.0.3-beta.28

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 (287) hide show
  1. package/dist/index.cjs.js +46 -46
  2. package/dist/index.esm.js +6162 -6148
  3. package/dist/index.umd.js +46 -46
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/affix/affix.css +1 -1
  7. package/lib/affix/affix.less +2 -2
  8. package/lib/affix/affix.variable.css +3 -3
  9. package/lib/affix/index.js +13 -15
  10. package/lib/alert/alert.css +21 -21
  11. package/lib/alert/alert.less +16 -17
  12. package/lib/alert/alert.variable.css +23 -23
  13. package/lib/alert/index.js +22 -24
  14. package/lib/animate-number/index.js +5 -6
  15. package/lib/backtop/backtop.css +11 -11
  16. package/lib/backtop/backtop.less +3 -3
  17. package/lib/backtop/backtop.variable.css +13 -13
  18. package/lib/backtop/index.js +20 -22
  19. package/lib/badge/badge.css +32 -32
  20. package/lib/badge/badge.less +5 -5
  21. package/lib/badge/badge.variable.css +34 -34
  22. package/lib/badge/index.js +19 -21
  23. package/lib/breadcrumb/breadcrumb.css +31 -31
  24. package/lib/breadcrumb/breadcrumb.less +8 -8
  25. package/lib/breadcrumb/breadcrumb.variable.css +33 -33
  26. package/lib/breadcrumb/index.js +24 -26
  27. package/lib/button/button.css +69 -69
  28. package/lib/button/button.less +5 -3
  29. package/lib/button/button.variable.css +71 -71
  30. package/lib/button/index.js +28 -37
  31. package/lib/card/card.css +31 -31
  32. package/lib/card/card.less +4 -4
  33. package/lib/card/card.variable.css +33 -33
  34. package/lib/card/index.js +35 -43
  35. package/lib/cascader/cascader.css +63 -63
  36. package/lib/cascader/cascader.less +11 -12
  37. package/lib/cascader/cascader.variable.css +65 -65
  38. package/lib/cascader/index.js +80 -100
  39. package/lib/checkbox/checkbox.css +21 -21
  40. package/lib/checkbox/checkbox.less +8 -8
  41. package/lib/checkbox/checkbox.variable.css +23 -23
  42. package/lib/checkbox/index.js +32 -34
  43. package/lib/code-diff/code-diff.css +97 -97
  44. package/lib/code-diff/code-diff.less +4 -3
  45. package/lib/code-diff/code-diff.variable.css +99 -99
  46. package/lib/code-diff/index.js +12 -14
  47. package/lib/collapse/collapse.css +30 -30
  48. package/lib/collapse/collapse.less +24 -25
  49. package/lib/collapse/collapse.variable.css +32 -32
  50. package/lib/collapse/index.js +39 -41
  51. package/lib/collapse-transition/collapse-transition.css +32 -32
  52. package/lib/collapse-transition/collapse-transition.less +48 -59
  53. package/lib/collapse-transition/collapse-transition.variable.css +34 -34
  54. package/lib/collapse-transition/index.js +8 -9
  55. package/lib/color-picker/color-picker.css +57 -57
  56. package/lib/color-picker/color-picker.less +30 -36
  57. package/lib/color-picker/color-picker.variable.css +59 -59
  58. package/lib/color-picker/index.js +48 -50
  59. package/lib/components.js +505 -60
  60. package/lib/config-provider/config-provider.variable.css +2 -2
  61. package/lib/config-provider/index.js +8 -9
  62. package/lib/container/container.css +19 -19
  63. package/lib/container/container.less +3 -3
  64. package/lib/container/container.variable.css +21 -21
  65. package/lib/container/index.js +19 -21
  66. package/lib/date-picker/date-picker.css +92 -92
  67. package/lib/date-picker/date-picker.d.ts +1 -0
  68. package/lib/date-picker/date-picker.less +54 -55
  69. package/lib/date-picker/date-picker.variable.css +94 -94
  70. package/lib/date-picker/index.d.ts +3 -0
  71. package/lib/date-picker/index.js +69 -77
  72. package/lib/date-picker/time-picker.d.ts +1 -0
  73. package/lib/dialog/dialog.css +51 -51
  74. package/lib/dialog/dialog.less +1 -1
  75. package/lib/dialog/dialog.variable.css +53 -53
  76. package/lib/dialog/index.js +49 -63
  77. package/lib/directives/index.js +12 -13
  78. package/lib/dist.index.js +62 -5
  79. package/lib/divider/divider.css +8 -8
  80. package/lib/divider/divider.less +8 -5
  81. package/lib/divider/divider.variable.css +10 -10
  82. package/lib/divider/index.js +13 -15
  83. package/lib/dropdown/dropdown.css +15 -15
  84. package/lib/dropdown/dropdown.less +6 -6
  85. package/lib/dropdown/dropdown.variable.css +17 -17
  86. package/lib/dropdown/index.js +24 -32
  87. package/lib/exception/exception.css +13 -13
  88. package/lib/exception/exception.less +6 -6
  89. package/lib/exception/exception.variable.css +15 -15
  90. package/lib/exception/index.js +11 -13
  91. package/lib/fixed-navbar/fixed-navbar.css +9 -9
  92. package/lib/fixed-navbar/fixed-navbar.less +2 -1
  93. package/lib/fixed-navbar/fixed-navbar.variable.css +11 -11
  94. package/lib/fixed-navbar/index.js +13 -15
  95. package/lib/form/form.css +63 -63
  96. package/lib/form/form.less +16 -14
  97. package/lib/form/form.variable.css +65 -65
  98. package/lib/form/index.js +48 -50
  99. package/lib/hooks.js +48 -1
  100. package/lib/icon/index.js +0 -1
  101. package/lib/image/image-viewer.css +23 -23
  102. package/lib/image/image-viewer.less +25 -24
  103. package/lib/image/image-viewer.variable.css +25 -25
  104. package/lib/image/image.css +29 -29
  105. package/lib/image/image.less +8 -6
  106. package/lib/image/image.variable.css +31 -31
  107. package/lib/image/index.js +38 -39
  108. package/lib/index.js +72 -7
  109. package/lib/info-box/index.js +13 -21
  110. package/lib/info-box/info-box.css +10 -10
  111. package/lib/info-box/info-box.less +2 -1
  112. package/lib/info-box/info-box.variable.css +12 -12
  113. package/lib/input/index.js +59 -61
  114. package/lib/input/input.css +104 -102
  115. package/lib/input/input.less +33 -27
  116. package/lib/input/input.variable.css +106 -104
  117. package/lib/link/index.js +13 -15
  118. package/lib/link/link.css +18 -18
  119. package/lib/link/link.less +3 -1
  120. package/lib/link/link.variable.css +20 -20
  121. package/lib/loading/index.js +17 -19
  122. package/lib/loading/loading.css +94 -94
  123. package/lib/loading/loading.less +4 -4
  124. package/lib/loading/loading.variable.css +96 -96
  125. package/lib/locale/index.js +0 -1
  126. package/lib/menu/index.js +13 -15
  127. package/lib/menu/menu.css +38 -38
  128. package/lib/menu/menu.less +10 -10
  129. package/lib/menu/menu.variable.css +40 -40
  130. package/lib/menu/submenu.css +1 -1
  131. package/lib/menu/submenu.less +1 -1
  132. package/lib/menu/submenu.variable.css +3 -3
  133. package/lib/message/index.js +38 -40
  134. package/lib/message/message.css +59 -59
  135. package/lib/message/message.less +24 -25
  136. package/lib/message/message.variable.css +61 -61
  137. package/lib/modal/index.js +41 -43
  138. package/lib/modal/modal.css +26 -26
  139. package/lib/modal/modal.less +12 -8
  140. package/lib/modal/modal.variable.css +28 -28
  141. package/lib/navigation/index.js +14 -16
  142. package/lib/navigation/navigation.css +25 -25
  143. package/lib/navigation/navigation.less +9 -9
  144. package/lib/navigation/navigation.variable.css +27 -27
  145. package/lib/notify/index.js +31 -33
  146. package/lib/notify/notify.css +17 -17
  147. package/lib/notify/notify.less +6 -8
  148. package/lib/notify/notify.variable.css +19 -19
  149. package/lib/overflow-title/index.js +14 -22
  150. package/lib/pagination/index.js +50 -65
  151. package/lib/pagination/pagination.css +60 -60
  152. package/lib/pagination/pagination.less +25 -24
  153. package/lib/pagination/pagination.variable.css +62 -62
  154. package/lib/plugin-popover/index.js +53 -54
  155. package/lib/plugins/index.js +0 -1
  156. package/lib/pop-confirm/index.js +28 -42
  157. package/lib/pop-confirm/pop-confirm.css +10 -10
  158. package/lib/pop-confirm/pop-confirm.less +11 -14
  159. package/lib/pop-confirm/pop-confirm.variable.css +12 -12
  160. package/lib/popover/index.js +52 -54
  161. package/lib/popover/popover.css +5 -5
  162. package/lib/popover/popover.less +6 -5
  163. package/lib/popover/popover.variable.css +7 -7
  164. package/lib/popover2/index.js +3 -4
  165. package/lib/preset.js +64 -18
  166. package/lib/process/index.js +26 -27
  167. package/lib/process/process.css +33 -36
  168. package/lib/process/process.less +7 -8
  169. package/lib/process/process.variable.css +35 -38
  170. package/lib/progress/index.js +26 -28
  171. package/lib/progress/progress.css +33 -33
  172. package/lib/progress/progress.less +5 -6
  173. package/lib/progress/progress.variable.css +35 -35
  174. package/lib/radio/index.js +32 -34
  175. package/lib/radio/radio.css +51 -51
  176. package/lib/radio/radio.less +20 -13
  177. package/lib/radio/radio.variable.css +53 -53
  178. package/lib/rate/index.js +22 -24
  179. package/lib/rate/rate.css +2 -2
  180. package/lib/rate/rate.less +1 -1
  181. package/lib/rate/rate.variable.css +4 -4
  182. package/lib/rate/star.css +7 -7
  183. package/lib/rate/star.less +1 -1
  184. package/lib/rate/star.variable.css +9 -9
  185. package/lib/resize-layout/index.js +25 -27
  186. package/lib/resize-layout/resize-layout.css +42 -42
  187. package/lib/resize-layout/resize-layout.less +10 -17
  188. package/lib/resize-layout/resize-layout.variable.css +44 -44
  189. package/lib/search-select/index.js +49 -68
  190. package/lib/search-select/search-select.css +15 -15
  191. package/lib/search-select/search-select.variable.css +17 -17
  192. package/lib/select/index.js +129 -168
  193. package/lib/select/select.css +87 -87
  194. package/lib/select/select.less +22 -27
  195. package/lib/select/select.variable.css +89 -89
  196. package/lib/shared/index.js +4 -7
  197. package/lib/sideslider/index.js +14 -22
  198. package/lib/sideslider/sideslider.css +14 -14
  199. package/lib/sideslider/sideslider.less +13 -9
  200. package/lib/sideslider/sideslider.variable.css +16 -16
  201. package/lib/slider/index.js +22 -36
  202. package/lib/slider/slider.css +31 -31
  203. package/lib/slider/slider.less +8 -8
  204. package/lib/slider/slider.variable.css +33 -33
  205. package/lib/steps/index.js +28 -30
  206. package/lib/steps/steps.css +134 -134
  207. package/lib/steps/steps.less +48 -44
  208. package/lib/steps/steps.variable.css +136 -136
  209. package/lib/styles/mixins/animate.css +4 -4
  210. package/lib/styles/mixins/animate.less +3 -3
  211. package/lib/styles/mixins/animate.variable.css +6 -6
  212. package/lib/styles/mixins/mixins.css +15 -15
  213. package/lib/styles/mixins/mixins.variable.css +15 -15
  214. package/lib/styles/mixins/popper.css +11 -11
  215. package/lib/styles/mixins/popper.less +6 -6
  216. package/lib/styles/mixins/popper.variable.css +13 -13
  217. package/lib/styles/mixins/scroll.css +5 -5
  218. package/lib/styles/mixins/scroll.less +4 -4
  219. package/lib/styles/mixins/scroll.variable.css +7 -7
  220. package/lib/styles/reset.css +6 -6
  221. package/lib/styles/reset.less +5 -4
  222. package/lib/styles/reset.variable.css +8 -8
  223. package/lib/styles/themes/themes.less +10 -3
  224. package/lib/swiper/index.js +14 -16
  225. package/lib/swiper/swiper.css +15 -15
  226. package/lib/swiper/swiper.less +8 -8
  227. package/lib/swiper/swiper.variable.css +17 -17
  228. package/lib/switcher/index.js +29 -31
  229. package/lib/switcher/switcher.css +57 -57
  230. package/lib/switcher/switcher.less +22 -14
  231. package/lib/switcher/switcher.variable.css +59 -59
  232. package/lib/tab/index.js +44 -46
  233. package/lib/tab/tab.css +78 -78
  234. package/lib/tab/tab.less +39 -40
  235. package/lib/tab/tab.variable.css +80 -80
  236. package/lib/table/components/table-column.d.ts +1 -0
  237. package/lib/table/index.d.ts +1 -0
  238. package/lib/table/index.js +168 -207
  239. package/lib/table/plugins/head-filter.css +13 -13
  240. package/lib/table/plugins/head-filter.less +3 -3
  241. package/lib/table/plugins/head-filter.variable.css +15 -15
  242. package/lib/table/plugins/head-sort.css +5 -5
  243. package/lib/table/plugins/head-sort.less +2 -2
  244. package/lib/table/plugins/head-sort.variable.css +7 -7
  245. package/lib/table/plugins/settings.css +26 -26
  246. package/lib/table/plugins/settings.less +3 -1
  247. package/lib/table/plugins/settings.variable.css +28 -28
  248. package/lib/table/table.css +380 -380
  249. package/lib/table/table.less +14 -10
  250. package/lib/table/table.variable.css +382 -382
  251. package/lib/table-column/index.d.ts +3 -0
  252. package/lib/table-column/index.js +57 -43
  253. package/lib/tag/index.js +19 -21
  254. package/lib/tag/tag.css +51 -51
  255. package/lib/tag/tag.less +34 -34
  256. package/lib/tag/tag.variable.css +53 -53
  257. package/lib/tag-input/index.js +65 -80
  258. package/lib/tag-input/tag-input.css +38 -38
  259. package/lib/tag-input/tag-input.less +3 -3
  260. package/lib/tag-input/tag-input.variable.css +40 -40
  261. package/lib/time-picker/index.d.ts +3 -0
  262. package/lib/time-picker/index.js +7 -9
  263. package/lib/time-picker/time-picker.css +40 -40
  264. package/lib/time-picker/time-picker.less +44 -76
  265. package/lib/time-picker/time-picker.variable.css +42 -42
  266. package/lib/timeline/index.js +12 -13
  267. package/lib/timeline/timeline.css +69 -69
  268. package/lib/timeline/timeline.less +12 -6
  269. package/lib/timeline/timeline.variable.css +71 -71
  270. package/lib/transfer/index.js +36 -51
  271. package/lib/transfer/transfer.css +89 -89
  272. package/lib/transfer/transfer.less +1 -1
  273. package/lib/transfer/transfer.variable.css +91 -91
  274. package/lib/tree/index.js +72 -92
  275. package/lib/tree/tree.css +49 -49
  276. package/lib/tree/tree.less +7 -6
  277. package/lib/tree/tree.variable.css +51 -51
  278. package/lib/upload/index.js +48 -63
  279. package/lib/upload/upload.css +98 -98
  280. package/lib/upload/upload.less +69 -68
  281. package/lib/upload/upload.variable.css +100 -100
  282. package/lib/virtual-render/index.js +33 -35
  283. package/lib/virtual-render/virtual-render.css +9 -9
  284. package/lib/virtual-render/virtual-render.less +1 -1
  285. package/lib/virtual-render/virtual-render.variable.css +11 -11
  286. package/package.json +2 -2
  287. package/lib/styles/themes/themes copy.less +0 -167
package/lib/steps/steps.css CHANGED
@@ -7,92 +7,12 @@
7
7
  transform: rotate(360deg);
8
8
  }
9
9
  }
10
- :where(.bk-steps) {
10
+ .bk-steps {
11
11
  display: flex;
12
12
  width: 100%;
13
13
  font-size: 0;
14
14
  }
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 {
15
+ .bk-steps .icon-circle-4-1 {
96
16
  width: 12px;
97
17
  height: 12px;
98
18
  border: 2px solid #fff;
@@ -101,16 +21,16 @@
101
21
  border-left: 0;
102
22
  border-radius: 7px;
103
23
  }
104
- :where(.bk-steps) .bk-icon {
24
+ .bk-steps .bk-icon {
105
25
  font-size: 24px;
106
26
  line-height: 24px;
107
27
  }
108
- :where(.bk-steps) .bk-icon.icon-loading {
28
+ .bk-steps .bk-icon.icon-loading {
109
29
  display: inline-block;
110
30
  font-size: 14px;
111
31
  animation: loadingCircle 1s infinite linear;
112
32
  }
113
- :where(.bk-steps) .bk-step {
33
+ .bk-steps .bk-step {
114
34
  position: relative;
115
35
  margin-right: 16px;
116
36
  overflow: hidden;
@@ -118,7 +38,7 @@
118
38
  white-space: nowrap;
119
39
  flex: 1;
120
40
  }
121
- :where(.bk-steps) .bk-step .bk-step-indicator {
41
+ .bk-steps .bk-step .bk-step-indicator {
122
42
  z-index: 1;
123
43
  display: inline-flex;
124
44
  width: 24px;
@@ -136,15 +56,15 @@
136
56
  align-items: center;
137
57
  justify-content: center;
138
58
  }
139
- :where(.bk-steps) .bk-step .bk-step-number {
59
+ .bk-steps .bk-step .bk-step-number {
140
60
  font-family: arial;
141
61
  font-size: 14px;
142
62
  }
143
- :where(.bk-steps) .bk-step .bk-step-content {
63
+ .bk-steps .bk-step .bk-step-content {
144
64
  display: inline-block;
145
65
  vertical-align: top;
146
66
  }
147
- :where(.bk-steps) .bk-step .bk-step-title {
67
+ .bk-steps .bk-step .bk-step-title {
148
68
  position: relative;
149
69
  display: inline-block;
150
70
  padding-right: 16px;
@@ -153,7 +73,7 @@
153
73
  color: #63656e;
154
74
  word-break: break-all;
155
75
  }
156
- :where(.bk-steps) .bk-step .bk-step-title::after {
76
+ .bk-steps .bk-step .bk-step-title::after {
157
77
  position: absolute;
158
78
  top: 12px;
159
79
  left: 100%;
@@ -162,16 +82,16 @@
162
82
  background-color: transparent;
163
83
  content: '';
164
84
  }
165
- :where(.bk-steps) .bk-step .bk-step-description {
85
+ .bk-steps .bk-step .bk-step-description {
166
86
  max-width: 140px;
167
87
  font-size: 12px;
168
88
  color: #979ba5;
169
89
  white-space: normal;
170
90
  }
171
- :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator {
91
+ .bk-steps .bk-step.bk-step-no-content .bk-step-indicator {
172
92
  margin-right: 0;
173
93
  }
174
- :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator::after {
94
+ .bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
175
95
  position: absolute;
176
96
  top: 12px;
177
97
  left: 100%;
@@ -180,87 +100,167 @@
180
100
  background-color: transparent;
181
101
  content: '';
182
102
  }
183
- :where(.bk-steps) .bk-step.bk-step-no-content .bk-step-indicator::after {
103
+ .bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
184
104
  top: 10px;
185
105
  left: 32px;
186
106
  }
187
- :where(.bk-steps) .bk-step:last-child {
107
+ .bk-steps .bk-step:last-child {
188
108
  margin-right: 0;
189
109
  flex: none;
190
110
  }
191
- :where(.bk-steps) .bk-step:last-child .bk-step-title {
111
+ .bk-steps .bk-step:last-child .bk-step-title {
192
112
  padding-right: 0;
193
113
  }
194
- :where(.bk-steps) .bk-step:last-child .bk-step-title::after {
114
+ .bk-steps .bk-step:last-child .bk-step-title::after {
195
115
  display: none;
196
116
  }
197
- :where(.bk-steps) .bk-step.done .bk-step-title {
117
+ .bk-steps .bk-step.done .bk-step-title {
198
118
  color: #63656e;
199
119
  }
200
- :where(.bk-steps) .bk-step.done .bk-step-description {
120
+ .bk-steps .bk-step.done .bk-step-description {
201
121
  color: #979ba5;
202
122
  }
203
- :where(.bk-steps) .bk-step.done .bk-steps-icon {
123
+ .bk-steps .bk-step.done .bk-steps-icon {
204
124
  margin-bottom: 3px;
205
125
  font-size: 22px;
206
126
  }
207
- :where(.bk-steps) .bk-step.done .bk-step-iconerror .bk-steps-icon {
127
+ .bk-steps .bk-step.done .bk-step-iconerror .bk-steps-icon {
208
128
  font-size: 14px;
209
129
  }
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 {
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 {
214
134
  background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
215
135
  }
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 {
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 {
219
139
  border-width: 2px;
220
140
  }
221
- :where(.bk-steps) .bk-step.current .bk-step-title,
222
- :where(.bk-steps) .bk-step.current .bk-step-description {
141
+ .bk-steps .bk-step.current .bk-step-title,
142
+ .bk-steps .bk-step.current .bk-step-description {
223
143
  color: #63656e;
224
144
  }
225
- :where(.bk-steps) .bk-step.current.bk-step-error .bk-step-indicator {
145
+ .bk-steps .bk-step.current.bk-step-error .bk-step-indicator {
226
146
  background-color: #ea3636;
227
147
  border-color: #ea3636;
228
148
  }
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 {
149
+ .bk-steps .bk-step.current.bk-step-error .bk-step-title,
150
+ .bk-steps .bk-step.current.bk-step-error .bk-step-description {
231
151
  color: #ea3636;
232
152
  }
233
- :where(.bk-steps) .bk-step.is-error .bk-step-indicator {
153
+ .bk-steps .bk-step.is-error .bk-step-indicator {
234
154
  background-color: #ea3636 !important;
235
155
  border-color: #ea3636 !important;
236
156
  }
237
- :where(.bk-steps) .bk-step.is-error .bk-step-content .bk-step-title {
157
+ .bk-steps .bk-step.is-error .bk-step-content .bk-step-title {
238
158
  color: #ea3636 !important;
239
159
  }
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 {
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 {
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
- :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 {
247
+ .bk-steps-solid .bk-step .bk-step-title::after,
248
+ .bk-steps-solid .bk-step .bk-step-indicator::after {
249
249
  background-color: #c4c6cc;
250
250
  }
251
- :where(.bk-steps) .bk-steps-vertical {
251
+ .bk-steps-vertical {
252
252
  flex-direction: column;
253
253
  height: 100%;
254
254
  }
255
- :where(.bk-steps) .bk-steps-vertical .bk-step {
255
+ .bk-steps-vertical .bk-step {
256
256
  margin-right: 0;
257
257
  margin-bottom: 8px;
258
258
  }
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 {
259
+ .bk-steps-vertical .bk-step .bk-step-title::after,
260
+ .bk-steps-vertical .bk-step .bk-step-indicator::after {
261
261
  display: none;
262
262
  }
263
- :where(.bk-steps) .bk-steps-vertical .bk-step::after {
263
+ .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
- :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 {
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 {
277
277
  background-image: linear-gradient(#ea3636 50%, transparent 0%);
278
278
  }
279
- :where(.bk-steps) .bk-steps-vertical .bk-step .bk-step-title {
279
+ .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
- :where(.bk-steps) .bk-steps-small .bk-step .bk-step-indicator {
286
+ .bk-steps-small .bk-step .bk-step-indicator {
287
287
  width: 20px;
288
288
  height: 20px;
289
289
  line-height: 20px;
290
290
  }
291
- :where(.bk-steps) .bk-steps-small .bk-step .bk-step-title {
291
+ .bk-steps-small .bk-step .bk-step-title {
292
292
  font-size: 12px;
293
293
  line-height: 20px;
294
294
  }
295
- :where(.bk-steps) .bk-steps-small .bk-step .bk-step-number {
295
+ .bk-steps-small .bk-step .bk-step-number {
296
296
  font-size: 12px;
297
297
  }
298
- :where(.bk-steps) .bk-steps-small .bk-step .bk-step-icon {
298
+ .bk-steps-small .bk-step .bk-step-icon {
299
299
  font-size: 14px;
300
300
  line-height: 14px;
301
301
  }
302
- :where(.bk-steps) .bk-steps-small .bk-step::after {
302
+ .bk-steps-small .bk-step::after {
303
303
  top: 28px;
304
304
  left: 10px;
305
305
  }
306
- :where(.bk-steps) .bk-steps-small .bk-step .bk-step-title::after {
306
+ .bk-steps-small .bk-step .bk-step-title::after {
307
307
  top: 10px;
308
308
  }
309
- :where(.bk-steps) .bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after {
309
+ .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,56 +19,18 @@
19
19
  }
20
20
  }
21
21
 
22
+
22
23
  @keyframes loadingCircle {
23
24
  100% {
24
25
  transform: rotate(360deg);
25
26
  }
26
27
  }
27
28
 
28
- :where(.@{bk-prefix}-steps) {
29
+ .@{bk-prefix}-steps {
29
30
  display: flex;
30
31
  width: 100%;
31
32
  font-size: 0;
32
33
 
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
-
72
34
  .icon-circle-4-1 {
73
35
  width: 12px;
74
36
  height: 12px;
@@ -147,6 +109,7 @@
147
109
  font-size: 12px;
148
110
  color: #979ba5;
149
111
  white-space: normal;
112
+
150
113
  }
151
114
 
152
115
  &.@{bk-prefix}-step-no-content {
@@ -244,7 +207,47 @@
244
207
  }
245
208
  }
246
209
 
247
- .@{bk-prefix}-steps-dashed {
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 {
248
251
  .@{bk-prefix}-step {
249
252
  .@{bk-prefix}-step-title,
250
253
  .@{bk-prefix}-step-indicator {
@@ -258,7 +261,7 @@
258
261
  }
259
262
  }
260
263
 
261
- .@{bk-prefix}-steps-solid {
264
+ &-solid {
262
265
  .@{bk-prefix}-step {
263
266
  .@{bk-prefix}-step-title,
264
267
  .@{bk-prefix}-step-indicator {
@@ -269,7 +272,7 @@
269
272
  }
270
273
  }
271
274
 
272
- .@{bk-prefix}-steps-vertical {
275
+ &-vertical {
273
276
  flex-direction: column;
274
277
  height: 100%;
275
278
 
@@ -316,7 +319,8 @@
316
319
  }
317
320
  }
318
321
 
319
- .@{bk-prefix}-steps-small {
322
+
323
+ &-small {
320
324
  .@{bk-prefix}-step {
321
325
  .@{bk-prefix}-step-indicator {
322
326
  width: 20px;