bkui-vue 0.0.1-beta.412 → 0.0.1-beta.413

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 (35) hide show
  1. package/dist/index.cjs.js +26 -26
  2. package/dist/index.esm.js +49 -25
  3. package/dist/index.umd.js +23 -23
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/cascader/cascader.css +0 -1
  7. package/lib/cascader/cascader.less +0 -1
  8. package/lib/cascader/cascader.variable.css +0 -1
  9. package/lib/notify/notify.css +1 -1
  10. package/lib/notify/notify.less +2 -2
  11. package/lib/notify/notify.variable.css +1 -1
  12. package/lib/radio/index.d.ts +7 -0
  13. package/lib/radio/index.js +1 -1
  14. package/lib/radio/radio-button.css +118 -0
  15. package/lib/radio/radio-button.less +161 -0
  16. package/lib/radio/radio-button.variable.css +238 -0
  17. package/lib/radio/radio-group.d.ts +10 -0
  18. package/lib/radio/radio.css +0 -69
  19. package/lib/radio/radio.less +1 -87
  20. package/lib/radio/radio.variable.css +0 -69
  21. package/lib/search-select/index.js +1 -1
  22. package/lib/styles/index.d.ts +1 -0
  23. package/lib/tab/index.d.ts +11 -11
  24. package/lib/tab/index.js +1 -1
  25. package/lib/tab/props.d.ts +6 -5
  26. package/lib/tab/tab-nav.d.ts +5 -5
  27. package/lib/tab/tab.css +62 -53
  28. package/lib/tab/tab.d.ts +5 -5
  29. package/lib/tab/tab.less +82 -59
  30. package/lib/tab/tab.variable.css +62 -53
  31. package/lib/tree/index.d.ts +5 -46
  32. package/lib/tree/index.js +1 -1
  33. package/lib/tree/props.d.ts +1 -9
  34. package/lib/tree/tree.d.ts +2 -21
  35. package/package.json +4 -4
package/lib/tab/tab-nav.d.ts CHANGED
@@ -23,8 +23,8 @@ declare const _default: import("vue").DefineComponent<{
23
23
  active: import("vue-types").VueTypeDef<string | number> & {
24
24
  default: string | number;
25
25
  };
26
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
27
- default: "card" | "border-card" | "unborder-card" | "card-tab";
26
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
27
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
28
28
  };
29
29
  activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
30
30
  default: string;
@@ -121,8 +121,8 @@ declare const _default: import("vue").DefineComponent<{
121
121
  active: import("vue-types").VueTypeDef<string | number> & {
122
122
  default: string | number;
123
123
  };
124
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
125
- default: "card" | "border-card" | "unborder-card" | "card-tab";
124
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
125
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
126
126
  };
127
127
  activeBarColor: import("vue-types").VueTypeValidableDef<string> & {
128
128
  default: string;
@@ -175,7 +175,7 @@ declare const _default: import("vue").DefineComponent<{
175
175
  default: number;
176
176
  };
177
177
  }>>, {
178
- type: "card" | "border-card" | "unborder-card" | "card-tab";
178
+ type: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
179
179
  active: string | number;
180
180
  closable: boolean;
181
181
  sortType: "replace" | "insert";
package/lib/tab/tab.css CHANGED
@@ -13,6 +13,23 @@
13
13
  display: flex;
14
14
  color: #63656e;
15
15
  }
16
+ .bk-tab--left .bk-tab-header {
17
+ border-right: 1px solid #dcdee5;
18
+ }
19
+ .bk-tab--right .bk-tab-header {
20
+ border-left: 1px solid #dcdee5;
21
+ }
22
+ .bk-tab--vertical-tab .bk-tab-header {
23
+ border: 0;
24
+ }
25
+ .bk-tab--left .bk-tab-header,
26
+ .bk-tab--right .bk-tab-header {
27
+ flex-direction: column;
28
+ }
29
+ .bk-tab--left .bk-tab-header > div,
30
+ .bk-tab--right .bk-tab-header > div {
31
+ flex-direction: column;
32
+ }
16
33
  .bk-tab--card-tab .bk-tab-header,
17
34
  .bk-tab--vertical-tab .bk-tab-header {
18
35
  background: #F0F1F5;
@@ -20,15 +37,28 @@
20
37
  .bk-tab--card-tab .bk-tab-header {
21
38
  border-radius: 4px 4px 0;
22
39
  }
40
+ .bk-tab--card .bk-tab-header,
41
+ .bk-tab--vertical-card .bk-tab-header {
42
+ border-bottom: 1px solid #dcdee5;
43
+ }
44
+ .bk-tab--border-card .bk-tab-header {
45
+ border: solid #dcdee5;
46
+ border-width: 1px 1px 1px 0;
47
+ }
48
+ .bk-tab--border-card .bk-tab-header {
49
+ background: #FAFBFD;
50
+ }
51
+ .bk-tab--unborder-card .bk-tab-header {
52
+ border-bottom: 1px solid #dcdee5;
53
+ }
23
54
  .bk-tab-header > div {
24
55
  display: flex;
25
56
  flex-wrap: nowrap;
26
- margin-bottom: -1px;
27
57
  }
28
58
  .bk-tab--card .bk-tab-header > div,
29
- .bk-tab--border-card .bk-tab-header > div,
30
- .bk-tab--vertical-card .bk-tab-header > div {
31
- border-right: 1px solid #dcdee5;
59
+ .bk-tab--vertical-card .bk-tab-header > div,
60
+ .bk-tab--border-card .bk-tab-header > div {
61
+ margin-bottom: -1px;
32
62
  }
33
63
  .bk-tab-header-nav {
34
64
  position: relative;
@@ -73,37 +103,7 @@
73
103
  .bk-tab-header-setting {
74
104
  justify-self: flex-end;
75
105
  margin-left: auto;
76
- }
77
- .bk-tab--left .bk-tab-header {
78
- border-right: 1px solid #dcdee5;
79
- }
80
- .bk-tab--right .bk-tab-header {
81
- border-left: 1px solid #dcdee5;
82
- }
83
- .bk-tab--vertical-tab .bk-tab-header {
84
- border: 0;
85
- }
86
- .bk-tab--left .bk-tab-header,
87
- .bk-tab--right .bk-tab-header {
88
- flex-direction: column;
89
- }
90
- .bk-tab--left .bk-tab-header > div,
91
- .bk-tab--right .bk-tab-header > div {
92
- flex-direction: column;
93
- }
94
- .bk-tab--card .bk-tab-header,
95
- .bk-tab--vertical-card .bk-tab-header {
96
- border-bottom: 1px solid #dcdee5;
97
- }
98
- .bk-tab--border-card .bk-tab-header {
99
- border: solid #dcdee5;
100
- border-width: 1px 1px 1px 0;
101
- }
102
- .bk-tab--border-card .bk-tab-header {
103
- background: #FAFBFD;
104
- }
105
- .bk-tab--unborder-card .bk-tab-header {
106
- border-bottom: 1px solid #dcdee5;
106
+ white-space: nowrap;
107
107
  }
108
108
  .bk-tab-header-item {
109
109
  display: flex;
@@ -112,14 +112,6 @@
112
112
  justify-content: center;
113
113
  align-items: center;
114
114
  }
115
- .bk-tab-header-item:hover {
116
- color: #3a84ff;
117
- }
118
- .bk-tab-header-item:hover .bk-tab-header-item-close {
119
- display: block;
120
- margin-left: 5px;
121
- color: #ea3636;
122
- }
123
115
  .bk-tab--top .bk-tab-header-item {
124
116
  padding: 0 20px;
125
117
  }
@@ -138,12 +130,6 @@
138
130
  .bk-tab--border-card .bk-tab-header-item,
139
131
  .bk-tab--vertical-card .bk-tab-header-item {
140
132
  border-right: 1px solid #dcdee5;
141
- border-bottom: 1px solid #dcdee5;
142
- }
143
- .bk-tab--card .bk-tab-header-item:last-of-type,
144
- .bk-tab--border-card .bk-tab-header-item:last-of-type,
145
- .bk-tab--vertical-card .bk-tab-header-item:last-of-type {
146
- border-right: none;
147
133
  }
148
134
  .bk-tab--card-tab .bk-tab-header-item {
149
135
  position: relative;
@@ -164,14 +150,24 @@
164
150
  right: 0;
165
151
  left: initial;
166
152
  }
153
+ .bk-tab--card-grid .bk-tab-header-item {
154
+ height: 40px;
155
+ line-height: 40px;
156
+ background: #EAEBF0;
157
+ border-radius: 4px 4px 0 0;
158
+ margin-right: 8px;
159
+ }
167
160
  .bk-tab-header-operation .bk-tab-header-item {
168
161
  padding-right: 12px;
169
162
  padding-left: 12px;
170
163
  }
171
- .bk-tab-header-item-close {
172
- display: none;
173
- font-size: 16px;
174
- color: #c4c6cc;
164
+ .bk-tab-header-item:hover {
165
+ color: #3a84ff;
166
+ }
167
+ .bk-tab-header-item:hover .bk-tab-header--close {
168
+ display: block;
169
+ margin-left: 5px;
170
+ color: #ea3636;
175
171
  }
176
172
  .bk-tab-header--active {
177
173
  color: #3a84ff;
@@ -207,6 +203,14 @@
207
203
  /* stylelint-disable-next-line declaration-no-important */
208
204
  display: none !important;
209
205
  }
206
+ .bk-tab--card-grid .bk-tab-header--active {
207
+ background: #FFFFFF;
208
+ }
209
+ .bk-tab-header--close {
210
+ display: none;
211
+ font-size: 16px;
212
+ color: #c4c6cc;
213
+ }
210
214
  .bk-tab-header--disabled {
211
215
  color: #aaa;
212
216
  pointer-events: none;
@@ -228,6 +232,11 @@
228
232
  border: solid #dcdee5;
229
233
  border-width: 0 1px 1px;
230
234
  }
235
+ .bk-tab--card-grid .bk-tab-content {
236
+ background: #FFFFFF;
237
+ box-shadow: 0 2px 4px 0 #1919290d;
238
+ border-radius: 0 4px 4px 4px;
239
+ }
231
240
  .bk-tab-panel {
232
241
  height: 100%;
233
242
  }
package/lib/tab/tab.d.ts CHANGED
@@ -2,8 +2,8 @@ declare const _default: import("vue").DefineComponent<{
2
2
  active: import("vue-types").VueTypeDef<string | number> & {
3
3
  default: string | number;
4
4
  };
5
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
6
- default: "card" | "border-card" | "unborder-card" | "card-tab";
5
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
6
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
7
7
  };
8
8
  tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
9
9
  default: "top" | "right" | "left";
@@ -71,8 +71,8 @@ declare const _default: import("vue").DefineComponent<{
71
71
  active: import("vue-types").VueTypeDef<string | number> & {
72
72
  default: string | number;
73
73
  };
74
- type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
75
- default: "card" | "border-card" | "unborder-card" | "card-tab";
74
+ type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab" | "card-grid"> & {
75
+ default: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
76
76
  };
77
77
  tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
78
78
  default: "top" | "right" | "left";
@@ -141,7 +141,7 @@ declare const _default: import("vue").DefineComponent<{
141
141
  "onUpdate:active"?: (...args: any[]) => any;
142
142
  onSort?: (...args: any[]) => any;
143
143
  }, {
144
- type: "card" | "border-card" | "unborder-card" | "card-tab";
144
+ type: "card" | "border-card" | "unborder-card" | "card-tab" | "card-grid";
145
145
  active: string | number;
146
146
  extCls: string;
147
147
  closable: boolean;
package/lib/tab/tab.less CHANGED
@@ -28,6 +28,26 @@
28
28
  display: flex;
29
29
  color: @tab-color;
30
30
 
31
+ .@{bk-prefix}-tab--left & {
32
+ border-right: 1px solid @tab-border;
33
+ }
34
+
35
+ .@{bk-prefix}-tab--right & {
36
+ border-left: 1px solid @tab-border;
37
+ }
38
+
39
+ .@{bk-prefix}-tab--vertical-tab & {
40
+ border: 0;
41
+ }
42
+
43
+ .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
44
+ flex-direction: column;
45
+
46
+ > div {
47
+ flex-direction: column;
48
+ }
49
+ }
50
+
31
51
  .@{bk-prefix}-tab--card-tab &, .@{bk-prefix}-tab--vertical-tab & {
32
52
  background: @tab-card-tab-bg;
33
53
  }
@@ -36,19 +56,38 @@
36
56
  border-radius: 4px 4px 0;
37
57
  }
38
58
 
59
+ .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
60
+ border-bottom: 1px solid @tab-border;
61
+ }
62
+
63
+ .@{bk-prefix}-tab--border-card & {
64
+ border: solid @tab-border;
65
+ border-width: 1px 1px 1px 0;
66
+ }
67
+
68
+ .@{bk-prefix}-tab--border-card & {
69
+ background: @tab-header-bg;
70
+ }
71
+
72
+ .@{bk-prefix}-tab--unborder-card & {
73
+ border-bottom: 1px solid @tab-border;
74
+ }
75
+
76
+
77
+
78
+
39
79
  > div {
40
80
  display: flex;
41
-
42
81
  flex-wrap: nowrap;
43
- margin-bottom: -1px;
44
-
45
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
46
- border-right: 1px solid @tab-border;
82
+ .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & ,.@{bk-prefix}-tab--border-card &{
83
+ margin-bottom: -1px;
47
84
  }
48
85
  }
49
86
 
50
87
  &-nav {
51
88
  position: relative;
89
+ //width: 100%;
90
+
52
91
  .@{bk-prefix}-tab--top & {
53
92
  overflow-x: auto;
54
93
  overflow-y: visible;
@@ -99,44 +138,9 @@
99
138
  &-setting {
100
139
  justify-self: flex-end;
101
140
  margin-left: auto;
141
+ white-space: nowrap;
102
142
  }
103
143
 
104
- .@{bk-prefix}-tab--left & {
105
- border-right: 1px solid @tab-border;
106
- }
107
-
108
- .@{bk-prefix}-tab--right & {
109
- border-left: 1px solid @tab-border;
110
- }
111
-
112
- .@{bk-prefix}-tab--vertical-tab & {
113
- border: 0;
114
- }
115
-
116
- .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
117
- flex-direction: column;
118
-
119
- > div {
120
- flex-direction: column;
121
- }
122
- }
123
-
124
- .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
125
- border-bottom: 1px solid @tab-border;
126
- }
127
-
128
- .@{bk-prefix}-tab--border-card & {
129
- border: solid @tab-border;
130
- border-width: 1px 1px 1px 0;
131
- }
132
-
133
- .@{bk-prefix}-tab--border-card & {
134
- background: @tab-header-bg;
135
- }
136
-
137
- .@{bk-prefix}-tab--unborder-card & {
138
- border-bottom: 1px solid @tab-border;
139
- }
140
144
 
141
145
  &-item {
142
146
  display: flex;
@@ -145,16 +149,6 @@
145
149
  justify-content: center;
146
150
  align-items: center;
147
151
 
148
- &:hover {
149
- color: @tab-active;
150
-
151
- .@{bk-prefix}-tab-header-item-close {
152
- display: block;
153
- margin-left: 5px;
154
- color: @danger-color;
155
- }
156
- }
157
-
158
152
  .@{bk-prefix}-tab--top & {
159
153
  padding: 0 20px;
160
154
  }
@@ -173,11 +167,10 @@
173
167
 
174
168
  .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
175
169
  border-right: 1px solid @tab-border;
176
- border-bottom: 1px solid @tab-border;
177
170
 
178
- &:last-of-type {
179
- border-right: none;
180
- }
171
+ //&:last-of-type {
172
+ // border-right: none;
173
+ //}
181
174
  }
182
175
 
183
176
  .@{bk-prefix}-tab--card-tab & {
@@ -204,15 +197,28 @@
204
197
 
205
198
  }
206
199
 
200
+ .@{bk-prefix}-tab--card-grid & {
201
+ height: 40px;
202
+ line-height: 40px;
203
+ background: #EAEBF0;
204
+ border-radius: 4px 4px 0 0;
205
+ margin-right: 8px;
206
+ }
207
+
207
208
  .@{bk-prefix}-tab-header-operation & {
208
209
  padding-right: 12px;
209
210
  padding-left: 12px;
210
211
  }
211
212
 
212
- &-close {
213
- display: none;
214
- font-size: 16px;
215
- color: @tab-gray;
213
+
214
+ &:hover {
215
+ color: @tab-active;
216
+
217
+ .@{bk-prefix}-tab-header--close {
218
+ display: block;
219
+ margin-left: 5px;
220
+ color: @danger-color;
221
+ }
216
222
  }
217
223
 
218
224
  }
@@ -240,6 +246,10 @@
240
246
 
241
247
  }
242
248
 
249
+ .@{bk-prefix}-tab--card-grid & {
250
+ background: #FFFFFF;
251
+ }
252
+
243
253
  /* 激活边框，跟随，不再用固定样式
244
254
  //.@{bk-prefix}-tab--unborder-card & {
245
255
  // border-bottom: 2px solid @tab-active;
@@ -255,6 +265,12 @@
255
265
 
256
266
  }
257
267
 
268
+ &--close {
269
+ display: none;
270
+ font-size: 16px;
271
+ color: @tab-gray;
272
+ }
273
+
258
274
  &--disabled {
259
275
  color: @tab-disable-color;
260
276
  pointer-events: none;
@@ -274,10 +290,17 @@
274
290
  flex: 1;
275
291
  padding: 10px;
276
292
 
293
+
277
294
  .@{bk-prefix}-tab--border-card &, .@{bk-prefix}-tab--vertical-card & {
278
295
  border: solid @tab-border;
279
296
  border-width: 0 1px 1px;
280
297
  }
298
+
299
+ .@{bk-prefix}-tab--card-grid & {
300
+ background: #FFFFFF;
301
+ box-shadow: 0 2px 4px 0 #1919290d;
302
+ border-radius: 0 4px 4px 4px;
303
+ }
281
304
  }
282
305
 
283
306
  &-panel {
package/lib/tab/tab.variable.css CHANGED
@@ -133,6 +133,23 @@
133
133
  display: flex;
134
134
  color: var(--default-color);
135
135
  }
136
+ .bk-tab--left .bk-tab-header {
137
+ border-right: 1px solid var(--disable-color);
138
+ }
139
+ .bk-tab--right .bk-tab-header {
140
+ border-left: 1px solid var(--disable-color);
141
+ }
142
+ .bk-tab--vertical-tab .bk-tab-header {
143
+ border: 0;
144
+ }
145
+ .bk-tab--left .bk-tab-header,
146
+ .bk-tab--right .bk-tab-header {
147
+ flex-direction: column;
148
+ }
149
+ .bk-tab--left .bk-tab-header > div,
150
+ .bk-tab--right .bk-tab-header > div {
151
+ flex-direction: column;
152
+ }
136
153
  .bk-tab--card-tab .bk-tab-header,
137
154
  .bk-tab--vertical-tab .bk-tab-header {
138
155
  background: #F0F1F5;
@@ -140,15 +157,28 @@
140
157
  .bk-tab--card-tab .bk-tab-header {
141
158
  border-radius: 4px 4px 0;
142
159
  }
160
+ .bk-tab--card .bk-tab-header,
161
+ .bk-tab--vertical-card .bk-tab-header {
162
+ border-bottom: 1px solid var(--disable-color);
163
+ }
164
+ .bk-tab--border-card .bk-tab-header {
165
+ border: solid var(--disable-color);
166
+ border-width: 1px 1px 1px 0;
167
+ }
168
+ .bk-tab--border-card .bk-tab-header {
169
+ background: #FAFBFD;
170
+ }
171
+ .bk-tab--unborder-card .bk-tab-header {
172
+ border-bottom: 1px solid var(--disable-color);
173
+ }
143
174
  .bk-tab-header > div {
144
175
  display: flex;
145
176
  flex-wrap: nowrap;
146
- margin-bottom: -1px;
147
177
  }
148
178
  .bk-tab--card .bk-tab-header > div,
149
- .bk-tab--border-card .bk-tab-header > div,
150
- .bk-tab--vertical-card .bk-tab-header > div {
151
- border-right: 1px solid var(--disable-color);
179
+ .bk-tab--vertical-card .bk-tab-header > div,
180
+ .bk-tab--border-card .bk-tab-header > div {
181
+ margin-bottom: -1px;
152
182
  }
153
183
  .bk-tab-header-nav {
154
184
  position: relative;
@@ -193,37 +223,7 @@
193
223
  .bk-tab-header-setting {
194
224
  justify-self: flex-end;
195
225
  margin-left: auto;
196
- }
197
- .bk-tab--left .bk-tab-header {
198
- border-right: 1px solid var(--disable-color);
199
- }
200
- .bk-tab--right .bk-tab-header {
201
- border-left: 1px solid var(--disable-color);
202
- }
203
- .bk-tab--vertical-tab .bk-tab-header {
204
- border: 0;
205
- }
206
- .bk-tab--left .bk-tab-header,
207
- .bk-tab--right .bk-tab-header {
208
- flex-direction: column;
209
- }
210
- .bk-tab--left .bk-tab-header > div,
211
- .bk-tab--right .bk-tab-header > div {
212
- flex-direction: column;
213
- }
214
- .bk-tab--card .bk-tab-header,
215
- .bk-tab--vertical-card .bk-tab-header {
216
- border-bottom: 1px solid var(--disable-color);
217
- }
218
- .bk-tab--border-card .bk-tab-header {
219
- border: solid var(--disable-color);
220
- border-width: 1px 1px 1px 0;
221
- }
222
- .bk-tab--border-card .bk-tab-header {
223
- background: #FAFBFD;
224
- }
225
- .bk-tab--unborder-card .bk-tab-header {
226
- border-bottom: 1px solid var(--disable-color);
226
+ white-space: nowrap;
227
227
  }
228
228
  .bk-tab-header-item {
229
229
  display: flex;
@@ -232,14 +232,6 @@
232
232
  justify-content: center;
233
233
  align-items: center;
234
234
  }
235
- .bk-tab-header-item:hover {
236
- color: var(--primary-color);
237
- }
238
- .bk-tab-header-item:hover .bk-tab-header-item-close {
239
- display: block;
240
- margin-left: 5px;
241
- color: var(--danger-color);
242
- }
243
235
  .bk-tab--top .bk-tab-header-item {
244
236
  padding: 0 20px;
245
237
  }
@@ -258,12 +250,6 @@
258
250
  .bk-tab--border-card .bk-tab-header-item,
259
251
  .bk-tab--vertical-card .bk-tab-header-item {
260
252
  border-right: 1px solid var(--disable-color);
261
- border-bottom: 1px solid var(--disable-color);
262
- }
263
- .bk-tab--card .bk-tab-header-item:last-of-type,
264
- .bk-tab--border-card .bk-tab-header-item:last-of-type,
265
- .bk-tab--vertical-card .bk-tab-header-item:last-of-type {
266
- border-right: none;
267
253
  }
268
254
  .bk-tab--card-tab .bk-tab-header-item {
269
255
  position: relative;
@@ -284,14 +270,24 @@
284
270
  right: 0;
285
271
  left: initial;
286
272
  }
273
+ .bk-tab--card-grid .bk-tab-header-item {
274
+ height: 40px;
275
+ line-height: 40px;
276
+ background: #EAEBF0;
277
+ border-radius: 4px 4px 0 0;
278
+ margin-right: 8px;
279
+ }
287
280
  .bk-tab-header-operation .bk-tab-header-item {
288
281
  padding-right: 12px;
289
282
  padding-left: 12px;
290
283
  }
291
- .bk-tab-header-item-close {
292
- display: none;
293
- font-size: 16px;
294
- color: var(--light-gray);
284
+ .bk-tab-header-item:hover {
285
+ color: var(--primary-color);
286
+ }
287
+ .bk-tab-header-item:hover .bk-tab-header--close {
288
+ display: block;
289
+ margin-left: 5px;
290
+ color: var(--danger-color);
295
291
  }
296
292
  .bk-tab-header--active {
297
293
  color: var(--primary-color);
@@ -327,6 +323,14 @@
327
323
  /* stylelint-disable-next-line declaration-no-important */
328
324
  display: none !important;
329
325
  }
326
+ .bk-tab--card-grid .bk-tab-header--active {
327
+ background: #FFFFFF;
328
+ }
329
+ .bk-tab-header--close {
330
+ display: none;
331
+ font-size: 16px;
332
+ color: var(--light-gray);
333
+ }
330
334
  .bk-tab-header--disabled {
331
335
  color: #aaa;
332
336
  pointer-events: none;
@@ -348,6 +352,11 @@
348
352
  border: solid var(--disable-color);
349
353
  border-width: 0 1px 1px;
350
354
  }
355
+ .bk-tab--card-grid .bk-tab-content {
356
+ background: #FFFFFF;
357
+ box-shadow: 0 2px 4px 0 #1919290d;
358
+ border-radius: 0 4px 4px 4px;
359
+ }
351
360
  .bk-tab-panel {
352
361
  height: 100%;
353
362
  }