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/form/form.css CHANGED
@@ -8,10 +8,10 @@
8
8
  transform: translateY(0);
9
9
  }
10
10
  }
11
- .bk-form {
11
+ :where(.bk-form) {
12
12
  text-align: left;
13
13
  }
14
- .bk-form--vertical .bk-form-label {
14
+ :where(.bk-form) .bk-form--vertical .bk-form-label {
15
15
  float: unset;
16
16
  width: auto;
17
17
  padding-right: 0;
@@ -19,13 +19,13 @@
19
19
  line-height: 20px;
20
20
  text-align: left;
21
21
  }
22
- .bk-form--vertical .bk-form-content {
22
+ :where(.bk-form) .bk-form--vertical .bk-form-content {
23
23
  text-align: left;
24
24
  }
25
- .bk-form-item {
25
+ :where(.bk-form-item) {
26
26
  margin-bottom: 24px;
27
27
  }
28
- .bk-form-item.is-required .bk-form-label:after {
28
+ :where(.bk-form-item).is-required .bk-form-label:after {
29
29
  position: absolute;
30
30
  top: 0;
31
31
  width: 14px;
@@ -33,23 +33,23 @@
33
33
  text-align: center;
34
34
  content: '*';
35
35
  }
36
- .bk-form-item.is-error .bk-input,
37
- .bk-form-item.is-error .bk-textarea,
38
- .bk-form-item.is-error .bk-cascader,
39
- .bk-form-item.is-error .bk-date-picker-editor,
40
- .bk-form-item.is-error .bk-tag-input {
36
+ :where(.bk-form-item).is-error .bk-input,
37
+ :where(.bk-form-item).is-error .bk-textarea,
38
+ :where(.bk-form-item).is-error .bk-cascader,
39
+ :where(.bk-form-item).is-error .bk-date-picker-editor,
40
+ :where(.bk-form-item).is-error .bk-tag-input {
41
41
  border-color: #ea3636;
42
42
  transition: all 0.15s;
43
43
  }
44
- .bk-form-item:after,
45
- .bk-form-item:before {
44
+ :where(.bk-form-item):after,
45
+ :where(.bk-form-item):before {
46
46
  display: table;
47
47
  content: '';
48
48
  }
49
- .bk-form-item:after {
49
+ :where(.bk-form-item):after {
50
50
  clear: both;
51
51
  }
52
- .bk-form-label {
52
+ :where(.bk-form-label) {
53
53
  position: relative;
54
54
  float: left;
55
55
  padding-right: 22px;
@@ -61,18 +61,18 @@
61
61
  vertical-align: middle;
62
62
  box-sizing: border-box;
63
63
  }
64
- .bk-form-label-description {
64
+ :where(.bk-form-label-description) {
65
65
  cursor: pointer;
66
66
  border-bottom: 1px dashed #979ba5;
67
67
  }
68
- .bk-form-label-description-popper {
68
+ :where(.bk-form-label-description-popper) {
69
69
  max-width: 400px;
70
70
  }
71
- .bk-form-content {
71
+ :where(.bk-form-content) {
72
72
  position: relative;
73
73
  line-height: 32px;
74
74
  }
75
- .bk-form-error {
75
+ :where(.bk-form-error) {
76
76
  position: absolute;
77
77
  left: 0;
78
78
  padding-top: 4px;
@@ -82,7 +82,7 @@
82
82
  text-align: left;
83
83
  animation: form-error-appear-animation 0.15s;
84
84
  }
85
- .bk-form-error-tips {
85
+ :where(.bk-form-error-tips) {
86
86
  position: absolute;
87
87
  top: 8px;
88
88
  right: 8px;
@@ -90,65 +90,65 @@
90
90
  line-height: 1;
91
91
  color: #ea3636;
92
92
  }
93
- .bk-compose-form-item {
93
+ :where(.bk-compose-form-item) {
94
94
  display: inline-block;
95
95
  }
96
- .bk-compose-form-item > .bk-input,
97
- .bk-compose-form-item > .bk-textarea,
98
- .bk-compose-form-item > .bk-select,
99
- .bk-compose-form-item > .bk-cascade,
100
- .bk-compose-form-item > .bk-color-picker,
101
- .bk-compose-form-item > .bk-date-picker,
102
- .bk-compose-form-item > .bk-tag-input,
103
- .bk-compose-form-item > .bk-tag-selector,
104
- .bk-compose-form-item > .bk-search-select {
96
+ :where(.bk-compose-form-item) > .bk-input,
97
+ :where(.bk-compose-form-item) > .bk-textarea,
98
+ :where(.bk-compose-form-item) > .bk-select,
99
+ :where(.bk-compose-form-item) > .bk-cascade,
100
+ :where(.bk-compose-form-item) > .bk-color-picker,
101
+ :where(.bk-compose-form-item) > .bk-date-picker,
102
+ :where(.bk-compose-form-item) > .bk-tag-input,
103
+ :where(.bk-compose-form-item) > .bk-tag-selector,
104
+ :where(.bk-compose-form-item) > .bk-search-select {
105
105
  float: left;
106
106
  width: auto;
107
107
  margin-left: -1px;
108
108
  }
109
- .bk-compose-form-item .bk-input,
110
- .bk-compose-form-item .bk-form-password,
111
- .bk-compose-form-item .bk-textarea,
112
- .bk-compose-form-item .bk-select,
113
- .bk-compose-form-item .bk-cascade,
114
- .bk-compose-form-item .bk-color-picker,
115
- .bk-compose-form-item .bk-date-picker .bk-date-picker-editor,
116
- .bk-compose-form-item .bk-tag-input,
117
- .bk-compose-form-item .bk-search-select {
109
+ :where(.bk-compose-form-item) .bk-input,
110
+ :where(.bk-compose-form-item) .bk-form-password,
111
+ :where(.bk-compose-form-item) .bk-textarea,
112
+ :where(.bk-compose-form-item) .bk-select,
113
+ :where(.bk-compose-form-item) .bk-cascade,
114
+ :where(.bk-compose-form-item) .bk-color-picker,
115
+ :where(.bk-compose-form-item) .bk-date-picker .bk-date-picker-editor,
116
+ :where(.bk-compose-form-item) .bk-tag-input,
117
+ :where(.bk-compose-form-item) .bk-search-select {
118
118
  border-radius: 0;
119
119
  }
120
- .bk-compose-form-item .bk-input.control-active,
121
- .bk-compose-form-item .bk-select.is-focus,
122
- .bk-compose-form-item .bk-cascade.is-focus,
123
- .bk-compose-form-item .bk-color-picker.bk-color-picker-show-dropdown,
124
- .bk-compose-form-item .bk-color-picker:hover,
125
- .bk-compose-form-item .bk-date-picker .bk-date-picker-editor:focus,
126
- .bk-compose-form-item .bk-tag-input.active,
127
- .bk-compose-form-item .bk-tag-selector,
128
- .bk-compose-form-item .bk-search-select.is-focus {
120
+ :where(.bk-compose-form-item) .bk-input.control-active,
121
+ :where(.bk-compose-form-item) .bk-select.is-focus,
122
+ :where(.bk-compose-form-item) .bk-cascade.is-focus,
123
+ :where(.bk-compose-form-item) .bk-color-picker.bk-color-picker-show-dropdown,
124
+ :where(.bk-compose-form-item) .bk-color-picker:hover,
125
+ :where(.bk-compose-form-item) .bk-date-picker .bk-date-picker-editor:focus,
126
+ :where(.bk-compose-form-item) .bk-tag-input.active,
127
+ :where(.bk-compose-form-item) .bk-tag-selector,
128
+ :where(.bk-compose-form-item) .bk-search-select.is-focus {
129
129
  z-index: 1;
130
130
  opacity: 1;
131
131
  }
132
- .bk-compose-form-item .bk-compose-form-item-head.bk-input,
133
- .bk-compose-form-item .bk-compose-form-item-head.bk-select,
134
- .bk-compose-form-item .bk-compose-form-item-head.bk-cascade,
135
- .bk-compose-form-item .bk-compose-form-item-head.bk-color-picker,
136
- .bk-compose-form-item .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
137
- .bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
138
- .bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
139
- .bk-compose-form-item .bk-compose-form-item-head.bk-search-select {
132
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-input,
133
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-select,
134
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-cascade,
135
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-color-picker,
136
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
137
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-tag-input,
138
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-tag-input,
139
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-search-select {
140
140
  margin-left: 0;
141
141
  border-top-right-radius: 0px;
142
142
  border-bottom-right-radius: 0px;
143
143
  }
144
- .bk-compose-form-item .bk-compose-form-item-tail.bk-input,
145
- .bk-compose-form-item .bk-compose-form-item-tail.bk-select,
146
- .bk-compose-form-item .bk-compose-form-item-tail.bk-cascade,
147
- .bk-compose-form-item .bk-compose-form-item-tail.bk-color-picker,
148
- .bk-compose-form-item .bk-compose-form-item-tail.bk-date-picker,
149
- .bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
150
- .bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
151
- .bk-compose-form-item .bk-compose-form-item-tail.bk-search-select {
144
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-input,
145
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-select,
146
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-cascade,
147
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-color-picker,
148
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-date-picker,
149
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-tag-input,
150
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-tag-input,
151
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-search-select {
152
152
  border-top-right-radius: 2px;
153
153
  border-bottom-right-radius: 2px;
154
154
  }
package/lib/form/form.less CHANGED
@@ -12,11 +12,10 @@
12
12
  }
13
13
  }
14
14
 
15
- .@{bk-prefix}-form {
15
+ :where(.@{bk-prefix}-form) {
16
16
  text-align: left;
17
17
 
18
- &--vertical {
19
-
18
+ .@{bk-prefix}-form--vertical {
20
19
  .@{bk-prefix}-form-label {
21
20
  float: unset;
22
21
  width: auto;
@@ -24,7 +23,6 @@
24
23
  margin-bottom: 6px;
25
24
  line-height: 20px;
26
25
  text-align: left;
27
-
28
26
  }
29
27
 
30
28
  .@{bk-prefix}-form-content {
@@ -33,7 +31,7 @@
33
31
  }
34
32
  }
35
33
 
36
- .@{bk-prefix}-form-item {
34
+ :where(.@{bk-prefix}-form-item) {
37
35
  margin-bottom: 24px;
38
36
 
39
37
  &.is-required {
@@ -56,22 +54,22 @@
56
54
  .@{bk-prefix}-date-picker-editor,
57
55
  .@{bk-prefix}-tag-input {
58
56
  border-color: #ea3636;
59
- transition: all .15s;
57
+ transition: all 0.15s;
60
58
  }
61
59
  }
62
60
 
63
61
  &:after,
64
62
  &:before {
65
63
  display: table;
66
- content: ''
64
+ content: '';
67
65
  }
68
66
 
69
67
  &:after {
70
- clear: both
68
+ clear: both;
71
69
  }
72
70
  }
73
71
 
74
- .@{bk-prefix}-form-label {
72
+ :where(.@{bk-prefix}-form-label) {
75
73
  position: relative;
76
74
  float: left;
77
75
  padding-right: 22px;
@@ -84,20 +82,20 @@
84
82
  vertical-align: middle;
85
83
  box-sizing: border-box;
86
84
  }
87
- .@{bk-prefix}-form-label-description {
85
+ :where(.@{bk-prefix}-form-label-description) {
88
86
  cursor: pointer;
89
87
  border-bottom: 1px dashed #979ba5;
90
88
  }
91
- .@{bk-prefix}-form-label-description-popper {
89
+ :where(.@{bk-prefix}-form-label-description-popper) {
92
90
  max-width: 400px;
93
91
  }
94
92
 
95
- .@{bk-prefix}-form-content {
93
+ :where(.@{bk-prefix}-form-content) {
96
94
  position: relative;
97
95
  line-height: 32px;
98
96
  }
99
97
 
100
- .@{bk-prefix}-form-error {
98
+ :where(.@{bk-prefix}-form-error) {
101
99
  position: absolute;
102
100
  left: 0;
103
101
  padding-top: 4px;
@@ -105,9 +103,9 @@
105
103
  line-height: 1;
106
104
  color: #ea3636;
107
105
  text-align: left;
108
- animation: form-error-appear-animation .15s;
106
+ animation: form-error-appear-animation 0.15s;
109
107
  }
110
- .@{bk-prefix}-form-error-tips {
108
+ :where(.@{bk-prefix}-form-error-tips) {
111
109
  position: absolute;
112
110
  top: 8px;
113
111
  right: 8px;
@@ -116,7 +114,7 @@
116
114
  color: #ea3636;
117
115
  }
118
116
 
119
- .@{bk-prefix}-compose-form-item {
117
+ :where(.@{bk-prefix}-compose-form-item) {
120
118
  display: inline-block;
121
119
  display: inline-block;
122
120
 
package/lib/form/form.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;
@@ -137,10 +137,10 @@
137
137
  transform: translateY(0);
138
138
  }
139
139
  }
140
- .bk-form {
140
+ :where(.bk-form) {
141
141
  text-align: left;
142
142
  }
143
- .bk-form--vertical .bk-form-label {
143
+ :where(.bk-form) .bk-form--vertical .bk-form-label {
144
144
  float: unset;
145
145
  width: auto;
146
146
  padding-right: 0;
@@ -148,13 +148,13 @@
148
148
  line-height: 20px;
149
149
  text-align: left;
150
150
  }
151
- .bk-form--vertical .bk-form-content {
151
+ :where(.bk-form) .bk-form--vertical .bk-form-content {
152
152
  text-align: left;
153
153
  }
154
- .bk-form-item {
154
+ :where(.bk-form-item) {
155
155
  margin-bottom: 24px;
156
156
  }
157
- .bk-form-item.is-required .bk-form-label:after {
157
+ :where(.bk-form-item).is-required .bk-form-label:after {
158
158
  position: absolute;
159
159
  top: 0;
160
160
  width: 14px;
@@ -162,23 +162,23 @@
162
162
  text-align: center;
163
163
  content: '*';
164
164
  }
165
- .bk-form-item.is-error .bk-input,
166
- .bk-form-item.is-error .bk-textarea,
167
- .bk-form-item.is-error .bk-cascader,
168
- .bk-form-item.is-error .bk-date-picker-editor,
169
- .bk-form-item.is-error .bk-tag-input {
165
+ :where(.bk-form-item).is-error .bk-input,
166
+ :where(.bk-form-item).is-error .bk-textarea,
167
+ :where(.bk-form-item).is-error .bk-cascader,
168
+ :where(.bk-form-item).is-error .bk-date-picker-editor,
169
+ :where(.bk-form-item).is-error .bk-tag-input {
170
170
  border-color: #ea3636;
171
171
  transition: all 0.15s;
172
172
  }
173
- .bk-form-item:after,
174
- .bk-form-item:before {
173
+ :where(.bk-form-item):after,
174
+ :where(.bk-form-item):before {
175
175
  display: table;
176
176
  content: '';
177
177
  }
178
- .bk-form-item:after {
178
+ :where(.bk-form-item):after {
179
179
  clear: both;
180
180
  }
181
- .bk-form-label {
181
+ :where(.bk-form-label) {
182
182
  position: relative;
183
183
  float: left;
184
184
  padding-right: 22px;
@@ -190,18 +190,18 @@
190
190
  vertical-align: middle;
191
191
  box-sizing: border-box;
192
192
  }
193
- .bk-form-label-description {
193
+ :where(.bk-form-label-description) {
194
194
  cursor: pointer;
195
195
  border-bottom: 1px dashed #979ba5;
196
196
  }
197
- .bk-form-label-description-popper {
197
+ :where(.bk-form-label-description-popper) {
198
198
  max-width: 400px;
199
199
  }
200
- .bk-form-content {
200
+ :where(.bk-form-content) {
201
201
  position: relative;
202
202
  line-height: 32px;
203
203
  }
204
- .bk-form-error {
204
+ :where(.bk-form-error) {
205
205
  position: absolute;
206
206
  left: 0;
207
207
  padding-top: 4px;
@@ -211,7 +211,7 @@
211
211
  text-align: left;
212
212
  animation: form-error-appear-animation 0.15s;
213
213
  }
214
- .bk-form-error-tips {
214
+ :where(.bk-form-error-tips) {
215
215
  position: absolute;
216
216
  top: 8px;
217
217
  right: 8px;
@@ -219,65 +219,65 @@
219
219
  line-height: 1;
220
220
  color: #ea3636;
221
221
  }
222
- .bk-compose-form-item {
222
+ :where(.bk-compose-form-item) {
223
223
  display: inline-block;
224
224
  }
225
- .bk-compose-form-item > .bk-input,
226
- .bk-compose-form-item > .bk-textarea,
227
- .bk-compose-form-item > .bk-select,
228
- .bk-compose-form-item > .bk-cascade,
229
- .bk-compose-form-item > .bk-color-picker,
230
- .bk-compose-form-item > .bk-date-picker,
231
- .bk-compose-form-item > .bk-tag-input,
232
- .bk-compose-form-item > .bk-tag-selector,
233
- .bk-compose-form-item > .bk-search-select {
225
+ :where(.bk-compose-form-item) > .bk-input,
226
+ :where(.bk-compose-form-item) > .bk-textarea,
227
+ :where(.bk-compose-form-item) > .bk-select,
228
+ :where(.bk-compose-form-item) > .bk-cascade,
229
+ :where(.bk-compose-form-item) > .bk-color-picker,
230
+ :where(.bk-compose-form-item) > .bk-date-picker,
231
+ :where(.bk-compose-form-item) > .bk-tag-input,
232
+ :where(.bk-compose-form-item) > .bk-tag-selector,
233
+ :where(.bk-compose-form-item) > .bk-search-select {
234
234
  float: left;
235
235
  width: auto;
236
236
  margin-left: -1px;
237
237
  }
238
- .bk-compose-form-item .bk-input,
239
- .bk-compose-form-item .bk-form-password,
240
- .bk-compose-form-item .bk-textarea,
241
- .bk-compose-form-item .bk-select,
242
- .bk-compose-form-item .bk-cascade,
243
- .bk-compose-form-item .bk-color-picker,
244
- .bk-compose-form-item .bk-date-picker .bk-date-picker-editor,
245
- .bk-compose-form-item .bk-tag-input,
246
- .bk-compose-form-item .bk-search-select {
238
+ :where(.bk-compose-form-item) .bk-input,
239
+ :where(.bk-compose-form-item) .bk-form-password,
240
+ :where(.bk-compose-form-item) .bk-textarea,
241
+ :where(.bk-compose-form-item) .bk-select,
242
+ :where(.bk-compose-form-item) .bk-cascade,
243
+ :where(.bk-compose-form-item) .bk-color-picker,
244
+ :where(.bk-compose-form-item) .bk-date-picker .bk-date-picker-editor,
245
+ :where(.bk-compose-form-item) .bk-tag-input,
246
+ :where(.bk-compose-form-item) .bk-search-select {
247
247
  border-radius: 0;
248
248
  }
249
- .bk-compose-form-item .bk-input.control-active,
250
- .bk-compose-form-item .bk-select.is-focus,
251
- .bk-compose-form-item .bk-cascade.is-focus,
252
- .bk-compose-form-item .bk-color-picker.bk-color-picker-show-dropdown,
253
- .bk-compose-form-item .bk-color-picker:hover,
254
- .bk-compose-form-item .bk-date-picker .bk-date-picker-editor:focus,
255
- .bk-compose-form-item .bk-tag-input.active,
256
- .bk-compose-form-item .bk-tag-selector,
257
- .bk-compose-form-item .bk-search-select.is-focus {
249
+ :where(.bk-compose-form-item) .bk-input.control-active,
250
+ :where(.bk-compose-form-item) .bk-select.is-focus,
251
+ :where(.bk-compose-form-item) .bk-cascade.is-focus,
252
+ :where(.bk-compose-form-item) .bk-color-picker.bk-color-picker-show-dropdown,
253
+ :where(.bk-compose-form-item) .bk-color-picker:hover,
254
+ :where(.bk-compose-form-item) .bk-date-picker .bk-date-picker-editor:focus,
255
+ :where(.bk-compose-form-item) .bk-tag-input.active,
256
+ :where(.bk-compose-form-item) .bk-tag-selector,
257
+ :where(.bk-compose-form-item) .bk-search-select.is-focus {
258
258
  z-index: 1;
259
259
  opacity: 1;
260
260
  }
261
- .bk-compose-form-item .bk-compose-form-item-head.bk-input,
262
- .bk-compose-form-item .bk-compose-form-item-head.bk-select,
263
- .bk-compose-form-item .bk-compose-form-item-head.bk-cascade,
264
- .bk-compose-form-item .bk-compose-form-item-head.bk-color-picker,
265
- .bk-compose-form-item .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
266
- .bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
267
- .bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
268
- .bk-compose-form-item .bk-compose-form-item-head.bk-search-select {
261
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-input,
262
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-select,
263
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-cascade,
264
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-color-picker,
265
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
266
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-tag-input,
267
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-tag-input,
268
+ :where(.bk-compose-form-item) .bk-compose-form-item-head.bk-search-select {
269
269
  margin-left: 0;
270
270
  border-top-right-radius: 0px;
271
271
  border-bottom-right-radius: 0px;
272
272
  }
273
- .bk-compose-form-item .bk-compose-form-item-tail.bk-input,
274
- .bk-compose-form-item .bk-compose-form-item-tail.bk-select,
275
- .bk-compose-form-item .bk-compose-form-item-tail.bk-cascade,
276
- .bk-compose-form-item .bk-compose-form-item-tail.bk-color-picker,
277
- .bk-compose-form-item .bk-compose-form-item-tail.bk-date-picker,
278
- .bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
279
- .bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
280
- .bk-compose-form-item .bk-compose-form-item-tail.bk-search-select {
273
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-input,
274
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-select,
275
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-cascade,
276
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-color-picker,
277
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-date-picker,
278
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-tag-input,
279
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-tag-input,
280
+ :where(.bk-compose-form-item) .bk-compose-form-item-tail.bk-search-select {
281
281
  border-top-right-radius: 2px;
282
282
  border-bottom-right-radius: 2px;
283
283
  }
package/lib/image/image-viewer.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,25 +117,25 @@
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%);