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/affix/affix.css CHANGED
@@ -1,3 +1,3 @@
1
- .bk-affix {
1
+ :where(.bk-affix) {
2
2
  position: fixed;
3
3
  }
package/lib/affix/affix.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-affix {
4
- position: fixed
3
+ :where(.@{bk-prefix}-affix) {
4
+ position: fixed;
5
5
  }
package/lib/affix/affix.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,6 +127,6 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-affix {
130
+ :where(.bk-affix) {
131
131
  position: fixed;
132
132
  }
package/lib/alert/alert.css CHANGED
@@ -1,4 +1,4 @@
1
- .bk-alert {
1
+ :where(.bk-alert) {
2
2
  position: relative;
3
3
  font-size: 12px;
4
4
  color: #63656e;
@@ -7,62 +7,62 @@
7
7
  border: 1px solid;
8
8
  border-radius: 2px;
9
9
  }
10
- .bk-alert .bk-alert-icon-info {
10
+ :where(.bk-alert) .bk-alert-icon-info {
11
11
  display: flex;
12
12
  height: 16px;
13
13
  margin-right: 8px;
14
14
  font-size: 16px;
15
15
  line-height: 1;
16
16
  }
17
- .bk-alert-wraper {
17
+ :where(.bk-alert-wraper) {
18
18
  display: flex;
19
19
  padding: 8px 10px;
20
20
  }
21
- .bk-alert-info {
21
+ :where(.bk-alert-info) {
22
22
  background-color: #f0f8ff;
23
23
  border-color: #c5daff;
24
24
  }
25
- .bk-alert-info .bk-alert-icon-info {
25
+ :where(.bk-alert-info) .bk-alert-icon-info {
26
26
  color: #3a84ff;
27
27
  }
28
- .bk-alert-success {
28
+ :where(.bk-alert-success) {
29
29
  background-color: #f2fff4;
30
30
  border-color: #94f5a4;
31
31
  }
32
- .bk-alert-success .bk-alert-icon-info {
32
+ :where(.bk-alert-success) .bk-alert-icon-info {
33
33
  color: #2dcb56;
34
34
  }
35
- .bk-alert-warning {
35
+ :where(.bk-alert-warning) {
36
36
  background-color: #fff4e2;
37
37
  border-color: #ffdfac;
38
38
  }
39
- .bk-alert-warning .bk-alert-icon-info {
39
+ :where(.bk-alert-warning) .bk-alert-icon-info {
40
40
  color: #ff9c01;
41
41
  }
42
- .bk-alert-danger {
42
+ :where(.bk-alert-danger) {
43
43
  background-color: #ffeded;
44
44
  border-color: #ffd2d2;
45
45
  }
46
- .bk-alert-danger .bk-alert-icon-info {
46
+ :where(.bk-alert-danger) .bk-alert-icon-info {
47
47
  color: #ea3636;
48
48
  }
49
- .bk-alert-error {
49
+ :where(.bk-alert-error) {
50
50
  background-color: #ffeded;
51
51
  border-color: #ffd2d2;
52
52
  }
53
- .bk-alert-error .bk-alert-icon-info {
53
+ :where(.bk-alert-error) .bk-alert-icon-info {
54
54
  color: #ea3636;
55
55
  }
56
- .bk-alert-content {
56
+ :where(.bk-alert-content) {
57
57
  display: flex;
58
58
  flex: 1;
59
59
  flex-direction: column;
60
60
  overflow: hidden;
61
61
  }
62
- .bk-alert-title {
62
+ :where(.bk-alert-title) {
63
63
  line-height: 16px;
64
64
  }
65
- .bk-alert-close {
65
+ :where(.bk-alert-close) {
66
66
  padding: 8px 12px 0 6px;
67
67
  margin-top: -8px;
68
68
  margin-right: -10px;
@@ -71,19 +71,19 @@
71
71
  white-space: nowrap;
72
72
  cursor: pointer;
73
73
  }
74
- .bk-alert-close:hover {
74
+ :where(.bk-alert-close):hover {
75
75
  color: #979ba5;
76
76
  }
77
- .bk-alert-close-icon {
77
+ :where(.bk-alert-close-icon) {
78
78
  line-height: 1;
79
79
  }
80
- .bk-alert-leave-leave {
80
+ :where(.bk-alert-leave-leave) {
81
81
  opacity: 1;
82
82
  }
83
- .bk-alert-leave-leave-active {
83
+ :where(.bk-alert-leave-leave-active) {
84
84
  overflow: hidden;
85
85
  transition: opacity 0.15s, height 0.2s;
86
86
  }
87
- .bk-alert-leave-leave-to {
87
+ :where(.bk-alert-leave-leave-to) {
88
88
  opacity: 0;
89
89
  }
package/lib/alert/alert.less CHANGED
@@ -16,7 +16,7 @@
16
16
  @danger-background-color: #ffeded;
17
17
  @danger-icon-color: #ea3636;
18
18
 
19
- .@{bk-prefix}-alert {
19
+ :where(.@{bk-prefix}-alert) {
20
20
  position: relative;
21
21
  font-size: @font-size-base;
22
22
  color: #63656e;
@@ -32,15 +32,14 @@
32
32
  font-size: 16px;
33
33
  line-height: 1;
34
34
  }
35
-
36
35
  }
37
36
 
38
- .@{bk-prefix}-alert-wraper {
37
+ :where(.@{bk-prefix}-alert-wraper) {
39
38
  display: flex;
40
39
  padding: 8px 10px;
41
40
  }
42
41
 
43
- .@{bk-prefix}-alert-info {
42
+ :where(.@{bk-prefix}-alert-info) {
44
43
  background-color: @info-background-color;
45
44
  border-color: @info-border-color;
46
45
 
@@ -49,7 +48,7 @@
49
48
  }
50
49
  }
51
50
 
52
- .@{bk-prefix}-alert-success {
51
+ :where(.@{bk-prefix}-alert-success) {
53
52
  background-color: @success-background-color;
54
53
  border-color: @success-border-color;
55
54
 
@@ -58,7 +57,7 @@
58
57
  }
59
58
  }
60
59
 
61
- .@{bk-prefix}-alert-warning {
60
+ :where(.@{bk-prefix}-alert-warning) {
62
61
  background-color: @warning-background-color;
63
62
  border-color: @warning-border-color;
64
63
 
@@ -67,7 +66,7 @@
67
66
  }
68
67
  }
69
68
 
70
- .@{bk-prefix}-alert-danger {
69
+ :where(.@{bk-prefix}-alert-danger) {
71
70
  background-color: @danger-background-color;
72
71
  border-color: @danger-border-color;
73
72
 
@@ -76,7 +75,7 @@
76
75
  }
77
76
  }
78
77
  // 兼容历史 prop theme 的配置 error 调整为danger
79
- .@{bk-prefix}-alert-error {
78
+ :where(.@{bk-prefix}-alert-error) {
80
79
  background-color: @danger-background-color;
81
80
  border-color: @danger-border-color;
82
81
 
@@ -86,18 +85,18 @@
86
85
  }
87
86
  // 兼容历史 prop theme 的配置 error 调整为danger
88
87
 
89
- .@{bk-prefix}-alert-content {
88
+ :where(.@{bk-prefix}-alert-content) {
90
89
  display: flex;
91
90
  flex: 1;
92
91
  flex-direction: column;
93
92
  overflow: hidden;
94
93
  }
95
94
 
96
- .@{bk-prefix}-alert-title {
95
+ :where(.@{bk-prefix}-alert-title) {
97
96
  line-height: 16px;
98
97
  }
99
98
 
100
- .@{bk-prefix}-alert-close {
99
+ :where(.@{bk-prefix}-alert-close) {
101
100
  padding: 8px 12px 0 6px;
102
101
  margin-top: -8px;
103
102
  margin-right: -10px;
@@ -111,19 +110,21 @@
111
110
  }
112
111
  }
113
112
 
114
- .@{bk-prefix}-alert-close-icon {
113
+ :where(.@{bk-prefix}-alert-close-icon) {
115
114
  line-height: 1;
116
115
  }
117
116
 
118
- .@{bk-prefix}-alert-leave-leave {
117
+ :where(.@{bk-prefix}-alert-leave-leave) {
119
118
  opacity: 1;
120
119
  }
121
120
 
122
- .@{bk-prefix}-alert-leave-leave-active {
121
+ :where(.@{bk-prefix}-alert-leave-leave-active) {
123
122
  overflow: hidden;
124
- transition: opacity .15s, height .2s;
123
+ transition:
124
+ opacity 0.15s,
125
+ height 0.2s;
125
126
  }
126
127
 
127
- .@{bk-prefix}-alert-leave-leave-to {
128
+ :where(.@{bk-prefix}-alert-leave-leave-to) {
128
129
  opacity: 0;
129
130
  }
package/lib/alert/alert.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-alert {
130
+ :where(.bk-alert) {
131
131
  position: relative;
132
132
  font-size: var(--font-size-base);
133
133
  color: #63656e;
@@ -136,62 +136,62 @@
136
136
  border: var(--border-width-base) var(--border-style-base);
137
137
  border-radius: var(--border-radius-base);
138
138
  }
139
- .bk-alert .bk-alert-icon-info {
139
+ :where(.bk-alert) .bk-alert-icon-info {
140
140
  display: flex;
141
141
  height: 16px;
142
142
  margin-right: 8px;
143
143
  font-size: 16px;
144
144
  line-height: 1;
145
145
  }
146
- .bk-alert-wraper {
146
+ :where(.bk-alert-wraper) {
147
147
  display: flex;
148
148
  padding: 8px 10px;
149
149
  }
150
- .bk-alert-info {
150
+ :where(.bk-alert-info) {
151
151
  background-color: #f0f8ff;
152
152
  border-color: #c5daff;
153
153
  }
154
- .bk-alert-info .bk-alert-icon-info {
154
+ :where(.bk-alert-info) .bk-alert-icon-info {
155
155
  color: #3a84ff;
156
156
  }
157
- .bk-alert-success {
157
+ :where(.bk-alert-success) {
158
158
  background-color: #f2fff4;
159
159
  border-color: #94f5a4;
160
160
  }
161
- .bk-alert-success .bk-alert-icon-info {
161
+ :where(.bk-alert-success) .bk-alert-icon-info {
162
162
  color: #2dcb56;
163
163
  }
164
- .bk-alert-warning {
164
+ :where(.bk-alert-warning) {
165
165
  background-color: #fff4e2;
166
166
  border-color: #ffdfac;
167
167
  }
168
- .bk-alert-warning .bk-alert-icon-info {
168
+ :where(.bk-alert-warning) .bk-alert-icon-info {
169
169
  color: #ff9c01;
170
170
  }
171
- .bk-alert-danger {
171
+ :where(.bk-alert-danger) {
172
172
  background-color: #ffeded;
173
173
  border-color: #ffd2d2;
174
174
  }
175
- .bk-alert-danger .bk-alert-icon-info {
175
+ :where(.bk-alert-danger) .bk-alert-icon-info {
176
176
  color: #ea3636;
177
177
  }
178
- .bk-alert-error {
178
+ :where(.bk-alert-error) {
179
179
  background-color: #ffeded;
180
180
  border-color: #ffd2d2;
181
181
  }
182
- .bk-alert-error .bk-alert-icon-info {
182
+ :where(.bk-alert-error) .bk-alert-icon-info {
183
183
  color: #ea3636;
184
184
  }
185
- .bk-alert-content {
185
+ :where(.bk-alert-content) {
186
186
  display: flex;
187
187
  flex: 1;
188
188
  flex-direction: column;
189
189
  overflow: hidden;
190
190
  }
191
- .bk-alert-title {
191
+ :where(.bk-alert-title) {
192
192
  line-height: 16px;
193
193
  }
194
- .bk-alert-close {
194
+ :where(.bk-alert-close) {
195
195
  padding: 8px 12px 0 6px;
196
196
  margin-top: -8px;
197
197
  margin-right: -10px;
@@ -200,19 +200,19 @@
200
200
  white-space: nowrap;
201
201
  cursor: pointer;
202
202
  }
203
- .bk-alert-close:hover {
203
+ :where(.bk-alert-close):hover {
204
204
  color: #979ba5;
205
205
  }
206
- .bk-alert-close-icon {
206
+ :where(.bk-alert-close-icon) {
207
207
  line-height: 1;
208
208
  }
209
- .bk-alert-leave-leave {
209
+ :where(.bk-alert-leave-leave) {
210
210
  opacity: 1;
211
211
  }
212
- .bk-alert-leave-leave-active {
212
+ :where(.bk-alert-leave-leave-active) {
213
213
  overflow: hidden;
214
214
  transition: opacity 0.15s, height 0.2s;
215
215
  }
216
- .bk-alert-leave-leave-to {
216
+ :where(.bk-alert-leave-leave-to) {
217
217
  opacity: 0;
218
218
  }
package/lib/backtop/backtop.css CHANGED
@@ -11,15 +11,15 @@
11
11
  background-color: transparent;
12
12
  }
13
13
  }
14
- .bk-transition .bk-fade-enter-active,
15
- .bk-transition .bk-fade-leave-active {
14
+ :where(.bk-transition) .bk-fade-enter-active,
15
+ :where(.bk-transition) .bk-fade-leave-active {
16
16
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
17
17
  }
18
- .bk-transition .bk-fade-enter,
19
- .bk-transition .bk-fade-leave-to {
18
+ :where(.bk-transition) .bk-fade-enter,
19
+ :where(.bk-transition) .bk-fade-leave-to {
20
20
  opacity: 0;
21
21
  }
22
- .bk-backtop {
22
+ :where(.bk-backtop) {
23
23
  position: fixed;
24
24
  display: flex;
25
25
  width: 52px;
@@ -32,19 +32,19 @@
32
32
  align-items: center;
33
33
  justify-content: center;
34
34
  }
35
- .bk-backtop:hover .bk-backtop-icon {
35
+ :where(.bk-backtop):hover .bk-backtop-icon {
36
36
  color: #3a84ff;
37
37
  }
38
- .bk-backtop .bk-backtop-icon {
38
+ :where(.bk-backtop) .bk-backtop-icon {
39
39
  display: flex;
40
40
  align-items: center;
41
41
  font-size: 26px;
42
42
  }
43
- .bk-fade-transtion .bk-fade-enter-active,
44
- .bk-fade-transtion .bk-fade-leave-active {
43
+ :where(.bk-fade-transtion) .bk-fade-enter-active,
44
+ :where(.bk-fade-transtion) .bk-fade-leave-active {
45
45
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
46
46
  }
47
- .bk-fade-transtion .bk-fade-enter,
48
- .bk-fade-transtion .bk-fade-leave-to {
47
+ :where(.bk-fade-transtion) .bk-fade-enter,
48
+ :where(.bk-fade-transtion) .bk-fade-leave-to {
49
49
  opacity: 0;
50
50
  }
package/lib/backtop/backtop.less CHANGED
@@ -1,7 +1,7 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import '../styles/mixins/animate.less';
3
3
 
4
- .@{bk-prefix}-backtop {
4
+ :where(.@{bk-prefix}-backtop) {
5
5
  position: fixed;
6
6
  display: flex;
7
7
  width: 52px;
@@ -23,6 +23,6 @@
23
23
  }
24
24
  }
25
25
 
26
- .@{bk-prefix}-fade-transtion {
26
+ :where(.@{bk-prefix}-fade-transtion) {
27
27
  .fade-transition();
28
- };
28
+ }
package/lib/backtop/backtop.variable.css CHANGED
@@ -12,13 +12,13 @@
12
12
  --whitesmoke-color: #fafbfd;
13
13
  --disable-color: #dcdee5;
14
14
  --disable-bg-color: #f9fafd;
15
- --border-color: #dcdee5;
16
15
  --font-size-base: 12px;
17
16
  --font-size-medium: 14px;
18
17
  --font-size-large: 16px;
19
18
  --line-height-base: 16px;
20
19
  --line-height-medium: 16px;
21
20
  --line-height-large: 18px;
21
+ --border-color: #dcdee5;
22
22
  --component-size-small: 26px;
23
23
  --component-size-base: 32px;
24
24
  --component-size-large: 40px;
@@ -111,7 +111,7 @@
111
111
  --table-border-color: #dcdee5;
112
112
  --table-head-bg-color: #fafbfd;
113
113
  --table-head-font-color: #313238;
114
- --table-body-font-color: #63656E;
114
+ --table-body-font-color: #63656e;
115
115
  --table-row-hover-bg-color: #f5f7fa;
116
116
  --table-row-active-bg-color: #f0f1f5;
117
117
  --cascader-panel-border-color: #dcdee5;
@@ -140,15 +140,15 @@
140
140
  background-color: transparent;
141
141
  }
142
142
  }
143
- .bk-transition .bk-fade-enter-active,
144
- .bk-transition .bk-fade-leave-active {
143
+ :where(.bk-transition) .bk-fade-enter-active,
144
+ :where(.bk-transition) .bk-fade-leave-active {
145
145
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
146
146
  }
147
- .bk-transition .bk-fade-enter,
148
- .bk-transition .bk-fade-leave-to {
147
+ :where(.bk-transition) .bk-fade-enter,
148
+ :where(.bk-transition) .bk-fade-leave-to {
149
149
  opacity: 0;
150
150
  }
151
- .bk-backtop {
151
+ :where(.bk-backtop) {
152
152
  position: fixed;
153
153
  display: flex;
154
154
  width: 52px;
@@ -161,19 +161,19 @@
161
161
  align-items: center;
162
162
  justify-content: center;
163
163
  }
164
- .bk-backtop:hover .bk-backtop-icon {
164
+ :where(.bk-backtop):hover .bk-backtop-icon {
165
165
  color: #3a84ff;
166
166
  }
167
- .bk-backtop .bk-backtop-icon {
167
+ :where(.bk-backtop) .bk-backtop-icon {
168
168
  display: flex;
169
169
  align-items: center;
170
170
  font-size: 26px;
171
171
  }
172
- .bk-fade-transtion .bk-fade-enter-active,
173
- .bk-fade-transtion .bk-fade-leave-active {
172
+ :where(.bk-fade-transtion) .bk-fade-enter-active,
173
+ :where(.bk-fade-transtion) .bk-fade-leave-active {
174
174
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
175
175
  }
176
- .bk-fade-transtion .bk-fade-enter,
177
- .bk-fade-transtion .bk-fade-leave-to {
176
+ :where(.bk-fade-transtion) .bk-fade-enter,
177
+ :where(.bk-fade-transtion) .bk-fade-leave-to {
178
178
  opacity: 0;
179
179
  }
package/lib/badge/badge.css CHANGED
@@ -1,8 +1,8 @@
1
- .bk-badge-main {
1
+ :where(.bk-badge-main) {
2
2
  position: relative;
3
3
  display: inline-block;
4
4
  }
5
- .bk-badge-main .bk-badge {
5
+ :where(.bk-badge-main) .bk-badge {
6
6
  position: relative;
7
7
  display: inline-block;
8
8
  height: 18px;
@@ -13,112 +13,112 @@
13
13
  background-color: white;
14
14
  border-radius: 18px;
15
15
  }
16
- .bk-badge-main .bk-badge.pinned {
16
+ :where(.bk-badge-main) .bk-badge.pinned {
17
17
  position: absolute;
18
18
  }
19
- .bk-badge-main .bk-badge.pinned.top-right {
19
+ :where(.bk-badge-main) .bk-badge.pinned.top-right {
20
20
  top: 0;
21
21
  right: 0;
22
22
  transform: translate(50%, -50%) scale(1, 1);
23
23
  }
24
- .bk-badge-main .bk-badge.pinned.top-right.fade-center-enter,
25
- .bk-badge-main .bk-badge.pinned.top-right.fade-center-leave-active {
24
+ :where(.bk-badge-main) .bk-badge.pinned.top-right.fade-center-enter,
25
+ :where(.bk-badge-main) .bk-badge.pinned.top-right.fade-center-leave-active {
26
26
  opacity: 0;
27
27
  transform: translate(50%, -50%) scale(0, 0);
28
28
  }
29
- .bk-badge-main .bk-badge.pinned.right {
29
+ :where(.bk-badge-main) .bk-badge.pinned.right {
30
30
  top: 4px;
31
31
  right: 4px;
32
32
  }
33
- .bk-badge-main .bk-badge.pinned.right.fade-center-enter,
34
- .bk-badge-main .bk-badge.pinned.right.fade-center-leave-active {
33
+ :where(.bk-badge-main) .bk-badge.pinned.right.fade-center-enter,
34
+ :where(.bk-badge-main) .bk-badge.pinned.right.fade-center-leave-active {
35
35
  opacity: 0;
36
36
  transform: translate(50%, -50%) scale(0, 0);
37
37
  }
38
- .bk-badge-main .bk-badge.pinned.bottom-right {
38
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right {
39
39
  right: 0;
40
40
  bottom: 0;
41
41
  transform: translate(50%, 50%) scale(1, 1);
42
42
  }
43
- .bk-badge-main .bk-badge.pinned.bottom-right.fade-center-enter,
44
- .bk-badge-main .bk-badge.pinned.bottom-right.fade-center-leave-active {
43
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right.fade-center-enter,
44
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-right.fade-center-leave-active {
45
45
  opacity: 0;
46
46
  transform: translate(50%, 50%) scale(0, 0);
47
47
  }
48
- .bk-badge-main .bk-badge.pinned.top-left {
48
+ :where(.bk-badge-main) .bk-badge.pinned.top-left {
49
49
  top: 0;
50
50
  left: 0;
51
51
  transform: translate(-50%, -50%) scale(1, 1);
52
52
  }
53
- .bk-badge-main .bk-badge.pinned.top-left.fade-center-enter,
54
- .bk-badge-main .bk-badge.pinned.top-left.fade-center-leave-active {
53
+ :where(.bk-badge-main) .bk-badge.pinned.top-left.fade-center-enter,
54
+ :where(.bk-badge-main) .bk-badge.pinned.top-left.fade-center-leave-active {
55
55
  opacity: 0;
56
56
  transform: translate(-50%, -50%) scale(0, 0);
57
57
  }
58
- .bk-badge-main .bk-badge.pinned.bottom-left {
58
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left {
59
59
  bottom: 0;
60
60
  left: 0;
61
61
  transform: translate(-50%, 50%) scale(1, 1);
62
62
  }
63
- .bk-badge-main .bk-badge.pinned.bottom-left.fade-center-enter,
64
- .bk-badge-main .bk-badge.pinned.bottom-left.fade-center-leave-active {
63
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left.fade-center-enter,
64
+ :where(.bk-badge-main) .bk-badge.pinned.bottom-left.fade-center-leave-active {
65
65
  opacity: 0;
66
66
  transform: translate(-50%, 50%) scale(0, 0);
67
67
  }
68
- .bk-badge-main .bk-badge.bk-danger {
68
+ :where(.bk-badge-main) .bk-badge.bk-danger {
69
69
  color: white;
70
70
  background-color: #ea3636;
71
71
  border: 2px solid white;
72
72
  }
73
- .bk-badge-main .bk-badge.bk-danger.is-icon {
73
+ :where(.bk-badge-main) .bk-badge.bk-danger.is-icon {
74
74
  color: #ea3636;
75
75
  background-color: white;
76
76
  border-color: white;
77
77
  }
78
- .bk-badge-main .bk-badge.bk-warning {
78
+ :where(.bk-badge-main) .bk-badge.bk-warning {
79
79
  color: white;
80
80
  background-color: #ff9c01;
81
81
  border: 2px solid white;
82
82
  }
83
- .bk-badge-main .bk-badge.bk-warning.is-icon {
83
+ :where(.bk-badge-main) .bk-badge.bk-warning.is-icon {
84
84
  color: #ff9c01;
85
85
  background-color: white;
86
86
  border-color: white;
87
87
  }
88
- .bk-badge-main .bk-badge.bk-success {
88
+ :where(.bk-badge-main) .bk-badge.bk-success {
89
89
  color: white;
90
90
  background-color: #2dcb56;
91
91
  border: 2px solid white;
92
92
  }
93
- .bk-badge-main .bk-badge.bk-success.is-icon {
93
+ :where(.bk-badge-main) .bk-badge.bk-success.is-icon {
94
94
  color: #2dcb56;
95
95
  background-color: white;
96
96
  border-color: white;
97
97
  }
98
- .bk-badge-main .bk-badge.bk-primary {
98
+ :where(.bk-badge-main) .bk-badge.bk-primary {
99
99
  color: white;
100
100
  background-color: #3a84ff;
101
101
  border: 2px solid white;
102
102
  }
103
- .bk-badge-main .bk-badge.bk-primary.is-icon {
103
+ :where(.bk-badge-main) .bk-badge.bk-primary.is-icon {
104
104
  color: #3a84ff;
105
105
  background-color: white;
106
106
  border-color: white;
107
107
  }
108
- .bk-badge-main .bk-badge.dot {
108
+ :where(.bk-badge-main) .bk-badge.dot {
109
109
  width: 8px;
110
110
  height: 8px;
111
111
  min-width: 8px;
112
112
  padding: 0;
113
113
  border: 1px solid white;
114
114
  }
115
- .bk-badge-main .bk-badge.bk-badge-icon {
116
- margin: 0;
115
+ :where(.bk-badge-main) .bk-badge.bk-badge-icon {
116
+ display: flex;
117
+ width: 16px;
118
+ height: 16px;
117
119
  padding: 0;
120
+ margin: 0;
118
121
  font-size: 16px;
119
- display: flex;
120
122
  align-items: center;
121
123
  justify-content: center;
122
- height: 16px;
123
- width: 16px;
124
124
  }