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/modal/modal.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,71 +127,71 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
130
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper {
131
131
  width: 440px;
132
132
  }
133
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
133
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper.normal {
134
134
  width: 440px;
135
135
  }
136
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
136
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper.small {
137
137
  width: 400px;
138
138
  }
139
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
139
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
140
140
  border-radius: 2px;
141
141
  }
142
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
142
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
143
143
  padding: 24px 24px 0;
144
144
  }
145
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
145
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
146
146
  height: 27px;
147
147
  margin: 15px 0 10px;
148
148
  }
149
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
149
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
150
150
  height: 100%;
151
151
  max-height: 100%;
152
152
  min-height: 100%;
153
153
  padding: 0 50px 10px;
154
154
  word-break: break-all;
155
155
  }
156
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
156
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
157
157
  margin-bottom: 10px;
158
158
  text-align: center;
159
159
  word-break: break-all;
160
160
  }
161
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
161
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
162
162
  padding: 0 65px 33px;
163
163
  background-color: #fff;
164
164
  border-top: none;
165
165
  }
166
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
166
+ :where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
167
167
  min-width: 88px;
168
168
  }
169
- .bk-modal-ctx {
170
- pointer-events: auto;
169
+ :where(.bk-modal-ctx) {
171
170
  top: 0px;
172
171
  left: 0px;
173
172
  width: 100%;
174
173
  height: 100%;
174
+ pointer-events: auto;
175
175
  }
176
- .bk-modal-ctx.--show {
176
+ :where(.bk-modal-ctx).--show {
177
177
  position: fixed;
178
178
  }
179
- .bk-modal-ctx.--hide {
179
+ :where(.bk-modal-ctx).--hide {
180
180
  display: none;
181
181
  }
182
- .bk-modal-ctx .bk-modal-ctx-mask {
183
- display: none;
184
- left: 0;
182
+ :where(.bk-modal-ctx) .bk-modal-ctx-mask {
185
183
  top: 0;
184
+ left: 0;
185
+ display: none;
186
186
  width: 100%;
187
187
  height: 100%;
188
188
  background-color: rgba(0, 0, 0, 0.6);
189
189
  }
190
- .bk-modal-ctx .bk-modal-ctx-mask.--show {
190
+ :where(.bk-modal-ctx) .bk-modal-ctx-mask.--show {
191
191
  position: fixed;
192
192
  display: inherit;
193
193
  }
194
- .bk-modal-wrapper {
194
+ :where(.bk-modal-wrapper) {
195
195
  position: absolute;
196
196
  top: 50%;
197
197
  left: 50%;
@@ -199,32 +199,32 @@
199
199
  border-radius: 2px;
200
200
  transform: translate(-50%, -50%);
201
201
  }
202
- .bk-modal-wrapper .bk-modal-outside {
202
+ :where(.bk-modal-wrapper) .bk-modal-outside {
203
203
  position: fixed;
204
204
  top: 0;
205
205
  right: 0;
206
206
  bottom: 0;
207
207
  left: 0;
208
208
  }
209
- .bk-modal-wrapper.normal {
209
+ :where(.bk-modal-wrapper).normal {
210
210
  width: 480px;
211
211
  height: 240px;
212
212
  }
213
- .bk-modal-wrapper.small {
213
+ :where(.bk-modal-wrapper).small {
214
214
  width: 400px;
215
215
  height: 200px;
216
216
  }
217
- .bk-modal-wrapper.medium {
217
+ :where(.bk-modal-wrapper).medium {
218
218
  width: 640px;
219
219
  height: 400px;
220
220
  }
221
- .bk-modal-wrapper.large {
221
+ :where(.bk-modal-wrapper).large {
222
222
  width: 960px;
223
223
  height: 720px;
224
224
  }
225
- .bk-modal-wrapper .bk-modal-body {
226
- height: 100%;
225
+ :where(.bk-modal-wrapper) .bk-modal-body {
227
226
  width: 100%;
227
+ height: 100%;
228
228
  background: #fff;
229
229
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
230
230
  }
package/lib/navigation/navigation.css CHANGED
@@ -1,10 +1,10 @@
1
- .bk-navigation {
1
+ :where(.bk-navigation) {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  width: 100%;
5
5
  height: 100%;
6
6
  }
7
- .bk-navigation-title {
7
+ :where(.bk-navigation) .bk-navigation-title {
8
8
  display: flex;
9
9
  height: 100%;
10
10
  padding: 0 16px;
@@ -14,7 +14,7 @@
14
14
  justify-content: flex-start;
15
15
  flex: 0 0 260px;
16
16
  }
17
- .bk-navigation-title .title-icon {
17
+ :where(.bk-navigation) .bk-navigation-title .title-icon {
18
18
  display: flex;
19
19
  font-size: 28px;
20
20
  color: #768197;
@@ -22,7 +22,7 @@
22
22
  align-items: center;
23
23
  justify-content: center;
24
24
  }
25
- .bk-navigation-title .title-desc {
25
+ :where(.bk-navigation) .bk-navigation-title .title-desc {
26
26
  display: inline-block;
27
27
  margin-left: 16px;
28
28
  overflow: hidden;
@@ -32,7 +32,7 @@
32
32
  color: #96a2b9;
33
33
  white-space: nowrap;
34
34
  }
35
- .bk-navigation-header {
35
+ :where(.bk-navigation) .bk-navigation-header {
36
36
  flex: 0 0 52px;
37
37
  display: flex;
38
38
  align-items: center;
@@ -40,20 +40,20 @@
40
40
  overflow: hidden;
41
41
  background: #182132;
42
42
  }
43
- .bk-navigation-header .header-right {
43
+ :where(.bk-navigation) .bk-navigation-header .header-right {
44
44
  display: flex;
45
45
  height: 100%;
46
46
  flex: 1;
47
47
  align-items: center;
48
48
  }
49
- .bk-navigation-wrapper {
49
+ :where(.bk-navigation) .bk-navigation-wrapper {
50
50
  position: relative;
51
51
  display: flex;
52
52
  flex-direction: row;
53
53
  flex: 1;
54
54
  min-height: 0;
55
55
  }
56
- .bk-navigation-wrapper .navigation-nav {
56
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav {
57
57
  position: relative;
58
58
  z-index: 101;
59
59
  display: flex;
@@ -65,10 +65,10 @@
65
65
  flex: 0 1 auto;
66
66
  flex-direction: column;
67
67
  }
68
- .bk-navigation-wrapper .navigation-nav:hover {
68
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav:hover {
69
69
  cursor: pointer;
70
70
  }
71
- .bk-navigation-wrapper .navigation-nav .nav-slider {
71
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider {
72
72
  display: flex;
73
73
  width: 60px;
74
74
  height: 100%;
@@ -77,30 +77,30 @@
77
77
  flex: 1;
78
78
  flex-direction: column;
79
79
  }
80
- .bk-navigation-wrapper .navigation-nav .nav-slider-list {
80
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list {
81
81
  max-height: calc(100vh - 100px);
82
82
  padding: 12px 0 4px 0;
83
83
  margin: 0;
84
84
  overflow: auto;
85
85
  flex: 1 1 auto;
86
86
  }
87
- .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
87
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
88
88
  display: none;
89
89
  width: 6px;
90
90
  height: 5px;
91
91
  }
92
- .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
92
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
93
93
  transform: none;
94
94
  transition: opacity 340ms ease-out;
95
95
  }
96
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer {
96
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer {
97
97
  display: flex;
98
98
  padding-left: 14px;
99
99
  flex: 0 0 56px;
100
100
  align-items: center;
101
101
  justify-content: flex-start;
102
102
  }
103
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
103
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
104
104
  display: flex;
105
105
  width: 32px;
106
106
  height: 32px;
@@ -111,7 +111,7 @@
111
111
  justify-content: center;
112
112
  transform-origin: center center;
113
113
  }
114
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
114
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
115
115
  display: flex;
116
116
  width: 16px;
117
117
  height: 16px;
@@ -121,20 +121,20 @@
121
121
  justify-content: center;
122
122
  transform-origin: center center;
123
123
  }
124
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
124
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
125
125
  color: #96a2b9;
126
126
  }
127
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
127
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
128
128
  color: #d3d9e4;
129
129
  cursor: pointer;
130
130
  background: linear-gradient(270deg, #253047 0%, #263247 100%);
131
131
  }
132
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
132
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
133
133
  color: #3a3c42;
134
134
  cursor: pointer;
135
135
  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
136
136
  }
137
- .bk-navigation-wrapper .navigation-container {
137
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container {
138
138
  position: relative;
139
139
  display: flex;
140
140
  max-width: calc(100vw - 60px);
@@ -143,7 +143,7 @@
143
143
  flex: 1 1 1px;
144
144
  flex-direction: column;
145
145
  }
146
- .bk-navigation-wrapper .navigation-container .container-header {
146
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header {
147
147
  display: flex;
148
148
  width: 100%;
149
149
  height: 60px;
@@ -156,26 +156,26 @@
156
156
  align-items: center;
157
157
  justify-content: flex-end;
158
158
  }
159
- .bk-navigation-wrapper .navigation-container .container-header-title {
159
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header-title {
160
160
  height: 21px;
161
161
  font-size: 16px;
162
162
  line-height: 21px;
163
163
  color: #313238;
164
164
  }
165
- .bk-navigation-wrapper .navigation-container .container-header-sets {
165
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header-sets {
166
166
  display: flex;
167
167
  flex: 1 1 auto;
168
168
  align-items: center;
169
169
  justify-content: flex-end;
170
170
  }
171
- .bk-navigation-wrapper .navigation-container .container-content {
171
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-content {
172
172
  max-height: calc(100vh - 60px);
173
173
  padding: 20px 24px 0;
174
174
  overflow: auto;
175
175
  background: #f5f7fa;
176
176
  flex: 1;
177
177
  }
178
- .bk-navigation-wrapper .navigation-container .container-footer {
178
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-footer {
179
179
  display: flex;
180
180
  flex: 0 0 auto;
181
181
  flex-direction: row;
package/lib/navigation/navigation.less CHANGED
@@ -1,17 +1,17 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-navigation {
3
+ :where(.@{bk-prefix}-navigation) {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  width: 100%;
7
7
  height: 100%;
8
8
 
9
- &-title {
9
+ .@{bk-prefix}-navigation-title {
10
10
  display: flex;
11
11
  height: 100%;
12
12
  padding: 0 16px;
13
13
  overflow: hidden;
14
- border-bottom: 1px solid rgba(255, 255, 255, .05);
14
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
15
15
  align-items: center;
16
16
  justify-content: flex-start;
17
17
  flex: 0 0 260px;
@@ -37,7 +37,7 @@
37
37
  }
38
38
  }
39
39
 
40
- &-header {
40
+ .@{bk-prefix}-navigation-header {
41
41
  flex: 0 0 52px;
42
42
  display: flex;
43
43
  align-items: center;
@@ -53,7 +53,7 @@
53
53
  }
54
54
  }
55
55
 
56
- &-wrapper {
56
+ .@{bk-prefix}-navigation-wrapper {
57
57
  position: relative;
58
58
  display: flex;
59
59
  flex-direction: row;
@@ -68,7 +68,7 @@
68
68
  min-width: 0;
69
69
  min-height: 0;
70
70
  overflow: visible;
71
- transition: width cubic-bezier(.4, 0, .2, 1) .3s;
71
+ transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
72
72
  flex: 0 1 auto;
73
73
  flex-direction: column;
74
74
 
@@ -81,7 +81,7 @@
81
81
  width: 60px;
82
82
  height: 100%;
83
83
  background-color: @nav-bg-color;
84
- transition: width cubic-bezier(.4, 0, .2, 1) .3s;
84
+ transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
85
85
  flex: 1;
86
86
  flex-direction: column;
87
87
 
@@ -127,7 +127,7 @@
127
127
  width: 16px;
128
128
  height: 16px;
129
129
  font-size: 16px;
130
- transition: transform cubic-bezier(.4, 0, .2, 1) .3s;
130
+ transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
131
131
  align-items: center;
132
132
  justify-content: center;
133
133
  transform-origin: center center;
@@ -169,7 +169,7 @@
169
169
  padding: 0 24px;
170
170
  background: #fff;
171
171
  border-bottom: 1px solid #dcdee5;
172
- box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, .06);
172
+ box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);
173
173
  flex-basis: 60px;
174
174
  flex-direction: row;
175
175
  align-items: center;
package/lib/navigation/navigation.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,13 +127,13 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-navigation {
130
+ :where(.bk-navigation) {
131
131
  display: flex;
132
132
  flex-direction: column;
133
133
  width: 100%;
134
134
  height: 100%;
135
135
  }
136
- .bk-navigation-title {
136
+ :where(.bk-navigation) .bk-navigation-title {
137
137
  display: flex;
138
138
  height: 100%;
139
139
  padding: 0 16px;
@@ -143,7 +143,7 @@
143
143
  justify-content: flex-start;
144
144
  flex: 0 0 260px;
145
145
  }
146
- .bk-navigation-title .title-icon {
146
+ :where(.bk-navigation) .bk-navigation-title .title-icon {
147
147
  display: flex;
148
148
  font-size: 28px;
149
149
  color: #768197;
@@ -151,7 +151,7 @@
151
151
  align-items: center;
152
152
  justify-content: center;
153
153
  }
154
- .bk-navigation-title .title-desc {
154
+ :where(.bk-navigation) .bk-navigation-title .title-desc {
155
155
  display: inline-block;
156
156
  margin-left: 16px;
157
157
  overflow: hidden;
@@ -161,7 +161,7 @@
161
161
  color: #96a2b9;
162
162
  white-space: nowrap;
163
163
  }
164
- .bk-navigation-header {
164
+ :where(.bk-navigation) .bk-navigation-header {
165
165
  flex: 0 0 52px;
166
166
  display: flex;
167
167
  align-items: center;
@@ -169,20 +169,20 @@
169
169
  overflow: hidden;
170
170
  background: var(--nav-header-bg-color);
171
171
  }
172
- .bk-navigation-header .header-right {
172
+ :where(.bk-navigation) .bk-navigation-header .header-right {
173
173
  display: flex;
174
174
  height: 100%;
175
175
  flex: 1;
176
176
  align-items: center;
177
177
  }
178
- .bk-navigation-wrapper {
178
+ :where(.bk-navigation) .bk-navigation-wrapper {
179
179
  position: relative;
180
180
  display: flex;
181
181
  flex-direction: row;
182
182
  flex: 1;
183
183
  min-height: 0;
184
184
  }
185
- .bk-navigation-wrapper .navigation-nav {
185
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav {
186
186
  position: relative;
187
187
  z-index: 101;
188
188
  display: flex;
@@ -194,10 +194,10 @@
194
194
  flex: 0 1 auto;
195
195
  flex-direction: column;
196
196
  }
197
- .bk-navigation-wrapper .navigation-nav:hover {
197
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav:hover {
198
198
  cursor: pointer;
199
199
  }
200
- .bk-navigation-wrapper .navigation-nav .nav-slider {
200
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider {
201
201
  display: flex;
202
202
  width: 60px;
203
203
  height: 100%;
@@ -206,30 +206,30 @@
206
206
  flex: 1;
207
207
  flex-direction: column;
208
208
  }
209
- .bk-navigation-wrapper .navigation-nav .nav-slider-list {
209
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list {
210
210
  max-height: calc(100vh - 100px);
211
211
  padding: 12px 0 4px 0;
212
212
  margin: 0;
213
213
  overflow: auto;
214
214
  flex: 1 1 auto;
215
215
  }
216
- .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
216
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
217
217
  display: none;
218
218
  width: 6px;
219
219
  height: 5px;
220
220
  }
221
- .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
221
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
222
222
  transform: none;
223
223
  transition: opacity 340ms ease-out;
224
224
  }
225
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer {
225
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer {
226
226
  display: flex;
227
227
  padding-left: 14px;
228
228
  flex: 0 0 56px;
229
229
  align-items: center;
230
230
  justify-content: flex-start;
231
231
  }
232
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
232
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
233
233
  display: flex;
234
234
  width: 32px;
235
235
  height: 32px;
@@ -240,7 +240,7 @@
240
240
  justify-content: center;
241
241
  transform-origin: center center;
242
242
  }
243
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
243
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
244
244
  display: flex;
245
245
  width: 16px;
246
246
  height: 16px;
@@ -250,20 +250,20 @@
250
250
  justify-content: center;
251
251
  transform-origin: center center;
252
252
  }
253
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
253
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
254
254
  color: #96a2b9;
255
255
  }
256
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
256
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
257
257
  color: #d3d9e4;
258
258
  cursor: pointer;
259
259
  background: linear-gradient(270deg, #253047 0%, #263247 100%);
260
260
  }
261
- .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
261
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
262
262
  color: #3a3c42;
263
263
  cursor: pointer;
264
264
  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
265
265
  }
266
- .bk-navigation-wrapper .navigation-container {
266
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container {
267
267
  position: relative;
268
268
  display: flex;
269
269
  max-width: calc(100vw - 60px);
@@ -272,7 +272,7 @@
272
272
  flex: 1 1 1px;
273
273
  flex-direction: column;
274
274
  }
275
- .bk-navigation-wrapper .navigation-container .container-header {
275
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header {
276
276
  display: flex;
277
277
  width: 100%;
278
278
  height: 60px;
@@ -285,26 +285,26 @@
285
285
  align-items: center;
286
286
  justify-content: flex-end;
287
287
  }
288
- .bk-navigation-wrapper .navigation-container .container-header-title {
288
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header-title {
289
289
  height: 21px;
290
290
  font-size: 16px;
291
291
  line-height: 21px;
292
292
  color: #313238;
293
293
  }
294
- .bk-navigation-wrapper .navigation-container .container-header-sets {
294
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-header-sets {
295
295
  display: flex;
296
296
  flex: 1 1 auto;
297
297
  align-items: center;
298
298
  justify-content: flex-end;
299
299
  }
300
- .bk-navigation-wrapper .navigation-container .container-content {
300
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-content {
301
301
  max-height: calc(100vh - 60px);
302
302
  padding: 20px 24px 0;
303
303
  overflow: auto;
304
304
  background: #f5f7fa;
305
305
  flex: 1;
306
306
  }
307
- .bk-navigation-wrapper .navigation-container .container-footer {
307
+ :where(.bk-navigation) .bk-navigation-wrapper .navigation-container .container-footer {
308
308
  display: flex;
309
309
  flex: 0 0 auto;
310
310
  flex-direction: row;