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/tab/tab.css CHANGED
@@ -1,89 +1,89 @@
1
- .bk-tab {
1
+ :where(.bk-tab) {
2
2
  position: relative;
3
3
  display: flex;
4
4
  }
5
- .bk-tab--top {
5
+ :where(.bk-tab) .bk-tab--top {
6
6
  flex-direction: column;
7
7
  }
8
- .bk-tab--right {
8
+ :where(.bk-tab) .bk-tab--right {
9
9
  flex-direction: row-reverse;
10
10
  }
11
- .bk-tab-header {
11
+ :where(.bk-tab) .bk-tab-header {
12
12
  position: relative;
13
13
  display: flex;
14
14
  color: #63656e;
15
15
  }
16
- .bk-tab--left .bk-tab-header {
16
+ .bk-tab--left :where(.bk-tab) .bk-tab-header {
17
17
  border-right: 1px solid #dcdee5;
18
18
  }
19
- .bk-tab--right .bk-tab-header {
19
+ .bk-tab--right :where(.bk-tab) .bk-tab-header {
20
20
  border-left: 1px solid #dcdee5;
21
21
  }
22
- .bk-tab--vertical-tab .bk-tab-header {
22
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header {
23
23
  border: 0;
24
24
  }
25
- .bk-tab--left .bk-tab-header,
26
- .bk-tab--right .bk-tab-header {
25
+ .bk-tab--left :where(.bk-tab) .bk-tab-header,
26
+ .bk-tab--right :where(.bk-tab) .bk-tab-header {
27
27
  flex-direction: column;
28
28
  }
29
- .bk-tab--left .bk-tab-header > div,
30
- .bk-tab--right .bk-tab-header > div {
29
+ .bk-tab--left :where(.bk-tab) .bk-tab-header > div,
30
+ .bk-tab--right :where(.bk-tab) .bk-tab-header > div {
31
31
  flex-direction: column;
32
32
  }
33
- .bk-tab--card-tab .bk-tab-header,
34
- .bk-tab--vertical-tab .bk-tab-header {
35
- background: #F0F1F5;
33
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header,
34
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header {
35
+ background: #f0f1f5;
36
36
  }
37
- .bk-tab--card-tab .bk-tab-header {
37
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header {
38
38
  border-radius: 4px 4px 0;
39
39
  }
40
- .bk-tab--card .bk-tab-header,
41
- .bk-tab--vertical-card .bk-tab-header {
40
+ .bk-tab--card :where(.bk-tab) .bk-tab-header,
41
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header {
42
42
  border-bottom: 1px solid #dcdee5;
43
43
  }
44
- .bk-tab--border-card .bk-tab-header {
44
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header {
45
45
  border: solid #dcdee5;
46
46
  border-width: 1px 1px 1px 0;
47
47
  }
48
- .bk-tab--border-card .bk-tab-header {
49
- background: #FAFBFD;
48
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header {
49
+ background: #fafbfd;
50
50
  }
51
- .bk-tab--unborder-card .bk-tab-header {
51
+ .bk-tab--unborder-card :where(.bk-tab) .bk-tab-header {
52
52
  border-bottom: 1px solid #dcdee5;
53
53
  }
54
- .bk-tab-header > div {
54
+ :where(.bk-tab) .bk-tab-header > div {
55
55
  display: flex;
56
56
  flex-wrap: nowrap;
57
57
  }
58
- .bk-tab--card .bk-tab-header > div,
59
- .bk-tab--vertical-card .bk-tab-header > div,
60
- .bk-tab--border-card .bk-tab-header > div {
58
+ .bk-tab--card :where(.bk-tab) .bk-tab-header > div,
59
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header > div,
60
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header > div {
61
61
  margin-bottom: -1px;
62
62
  }
63
- .bk-tab-header-nav {
63
+ :where(.bk-tab) .bk-tab-header-nav {
64
64
  position: relative;
65
65
  }
66
- .bk-tab--top .bk-tab-header-nav {
66
+ .bk-tab--top :where(.bk-tab) .bk-tab-header-nav {
67
67
  overflow-x: auto;
68
68
  overflow-y: visible;
69
69
  }
70
- .bk-tab--left .bk-tab-header-nav,
71
- .bk-tab--right .bk-tab-header-nav {
70
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-nav,
71
+ .bk-tab--right :where(.bk-tab) .bk-tab-header-nav {
72
72
  overflow-x: visible;
73
73
  overflow-y: auto;
74
74
  }
75
- .bk-tab--card .bk-tab-header-nav,
76
- .bk-tab--border-card .bk-tab-header-nav,
77
- .bk-tab--vertical-card .bk-tab-header-nav {
75
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-nav,
76
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header-nav,
77
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-nav {
78
78
  border-left: 1px solid #dcdee5;
79
79
  }
80
- .bk-tab-header-nav::-webkit-scrollbar {
80
+ :where(.bk-tab) .bk-tab-header-nav::-webkit-scrollbar {
81
81
  display: none;
82
82
  width: 0;
83
83
  height: 0;
84
84
  }
85
- .bk-tab-header-next,
86
- .bk-tab-header-prev {
85
+ :where(.bk-tab) .bk-tab-header-next,
86
+ :where(.bk-tab) .bk-tab-header-prev {
87
87
  position: absolute;
88
88
  top: 1px;
89
89
  bottom: 1px;
@@ -91,51 +91,51 @@
91
91
  background: #fff;
92
92
  content: '';
93
93
  }
94
- .bk-tab-header-prev {
94
+ :where(.bk-tab) .bk-tab-header-prev {
95
95
  left: 1px;
96
96
  }
97
- .bk-tab-header-next {
97
+ :where(.bk-tab) .bk-tab-header-next {
98
98
  right: 1px;
99
99
  }
100
- .bk-tab-header-operation .bk-tab-header-item {
100
+ :where(.bk-tab) .bk-tab-header-operation .bk-tab-header-item {
101
101
  padding: 0 12px;
102
102
  }
103
- .bk-tab-header-setting {
103
+ :where(.bk-tab) .bk-tab-header-setting {
104
104
  justify-self: flex-end;
105
105
  margin-left: auto;
106
106
  white-space: nowrap;
107
107
  }
108
- .bk-tab-header-item {
108
+ :where(.bk-tab) .bk-tab-header-item {
109
109
  display: flex;
110
110
  white-space: nowrap;
111
111
  cursor: pointer;
112
112
  justify-content: center;
113
113
  align-items: center;
114
114
  }
115
- .bk-tab--top .bk-tab-header-item {
115
+ .bk-tab--top :where(.bk-tab) .bk-tab-header-item {
116
116
  padding: 0 20px;
117
117
  }
118
- .bk-tab--left .bk-tab-header-item,
119
- .bk-tab--right .bk-tab-header-item {
118
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-item,
119
+ .bk-tab--right :where(.bk-tab) .bk-tab-header-item {
120
120
  padding: 0 12px;
121
121
  }
122
- .bk-tab--left .bk-tab-header-item {
122
+ .bk-tab--left :where(.bk-tab) .bk-tab-header-item {
123
123
  text-align: right;
124
124
  }
125
- .bk-tab--card .bk-tab-header-item,
126
- .bk-tab--vertical-card .bk-tab-header-item {
125
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-item,
126
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-item {
127
127
  border-top: 1px solid #dcdee5;
128
128
  }
129
- .bk-tab--card .bk-tab-header-item,
130
- .bk-tab--border-card .bk-tab-header-item,
131
- .bk-tab--vertical-card .bk-tab-header-item {
129
+ .bk-tab--card :where(.bk-tab) .bk-tab-header-item,
130
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header-item,
131
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header-item {
132
132
  border-right: 1px solid #dcdee5;
133
133
  }
134
- .bk-tab--card-tab .bk-tab-header-item {
134
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item {
135
135
  position: relative;
136
136
  }
137
- .bk-tab--card-tab .bk-tab-header-item:not(:first-of-type):before,
138
- .bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
137
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:not(:first-of-type):before,
138
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:last-of-type:after {
139
139
  position: absolute;
140
140
  top: 50%;
141
141
  left: 0;
@@ -146,30 +146,30 @@
146
146
  background: #c4c6cc;
147
147
  content: '';
148
148
  }
149
- .bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
149
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header-item:last-of-type:after {
150
150
  right: 0;
151
151
  left: initial;
152
152
  }
153
- .bk-tab--card-grid .bk-tab-header-item {
153
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-header-item {
154
154
  height: 40px;
155
155
  margin-right: 8px;
156
156
  line-height: 40px;
157
157
  background: #eaebf0;
158
158
  border-radius: 4px 4px 0 0;
159
159
  }
160
- .bk-tab-header-operation .bk-tab-header-item {
160
+ .bk-tab-header-operation :where(.bk-tab) .bk-tab-header-item {
161
161
  padding-right: 12px;
162
162
  padding-left: 12px;
163
163
  }
164
- .bk-tab-header-item:hover {
164
+ :where(.bk-tab) .bk-tab-header-item:hover {
165
165
  color: #3a84ff;
166
166
  }
167
- .bk-tab-header-item:hover .bk-tab-header--close {
167
+ :where(.bk-tab) .bk-tab-header-item:hover .bk-tab-header--close {
168
168
  display: block;
169
169
  margin-left: 5px;
170
170
  color: #ea3636;
171
171
  }
172
- .bk-tab-header--active {
172
+ :where(.bk-tab) .bk-tab-header--active {
173
173
  color: #3a84ff;
174
174
  /* 激活边框，跟随，不再用固定样式
175
175
  //.@{bk-prefix}-tab--unborder-card & {
@@ -184,61 +184,61 @@
184
184
  }
185
185
  */
186
186
  }
187
- .bk-tab--card .bk-tab-header--active,
188
- .bk-tab--border-card .bk-tab-header--active,
189
- .bk-tab--vertical-card .bk-tab-header--active {
187
+ .bk-tab--card :where(.bk-tab) .bk-tab-header--active,
188
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-header--active,
189
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-header--active {
190
190
  background: white;
191
191
  border-bottom-color: white;
192
192
  }
193
- .bk-tab--card-tab .bk-tab-header--active,
194
- .bk-tab--vertical-tab .bk-tab-header--active {
193
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active,
194
+ .bk-tab--vertical-tab :where(.bk-tab) .bk-tab-header--active {
195
195
  background: #fff;
196
196
  }
197
- .bk-tab--card-tab .bk-tab-header--active {
197
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active {
198
198
  border-radius: 4px 4px 0 0;
199
199
  }
200
- .bk-tab--card-tab .bk-tab-header--active:after,
201
- .bk-tab--card-tab .bk-tab-header--active:before,
202
- .bk-tab--card-tab .bk-tab-header--active + .bk-tab-header-item:before {
200
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active:after,
201
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active:before,
202
+ .bk-tab--card-tab :where(.bk-tab) .bk-tab-header--active + .bk-tab-header-item:before {
203
203
  /* stylelint-disable-next-line declaration-no-important */
204
204
  display: none !important;
205
205
  }
206
- .bk-tab--card-grid .bk-tab-header--active {
206
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-header--active {
207
207
  background: #fff;
208
208
  }
209
- .bk-tab-header--close {
209
+ :where(.bk-tab) .bk-tab-header--close {
210
210
  display: none;
211
211
  font-size: 16px;
212
212
  color: #c4c6cc;
213
213
  }
214
- .bk-tab-header--disabled {
214
+ :where(.bk-tab) .bk-tab-header--disabled {
215
215
  cursor: not-allowed;
216
216
  }
217
- .bk-tab-header--disabled,
218
- .bk-tab-header--disabled:hover {
217
+ :where(.bk-tab) .bk-tab-header--disabled,
218
+ :where(.bk-tab) .bk-tab-header--disabled:hover {
219
219
  color: #aaa;
220
220
  }
221
- .bk-tab-header-active-bar {
221
+ :where(.bk-tab) .bk-tab-header-active-bar {
222
222
  position: absolute;
223
223
  width: 0;
224
224
  height: 0;
225
225
  background: #3a84ff;
226
226
  transition: all ease-in 300ms;
227
227
  }
228
- .bk-tab-content {
228
+ :where(.bk-tab) .bk-tab-content {
229
229
  flex: 1;
230
230
  padding: 10px;
231
231
  }
232
- .bk-tab--border-card .bk-tab-content,
233
- .bk-tab--vertical-card .bk-tab-content {
232
+ .bk-tab--border-card :where(.bk-tab) .bk-tab-content,
233
+ .bk-tab--vertical-card :where(.bk-tab) .bk-tab-content {
234
234
  border: solid #dcdee5;
235
235
  border-width: 0 1px 1px;
236
236
  }
237
- .bk-tab--card-grid .bk-tab-content {
237
+ .bk-tab--card-grid :where(.bk-tab) .bk-tab-content {
238
238
  background: #fff;
239
239
  border-radius: 0 4px 4px 4px;
240
240
  box-shadow: 0 2px 4px 0 #1919290d;
241
241
  }
242
- .bk-tab-panel {
242
+ :where(.bk-tab) .bk-tab-panel {
243
243
  height: 100%;
244
244
  }
package/lib/tab/tab.less CHANGED
@@ -3,27 +3,26 @@
3
3
  @tab-color: @default-color;
4
4
  @tab-border: @disable-color;
5
5
  @tab-active: @primary-color;
6
- @tab-header-bg: #FAFBFD;
6
+ @tab-header-bg: #fafbfd;
7
7
  @tab-white: @white-color;
8
8
  @tab-gray: @light-gray;
9
- @tab-card-tab-bg: #F0F1F5;
9
+ @tab-card-tab-bg: #f0f1f5;
10
10
  @tab-card-tab-divider: #c4c6cc;
11
11
  @tab-disable-color: #aaa;
12
12
 
13
- .@{bk-prefix}-tab {
13
+ :where(.@{bk-prefix}-tab) {
14
14
  position: relative;
15
15
  display: flex;
16
16
 
17
- &--top {
17
+ .@{bk-prefix}-tab--top {
18
18
  flex-direction: column;
19
19
  }
20
20
 
21
-
22
- &--right {
21
+ .@{bk-prefix}-tab--right {
23
22
  flex-direction: row-reverse;
24
23
  }
25
24
 
26
- &-header {
25
+ .@{bk-prefix}-tab-header {
27
26
  position: relative;
28
27
  display: flex;
29
28
  color: @tab-color;
@@ -40,7 +39,8 @@
40
39
  border: 0;
41
40
  }
42
41
 
43
- .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
42
+ .@{bk-prefix}-tab--left &,
43
+ .@{bk-prefix}-tab--right & {
44
44
  flex-direction: column;
45
45
 
46
46
  > div {
@@ -48,7 +48,8 @@
48
48
  }
49
49
  }
50
50
 
51
- .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
51
+ .@{bk-prefix}-tab--card-tab &,
52
+ .@{bk-prefix}-tab--vertical-tab & {
52
53
  background: @tab-card-tab-bg;
53
54
  }
54
55
 
@@ -56,7 +57,8 @@
56
57
  border-radius: 4px 4px 0;
57
58
  }
58
59
 
59
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
60
+ .@{bk-prefix}-tab--card &,
61
+ .@{bk-prefix}-tab--vertical-card & {
60
62
  border-bottom: 1px solid @tab-border;
61
63
  }
62
64
 
@@ -73,11 +75,12 @@
73
75
  border-bottom: 1px solid @tab-border;
74
76
  }
75
77
 
76
-
77
78
  > div {
78
79
  display: flex;
79
80
  flex-wrap: nowrap;
80
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & ,.@{bk-prefix}-tab--border-card & {
81
+ .@{bk-prefix}-tab--card &,
82
+ .@{bk-prefix}-tab--vertical-card &,
83
+ .@{bk-prefix}-tab--border-card & {
81
84
  margin-bottom: -1px;
82
85
  }
83
86
  }
@@ -91,13 +94,15 @@
91
94
  overflow-y: visible;
92
95
  }
93
96
 
94
- .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
97
+ .@{bk-prefix}-tab--left &,
98
+ .@{bk-prefix}-tab--right & {
95
99
  overflow-x: visible;
96
100
  overflow-y: auto;
97
101
  }
98
102
 
99
-
100
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
103
+ .@{bk-prefix}-tab--card &,
104
+ .@{bk-prefix}-tab--border-card &,
105
+ .@{bk-prefix}-tab--vertical-card & {
101
106
  border-left: 1px solid @tab-border;
102
107
  }
103
108
 
@@ -139,7 +144,6 @@
139
144
  white-space: nowrap;
140
145
  }
141
146
 
142
-
143
147
  &-item {
144
148
  display: flex;
145
149
  white-space: nowrap;
@@ -151,7 +155,8 @@
151
155
  padding: 0 20px;
152
156
  }
153
157
 
154
- .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
158
+ .@{bk-prefix}-tab--left &,
159
+ .@{bk-prefix}-tab--right & {
155
160
  padding: 0 12px;
156
161
  }
157
162
 
@@ -159,11 +164,14 @@
159
164
  text-align: right;
160
165
  }
161
166
 
162
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
167
+ .@{bk-prefix}-tab--card &,
168
+ .@{bk-prefix}-tab--vertical-card & {
163
169
  border-top: 1px solid @tab-border;
164
170
  }
165
171
 
166
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
172
+ .@{bk-prefix}-tab--card &,
173
+ .@{bk-prefix}-tab--border-card &,
174
+ .@{bk-prefix}-tab--vertical-card & {
167
175
  border-right: 1px solid @tab-border;
168
176
 
169
177
  //&:last-of-type {
@@ -191,8 +199,6 @@
191
199
  right: 0;
192
200
  left: initial;
193
201
  }
194
-
195
-
196
202
  }
197
203
 
198
204
  .@{bk-prefix}-tab--card-grid & {
@@ -208,7 +214,6 @@
208
214
  padding-left: 12px;
209
215
  }
210
216
 
211
-
212
217
  &:hover {
213
218
  color: @tab-active;
214
219
 
@@ -218,30 +223,32 @@
218
223
  color: @danger-color;
219
224
  }
220
225
  }
221
-
222
226
  }
223
227
 
224
228
  &--active {
225
229
  color: @tab-active;
226
230
 
227
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
231
+ .@{bk-prefix}-tab--card &,
232
+ .@{bk-prefix}-tab--border-card &,
233
+ .@{bk-prefix}-tab--vertical-card & {
228
234
  background: @tab-white;
229
235
  border-bottom-color: @tab-white;
230
236
  }
231
237
 
232
-
233
- .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
238
+ .@{bk-prefix}-tab--card-tab &,
239
+ .@{bk-prefix}-tab--vertical-tab & {
234
240
  background: #fff;
235
241
  }
236
242
 
237
243
  .@{bk-prefix}-tab--card-tab & {
238
244
  border-radius: 4px 4px 0 0;
239
245
 
240
- &:after, &:before, & + .@{bk-prefix}-tab-header-item:before {
246
+ &:after,
247
+ &:before,
248
+ & + .@{bk-prefix}-tab-header-item:before {
241
249
  /* stylelint-disable-next-line declaration-no-important */
242
250
  display: none !important;
243
251
  }
244
-
245
252
  }
246
253
 
247
254
  .@{bk-prefix}-tab--card-grid & {
@@ -260,7 +267,6 @@
260
267
  border-left: 2px solid @tab-active;
261
268
  }
262
269
  */
263
-
264
270
  }
265
271
 
266
272
  &--close {
@@ -279,7 +285,7 @@
279
285
  }
280
286
  }
281
287
 
282
- &-header-active-bar {
288
+ .@{bk-prefix}-tab-header-active-bar {
283
289
  position: absolute;
284
290
  width: 0;
285
291
  height: 0;
@@ -287,12 +293,12 @@
287
293
  transition: all ease-in 300ms;
288
294
  }
289
295
 
290
- &-content {
296
+ .@{bk-prefix}-tab-content {
291
297
  flex: 1;
292
298
  padding: 10px;
293
299
 
294
-
295
- .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
300
+ .@{bk-prefix}-tab--border-card &,
301
+ .@{bk-prefix}-tab--vertical-card & {
296
302
  border: solid @tab-border;
297
303
  border-width: 0 1px 1px;
298
304
  }
@@ -304,12 +310,7 @@
304
310
  }
305
311
  }
306
312
 
307
- &-panel {
313
+ .@{bk-prefix}-tab-panel {
308
314
  height: 100%;
309
315
  }
310
-
311
-
312
316
  }
313
-
314
-
315
-