bkui-vue 1.0.3-beta.25 → 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 (219) hide show
  1. package/dist/index.cjs.js +46 -46
  2. package/dist/index.esm.js +6148 -6162
  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/alert/alert.css +21 -21
  10. package/lib/alert/alert.less +17 -16
  11. package/lib/alert/alert.variable.css +23 -23
  12. package/lib/backtop/backtop.css +11 -11
  13. package/lib/backtop/backtop.less +3 -3
  14. package/lib/backtop/backtop.variable.css +13 -13
  15. package/lib/badge/badge.css +32 -32
  16. package/lib/badge/badge.less +5 -5
  17. package/lib/badge/badge.variable.css +34 -34
  18. package/lib/breadcrumb/breadcrumb.css +31 -31
  19. package/lib/breadcrumb/breadcrumb.less +8 -8
  20. package/lib/breadcrumb/breadcrumb.variable.css +33 -33
  21. package/lib/button/button.css +69 -69
  22. package/lib/button/button.less +3 -5
  23. package/lib/button/button.variable.css +71 -71
  24. package/lib/card/card.css +31 -31
  25. package/lib/card/card.less +4 -4
  26. package/lib/card/card.variable.css +33 -33
  27. package/lib/cascader/cascader.css +63 -63
  28. package/lib/cascader/cascader.less +12 -11
  29. package/lib/cascader/cascader.variable.css +65 -65
  30. package/lib/checkbox/checkbox.css +21 -21
  31. package/lib/checkbox/checkbox.less +8 -8
  32. package/lib/checkbox/checkbox.variable.css +23 -23
  33. package/lib/code-diff/code-diff.css +97 -97
  34. package/lib/code-diff/code-diff.less +3 -4
  35. package/lib/code-diff/code-diff.variable.css +99 -99
  36. package/lib/collapse/collapse.css +30 -30
  37. package/lib/collapse/collapse.less +25 -24
  38. package/lib/collapse/collapse.variable.css +32 -32
  39. package/lib/collapse-transition/collapse-transition.css +32 -32
  40. package/lib/collapse-transition/collapse-transition.less +59 -48
  41. package/lib/collapse-transition/collapse-transition.variable.css +34 -34
  42. package/lib/color-picker/color-picker.css +57 -57
  43. package/lib/color-picker/color-picker.less +36 -30
  44. package/lib/color-picker/color-picker.variable.css +59 -59
  45. package/lib/config-provider/config-provider.variable.css +2 -2
  46. package/lib/container/container.css +19 -19
  47. package/lib/container/container.less +3 -3
  48. package/lib/container/container.variable.css +21 -21
  49. package/lib/date-picker/date-picker.css +92 -92
  50. package/lib/date-picker/date-picker.d.ts +0 -1
  51. package/lib/date-picker/date-picker.less +55 -54
  52. package/lib/date-picker/date-picker.variable.css +94 -94
  53. package/lib/date-picker/index.d.ts +0 -3
  54. package/lib/date-picker/index.js +8 -8
  55. package/lib/date-picker/time-picker.d.ts +0 -1
  56. package/lib/dialog/dialog.css +51 -51
  57. package/lib/dialog/dialog.less +1 -1
  58. package/lib/dialog/dialog.variable.css +53 -53
  59. package/lib/divider/divider.css +8 -8
  60. package/lib/divider/divider.less +5 -8
  61. package/lib/divider/divider.variable.css +10 -10
  62. package/lib/dropdown/dropdown.css +15 -15
  63. package/lib/dropdown/dropdown.less +6 -6
  64. package/lib/dropdown/dropdown.variable.css +17 -17
  65. package/lib/exception/exception.css +13 -13
  66. package/lib/exception/exception.less +6 -6
  67. package/lib/exception/exception.variable.css +15 -15
  68. package/lib/fixed-navbar/fixed-navbar.css +9 -9
  69. package/lib/fixed-navbar/fixed-navbar.less +1 -2
  70. package/lib/fixed-navbar/fixed-navbar.variable.css +11 -11
  71. package/lib/form/form.css +63 -63
  72. package/lib/form/form.less +14 -16
  73. package/lib/form/form.variable.css +65 -65
  74. package/lib/image/image-viewer.css +23 -23
  75. package/lib/image/image-viewer.less +24 -25
  76. package/lib/image/image-viewer.variable.css +25 -25
  77. package/lib/image/image.css +29 -29
  78. package/lib/image/image.less +6 -8
  79. package/lib/image/image.variable.css +31 -31
  80. package/lib/info-box/info-box.css +10 -10
  81. package/lib/info-box/info-box.less +1 -2
  82. package/lib/info-box/info-box.variable.css +12 -12
  83. package/lib/input/input.css +102 -104
  84. package/lib/input/input.less +27 -33
  85. package/lib/input/input.variable.css +104 -106
  86. package/lib/link/link.css +18 -18
  87. package/lib/link/link.less +1 -3
  88. package/lib/link/link.variable.css +20 -20
  89. package/lib/loading/loading.css +94 -94
  90. package/lib/loading/loading.less +4 -4
  91. package/lib/loading/loading.variable.css +96 -96
  92. package/lib/menu/menu.css +38 -38
  93. package/lib/menu/menu.less +10 -10
  94. package/lib/menu/menu.variable.css +40 -40
  95. package/lib/menu/submenu.css +1 -1
  96. package/lib/menu/submenu.less +1 -1
  97. package/lib/menu/submenu.variable.css +3 -3
  98. package/lib/message/message.css +59 -59
  99. package/lib/message/message.less +25 -24
  100. package/lib/message/message.variable.css +61 -61
  101. package/lib/modal/modal.css +26 -26
  102. package/lib/modal/modal.less +8 -12
  103. package/lib/modal/modal.variable.css +28 -28
  104. package/lib/navigation/navigation.css +25 -25
  105. package/lib/navigation/navigation.less +9 -9
  106. package/lib/navigation/navigation.variable.css +27 -27
  107. package/lib/notify/notify.css +17 -17
  108. package/lib/notify/notify.less +8 -6
  109. package/lib/notify/notify.variable.css +19 -19
  110. package/lib/pagination/pagination.css +60 -60
  111. package/lib/pagination/pagination.less +24 -25
  112. package/lib/pagination/pagination.variable.css +62 -62
  113. package/lib/pop-confirm/pop-confirm.css +10 -10
  114. package/lib/pop-confirm/pop-confirm.less +14 -11
  115. package/lib/pop-confirm/pop-confirm.variable.css +12 -12
  116. package/lib/popover/popover.css +5 -5
  117. package/lib/popover/popover.less +5 -6
  118. package/lib/popover/popover.variable.css +7 -7
  119. package/lib/process/process.css +36 -33
  120. package/lib/process/process.less +8 -7
  121. package/lib/process/process.variable.css +38 -35
  122. package/lib/progress/progress.css +33 -33
  123. package/lib/progress/progress.less +6 -5
  124. package/lib/progress/progress.variable.css +35 -35
  125. package/lib/radio/radio.css +51 -51
  126. package/lib/radio/radio.less +13 -20
  127. package/lib/radio/radio.variable.css +53 -53
  128. package/lib/rate/rate.css +2 -2
  129. package/lib/rate/rate.less +1 -1
  130. package/lib/rate/rate.variable.css +4 -4
  131. package/lib/rate/star.css +7 -7
  132. package/lib/rate/star.less +1 -1
  133. package/lib/rate/star.variable.css +9 -9
  134. package/lib/resize-layout/resize-layout.css +42 -42
  135. package/lib/resize-layout/resize-layout.less +17 -10
  136. package/lib/resize-layout/resize-layout.variable.css +44 -44
  137. package/lib/search-select/search-select.css +15 -15
  138. package/lib/search-select/search-select.variable.css +17 -17
  139. package/lib/select/select.css +87 -87
  140. package/lib/select/select.less +27 -22
  141. package/lib/select/select.variable.css +89 -89
  142. package/lib/shared/index.js +6 -4
  143. package/lib/sideslider/sideslider.css +14 -14
  144. package/lib/sideslider/sideslider.less +9 -13
  145. package/lib/sideslider/sideslider.variable.css +16 -16
  146. package/lib/slider/slider.css +31 -31
  147. package/lib/slider/slider.less +8 -8
  148. package/lib/slider/slider.variable.css +33 -33
  149. package/lib/steps/steps.css +134 -134
  150. package/lib/steps/steps.less +44 -48
  151. package/lib/steps/steps.variable.css +136 -136
  152. package/lib/styles/mixins/animate.css +4 -4
  153. package/lib/styles/mixins/animate.less +3 -3
  154. package/lib/styles/mixins/animate.variable.css +6 -6
  155. package/lib/styles/mixins/mixins.css +15 -15
  156. package/lib/styles/mixins/mixins.variable.css +15 -15
  157. package/lib/styles/mixins/popper.css +11 -11
  158. package/lib/styles/mixins/popper.less +6 -6
  159. package/lib/styles/mixins/popper.variable.css +13 -13
  160. package/lib/styles/mixins/scroll.css +5 -5
  161. package/lib/styles/mixins/scroll.less +4 -4
  162. package/lib/styles/mixins/scroll.variable.css +7 -7
  163. package/lib/styles/reset.css +6 -6
  164. package/lib/styles/reset.less +4 -5
  165. package/lib/styles/reset.variable.css +8 -8
  166. package/lib/styles/themes/themes copy.less +167 -0
  167. package/lib/styles/themes/themes.less +3 -10
  168. package/lib/swiper/swiper.css +15 -15
  169. package/lib/swiper/swiper.less +8 -8
  170. package/lib/swiper/swiper.variable.css +17 -17
  171. package/lib/switcher/switcher.css +57 -57
  172. package/lib/switcher/switcher.less +14 -22
  173. package/lib/switcher/switcher.variable.css +59 -59
  174. package/lib/tab/tab.css +78 -78
  175. package/lib/tab/tab.less +40 -39
  176. package/lib/tab/tab.variable.css +80 -80
  177. package/lib/table/components/table-column.d.ts +0 -1
  178. package/lib/table/index.d.ts +0 -1
  179. package/lib/table/index.js +0 -20
  180. package/lib/table/plugins/head-filter.css +13 -13
  181. package/lib/table/plugins/head-filter.less +3 -3
  182. package/lib/table/plugins/head-filter.variable.css +15 -15
  183. package/lib/table/plugins/head-sort.css +5 -5
  184. package/lib/table/plugins/head-sort.less +2 -2
  185. package/lib/table/plugins/head-sort.variable.css +7 -7
  186. package/lib/table/plugins/settings.css +26 -26
  187. package/lib/table/plugins/settings.less +1 -3
  188. package/lib/table/plugins/settings.variable.css +28 -28
  189. package/lib/table/table.css +380 -380
  190. package/lib/table/table.less +10 -14
  191. package/lib/table/table.variable.css +382 -382
  192. package/lib/table-column/index.d.ts +0 -3
  193. package/lib/table-column/index.js +0 -15
  194. package/lib/tag/tag.css +51 -51
  195. package/lib/tag/tag.less +34 -34
  196. package/lib/tag/tag.variable.css +53 -53
  197. package/lib/tag-input/tag-input.css +38 -38
  198. package/lib/tag-input/tag-input.less +3 -3
  199. package/lib/tag-input/tag-input.variable.css +40 -40
  200. package/lib/time-picker/index.d.ts +0 -3
  201. package/lib/time-picker/time-picker.css +40 -40
  202. package/lib/time-picker/time-picker.less +76 -44
  203. package/lib/time-picker/time-picker.variable.css +42 -42
  204. package/lib/timeline/timeline.css +69 -69
  205. package/lib/timeline/timeline.less +6 -12
  206. package/lib/timeline/timeline.variable.css +71 -71
  207. package/lib/transfer/transfer.css +89 -89
  208. package/lib/transfer/transfer.less +1 -1
  209. package/lib/transfer/transfer.variable.css +91 -91
  210. package/lib/tree/tree.css +49 -49
  211. package/lib/tree/tree.less +6 -7
  212. package/lib/tree/tree.variable.css +51 -51
  213. package/lib/upload/upload.css +98 -98
  214. package/lib/upload/upload.less +68 -69
  215. package/lib/upload/upload.variable.css +100 -100
  216. package/lib/virtual-render/virtual-render.css +9 -9
  217. package/lib/virtual-render/virtual-render.less +1 -1
  218. package/lib/virtual-render/virtual-render.variable.css +11 -11
  219. package/package.json +1 -1
package/lib/image/image-viewer.less CHANGED
@@ -1,18 +1,18 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-image-viewer {
4
- &-wrapper {
3
+ :where(.@{bk-prefix}-image-viewer) {
4
+ .@{bk-prefix}-image-viewer-wrapper {
5
5
  position: fixed;
6
6
  top: 0;
7
7
  right: 0;
8
8
  bottom: 0;
9
9
  left: 0;
10
10
  display: flex;
11
- background: rgba(0, 0, 0, .6);
11
+ background: rgba(0, 0, 0, 0.6);
12
12
  flex-direction: column;
13
13
  }
14
14
 
15
- &-mask {
15
+ .@{bk-prefix}-image-viewer-mask {
16
16
  position: absolute;
17
17
  top: 0;
18
18
  right: 0;
@@ -20,7 +20,7 @@
20
20
  left: 0;
21
21
  }
22
22
 
23
- &-header {
23
+ .@{bk-prefix}-image-viewer-header {
24
24
  position: absolute;
25
25
  top: 0;
26
26
  left: 0;
@@ -29,7 +29,7 @@
29
29
  width: 100%;
30
30
  height: 52px;
31
31
  color: #c4c6cc;
32
- background: rgba(0, 0, 0, .70);
32
+ background: rgba(0, 0, 0, 0.7);
33
33
  justify-content: space-between;
34
34
  align-items: center;
35
35
 
@@ -54,14 +54,14 @@
54
54
  }
55
55
  }
56
56
 
57
- &-btn {
57
+ .@{bk-prefix}-image-viewer-btn {
58
58
  position: absolute;
59
59
  z-index: 1;
60
60
  display: flex;
61
61
  color: #dcdee5;
62
- background-color: rgba(0, 0, 0, .3);
62
+ background-color: rgba(0, 0, 0, 0.3);
63
63
  border-radius: 50%;
64
- opacity: .8;
64
+ opacity: 0.8;
65
65
  box-sizing: border-box;
66
66
  user-select: none;
67
67
  align-items: center;
@@ -69,11 +69,11 @@
69
69
 
70
70
  &:hover {
71
71
  color: #fff;
72
- background-color: rgba(0, 0, 0, .4);
72
+ background-color: rgba(0, 0, 0, 0.4);
73
73
  }
74
74
  }
75
75
 
76
- &-close {
76
+ .@{bk-prefix}-image-viewer-close {
77
77
  height: 52px;
78
78
  font-size: 32px;
79
79
  line-height: 48px;
@@ -86,19 +86,19 @@
86
86
  }
87
87
  }
88
88
 
89
- &-canvas {
89
+ .@{bk-prefix}-image-viewer-canvas {
90
90
  display: flex;
91
91
  width: 100%;
92
92
  height: 100%;
93
93
  justify-content: center;
94
- align-items: center
94
+ align-items: center;
95
95
  }
96
96
 
97
- &-has-header {
97
+ .@{bk-prefix}-image-viewer-has-header {
98
98
  padding-top: 52px;
99
99
  }
100
100
 
101
- &-error {
101
+ .@{bk-prefix}-image-viewer-error {
102
102
  font-size: 14px;
103
103
  color: #313238;
104
104
  text-align: center;
@@ -110,19 +110,19 @@
110
110
  }
111
111
  }
112
112
 
113
- &-actions {
113
+ .@{bk-prefix}-image-viewer-actions {
114
114
  bottom: 30px;
115
115
  left: 50%;
116
116
  width: 282px;
117
117
  height: 44px;
118
118
  padding: 0 23px;
119
- background-color: rgba(0, 0, 0, .4);;
119
+ background-color: rgba(0, 0, 0, 0.4);
120
120
  border-color: #fff;
121
121
  border-radius: 22px;
122
122
  transform: translateX(-50%);
123
123
 
124
124
  &:hover {
125
- background: rgba(0, 0, 0, .5);
125
+ background: rgba(0, 0, 0, 0.5);
126
126
  }
127
127
 
128
128
  &-inner {
@@ -142,12 +142,11 @@
142
142
  color: #fff;
143
143
  }
144
144
  }
145
-
146
145
  }
147
146
  }
148
147
 
149
- &-next,
150
- &-prev {
148
+ .@{bk-prefix}-image-viewer-next,
149
+ .@{bk-prefix}-image-viewer-prev {
151
150
  top: 50%;
152
151
  width: 80px;
153
152
  height: 80px;
@@ -155,16 +154,16 @@
155
154
  cursor: pointer;
156
155
  }
157
156
 
158
- &-prev {
157
+ .@{bk-prefix}-image-viewer-prev {
159
158
  left: 40px;
160
159
  transform: translateY(-50%);
161
- transform: translateY(-50%)
160
+ transform: translateY(-50%);
162
161
  }
163
162
 
164
- &-next {
163
+ .@{bk-prefix}-image-viewer-next {
165
164
  right: 40px;
166
165
  text-indent: 2px;
167
166
  transform: translateY(-50%);
168
- transform: translateY(-50%)
167
+ transform: translateY(-50%);
169
168
  }
170
169
  }
package/lib/image/image-viewer.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-image-viewer-wrapper {
130
+ :where(.bk-image-viewer) .bk-image-viewer-wrapper {
131
131
  position: fixed;
132
132
  top: 0;
133
133
  right: 0;
@@ -137,14 +137,14 @@
137
137
  background: rgba(0, 0, 0, 0.6);
138
138
  flex-direction: column;
139
139
  }
140
- .bk-image-viewer-mask {
140
+ :where(.bk-image-viewer) .bk-image-viewer-mask {
141
141
  position: absolute;
142
142
  top: 0;
143
143
  right: 0;
144
144
  bottom: 0;
145
145
  left: 0;
146
146
  }
147
- .bk-image-viewer-header {
147
+ :where(.bk-image-viewer) .bk-image-viewer-header {
148
148
  position: absolute;
149
149
  top: 0;
150
150
  left: 0;
@@ -157,7 +157,7 @@
157
157
  justify-content: space-between;
158
158
  align-items: center;
159
159
  }
160
- .bk-image-viewer-header > div {
160
+ :where(.bk-image-viewer) .bk-image-viewer-header > div {
161
161
  padding: 0 25px;
162
162
  overflow: hidden;
163
163
  font-size: 14px;
@@ -165,16 +165,16 @@
165
165
  white-space: nowrap;
166
166
  flex: 1;
167
167
  }
168
- .bk-image-viewer-header .quit-box {
168
+ :where(.bk-image-viewer) .bk-image-viewer-header .quit-box {
169
169
  display: flex;
170
170
  align-items: center;
171
171
  justify-content: flex-end;
172
172
  }
173
- .bk-image-viewer-header .quit-tips {
173
+ :where(.bk-image-viewer) .bk-image-viewer-header .quit-tips {
174
174
  font-size: 14px;
175
175
  color: #979ba5;
176
176
  }
177
- .bk-image-viewer-btn {
177
+ :where(.bk-image-viewer) .bk-image-viewer-btn {
178
178
  position: absolute;
179
179
  z-index: 1;
180
180
  display: flex;
@@ -187,11 +187,11 @@
187
187
  align-items: center;
188
188
  justify-content: center;
189
189
  }
190
- .bk-image-viewer-btn:hover {
190
+ :where(.bk-image-viewer) .bk-image-viewer-btn:hover {
191
191
  color: #fff;
192
192
  background-color: rgba(0, 0, 0, 0.4);
193
193
  }
194
- .bk-image-viewer-close {
194
+ :where(.bk-image-viewer) .bk-image-viewer-close {
195
195
  height: 52px;
196
196
  font-size: 32px;
197
197
  line-height: 48px;
@@ -199,30 +199,30 @@
199
199
  text-align: center;
200
200
  cursor: pointer;
201
201
  }
202
- .bk-image-viewer-close:hover {
202
+ :where(.bk-image-viewer) .bk-image-viewer-close:hover {
203
203
  color: #fff;
204
204
  }
205
- .bk-image-viewer-canvas {
205
+ :where(.bk-image-viewer) .bk-image-viewer-canvas {
206
206
  display: flex;
207
207
  width: 100%;
208
208
  height: 100%;
209
209
  justify-content: center;
210
210
  align-items: center;
211
211
  }
212
- .bk-image-viewer-has-header {
212
+ :where(.bk-image-viewer) .bk-image-viewer-has-header {
213
213
  padding-top: 52px;
214
214
  }
215
- .bk-image-viewer-error {
215
+ :where(.bk-image-viewer) .bk-image-viewer-error {
216
216
  font-size: 14px;
217
217
  color: #313238;
218
218
  text-align: center;
219
219
  }
220
- .bk-image-viewer-error .bk-icon {
220
+ :where(.bk-image-viewer) .bk-image-viewer-error .bk-icon {
221
221
  margin-bottom: 15px;
222
222
  font-size: 85px;
223
223
  line-height: 1;
224
224
  }
225
- .bk-image-viewer-actions {
225
+ :where(.bk-image-viewer) .bk-image-viewer-actions {
226
226
  bottom: 30px;
227
227
  left: 50%;
228
228
  width: 282px;
@@ -233,10 +233,10 @@
233
233
  border-radius: 22px;
234
234
  transform: translateX(-50%);
235
235
  }
236
- .bk-image-viewer-actions:hover {
236
+ :where(.bk-image-viewer) .bk-image-viewer-actions:hover {
237
237
  background: rgba(0, 0, 0, 0.5);
238
238
  }
239
- .bk-image-viewer-actions-inner {
239
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner {
240
240
  display: flex;
241
241
  width: 100%;
242
242
  height: 100%;
@@ -246,25 +246,25 @@
246
246
  align-items: center;
247
247
  justify-content: space-around;
248
248
  }
249
- .bk-image-viewer-actions-inner .bk-icon {
249
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner .bk-icon {
250
250
  cursor: pointer;
251
251
  }
252
- .bk-image-viewer-actions-inner .bk-icon:hover {
252
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner .bk-icon:hover {
253
253
  color: #fff;
254
254
  }
255
- .bk-image-viewer-next,
256
- .bk-image-viewer-prev {
255
+ :where(.bk-image-viewer) .bk-image-viewer-next,
256
+ :where(.bk-image-viewer) .bk-image-viewer-prev {
257
257
  top: 50%;
258
258
  width: 80px;
259
259
  height: 80px;
260
260
  font-size: 40px;
261
261
  cursor: pointer;
262
262
  }
263
- .bk-image-viewer-prev {
263
+ :where(.bk-image-viewer) .bk-image-viewer-prev {
264
264
  left: 40px;
265
265
  transform: translateY(-50%);
266
266
  }
267
- .bk-image-viewer-next {
267
+ :where(.bk-image-viewer) .bk-image-viewer-next {
268
268
  right: 40px;
269
269
  text-indent: 2px;
270
270
  transform: translateY(-50%);
package/lib/image/image.css CHANGED
@@ -1,4 +1,4 @@
1
- .bk-image-viewer-wrapper {
1
+ :where(.bk-image-viewer) .bk-image-viewer-wrapper {
2
2
  position: fixed;
3
3
  top: 0;
4
4
  right: 0;
@@ -8,14 +8,14 @@
8
8
  background: rgba(0, 0, 0, 0.6);
9
9
  flex-direction: column;
10
10
  }
11
- .bk-image-viewer-mask {
11
+ :where(.bk-image-viewer) .bk-image-viewer-mask {
12
12
  position: absolute;
13
13
  top: 0;
14
14
  right: 0;
15
15
  bottom: 0;
16
16
  left: 0;
17
17
  }
18
- .bk-image-viewer-header {
18
+ :where(.bk-image-viewer) .bk-image-viewer-header {
19
19
  position: absolute;
20
20
  top: 0;
21
21
  left: 0;
@@ -28,7 +28,7 @@
28
28
  justify-content: space-between;
29
29
  align-items: center;
30
30
  }
31
- .bk-image-viewer-header > div {
31
+ :where(.bk-image-viewer) .bk-image-viewer-header > div {
32
32
  padding: 0 25px;
33
33
  overflow: hidden;
34
34
  font-size: 14px;
@@ -36,16 +36,16 @@
36
36
  white-space: nowrap;
37
37
  flex: 1;
38
38
  }
39
- .bk-image-viewer-header .quit-box {
39
+ :where(.bk-image-viewer) .bk-image-viewer-header .quit-box {
40
40
  display: flex;
41
41
  align-items: center;
42
42
  justify-content: flex-end;
43
43
  }
44
- .bk-image-viewer-header .quit-tips {
44
+ :where(.bk-image-viewer) .bk-image-viewer-header .quit-tips {
45
45
  font-size: 14px;
46
46
  color: #979ba5;
47
47
  }
48
- .bk-image-viewer-btn {
48
+ :where(.bk-image-viewer) .bk-image-viewer-btn {
49
49
  position: absolute;
50
50
  z-index: 1;
51
51
  display: flex;
@@ -58,11 +58,11 @@
58
58
  align-items: center;
59
59
  justify-content: center;
60
60
  }
61
- .bk-image-viewer-btn:hover {
61
+ :where(.bk-image-viewer) .bk-image-viewer-btn:hover {
62
62
  color: #fff;
63
63
  background-color: rgba(0, 0, 0, 0.4);
64
64
  }
65
- .bk-image-viewer-close {
65
+ :where(.bk-image-viewer) .bk-image-viewer-close {
66
66
  height: 52px;
67
67
  font-size: 32px;
68
68
  line-height: 48px;
@@ -70,30 +70,30 @@
70
70
  text-align: center;
71
71
  cursor: pointer;
72
72
  }
73
- .bk-image-viewer-close:hover {
73
+ :where(.bk-image-viewer) .bk-image-viewer-close:hover {
74
74
  color: #fff;
75
75
  }
76
- .bk-image-viewer-canvas {
76
+ :where(.bk-image-viewer) .bk-image-viewer-canvas {
77
77
  display: flex;
78
78
  width: 100%;
79
79
  height: 100%;
80
80
  justify-content: center;
81
81
  align-items: center;
82
82
  }
83
- .bk-image-viewer-has-header {
83
+ :where(.bk-image-viewer) .bk-image-viewer-has-header {
84
84
  padding-top: 52px;
85
85
  }
86
- .bk-image-viewer-error {
86
+ :where(.bk-image-viewer) .bk-image-viewer-error {
87
87
  font-size: 14px;
88
88
  color: #313238;
89
89
  text-align: center;
90
90
  }
91
- .bk-image-viewer-error .bk-icon {
91
+ :where(.bk-image-viewer) .bk-image-viewer-error .bk-icon {
92
92
  margin-bottom: 15px;
93
93
  font-size: 85px;
94
94
  line-height: 1;
95
95
  }
96
- .bk-image-viewer-actions {
96
+ :where(.bk-image-viewer) .bk-image-viewer-actions {
97
97
  bottom: 30px;
98
98
  left: 50%;
99
99
  width: 282px;
@@ -104,10 +104,10 @@
104
104
  border-radius: 22px;
105
105
  transform: translateX(-50%);
106
106
  }
107
- .bk-image-viewer-actions:hover {
107
+ :where(.bk-image-viewer) .bk-image-viewer-actions:hover {
108
108
  background: rgba(0, 0, 0, 0.5);
109
109
  }
110
- .bk-image-viewer-actions-inner {
110
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner {
111
111
  display: flex;
112
112
  width: 100%;
113
113
  height: 100%;
@@ -117,47 +117,47 @@
117
117
  align-items: center;
118
118
  justify-content: space-around;
119
119
  }
120
- .bk-image-viewer-actions-inner .bk-icon {
120
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner .bk-icon {
121
121
  cursor: pointer;
122
122
  }
123
- .bk-image-viewer-actions-inner .bk-icon:hover {
123
+ :where(.bk-image-viewer) .bk-image-viewer-actions-inner .bk-icon:hover {
124
124
  color: #fff;
125
125
  }
126
- .bk-image-viewer-next,
127
- .bk-image-viewer-prev {
126
+ :where(.bk-image-viewer) .bk-image-viewer-next,
127
+ :where(.bk-image-viewer) .bk-image-viewer-prev {
128
128
  top: 50%;
129
129
  width: 80px;
130
130
  height: 80px;
131
131
  font-size: 40px;
132
132
  cursor: pointer;
133
133
  }
134
- .bk-image-viewer-prev {
134
+ :where(.bk-image-viewer) .bk-image-viewer-prev {
135
135
  left: 40px;
136
136
  transform: translateY(-50%);
137
137
  }
138
- .bk-image-viewer-next {
138
+ :where(.bk-image-viewer) .bk-image-viewer-next {
139
139
  right: 40px;
140
140
  text-indent: 2px;
141
141
  transform: translateY(-50%);
142
142
  }
143
- .bk-image {
143
+ :where(.bk-image) {
144
144
  position: relative;
145
145
  display: inline-block;
146
146
  overflow: hidden;
147
147
  }
148
- .bk-image-inner {
148
+ :where(.bk-image) .bk-image-inner {
149
149
  width: 100%;
150
150
  height: 100%;
151
151
  vertical-align: top;
152
152
  }
153
- .bk-image-inner-center {
153
+ :where(.bk-image) .bk-image-inner-center {
154
154
  position: relative;
155
155
  top: 50%;
156
156
  left: 50%;
157
157
  display: block;
158
158
  transform: translate(-50%, -50%);
159
159
  }
160
- .bk-image-placeholder {
160
+ :where(.bk-image) .bk-image-placeholder {
161
161
  position: absolute;
162
162
  top: 0;
163
163
  left: 0;
@@ -171,9 +171,9 @@
171
171
  justify-content: center;
172
172
  align-items: center;
173
173
  }
174
- .bk-image-placeholder img {
174
+ :where(.bk-image) .bk-image-placeholder img {
175
175
  width: 100%;
176
176
  }
177
- .bk-image-preview {
177
+ :where(.bk-image) .bk-image-preview {
178
178
  cursor: pointer;
179
179
  }
package/lib/image/image.less CHANGED
@@ -1,12 +1,12 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import './image-viewer.less';
3
3
 
4
- .@{bk-prefix}-image {
4
+ :where(.@{bk-prefix}-image) {
5
5
  position: relative;
6
6
  display: inline-block;
7
7
  overflow: hidden;
8
8
 
9
- &-inner {
9
+ .@{bk-prefix}-image-inner {
10
10
  width: 100%;
11
11
  height: 100%;
12
12
  vertical-align: top;
@@ -16,13 +16,11 @@
16
16
  top: 50%;
17
17
  left: 50%;
18
18
  display: block;
19
- transform: translate(-50%, -50%)
19
+ transform: translate(-50%, -50%);
20
20
  }
21
-
22
21
  }
23
22
 
24
-
25
- &-placeholder {
23
+ .@{bk-prefix}-image-placeholder {
26
24
  position: absolute;
27
25
  top: 0;
28
26
  left: 0;
@@ -41,7 +39,7 @@
41
39
  }
42
40
  }
43
41
 
44
- &-preview {
45
- cursor: pointer
42
+ .@{bk-prefix}-image-preview {
43
+ cursor: pointer;
46
44
  }
47
45
  }