bkui-vue 0.0.1-beta.164 → 0.0.1-beta.167

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 (36) hide show
  1. package/dist/index.cjs.js +32 -32
  2. package/dist/index.esm.js +198 -118
  3. package/dist/index.umd.js +33 -33
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/cascader/cascader-panel.d.ts +16 -0
  7. package/lib/cascader/cascader.css +3 -0
  8. package/lib/cascader/cascader.d.ts +15 -1
  9. package/lib/cascader/cascader.less +3 -0
  10. package/lib/cascader/cascader.variable.css +3 -0
  11. package/lib/cascader/index.d.ts +50 -4
  12. package/lib/cascader/index.js +1 -1
  13. package/lib/checkbox/checkbox.css +5 -0
  14. package/lib/checkbox/checkbox.less +4 -0
  15. package/lib/checkbox/checkbox.variable.css +5 -0
  16. package/lib/pagination/index.d.ts +16 -1
  17. package/lib/pagination/index.js +1 -1
  18. package/lib/pagination/pagination.css +54 -28
  19. package/lib/pagination/pagination.d.ts +10 -0
  20. package/lib/pagination/pagination.less +58 -31
  21. package/lib/pagination/pagination.variable.css +54 -28
  22. package/lib/select/index.d.ts +67 -10
  23. package/lib/select/index.js +1 -1
  24. package/lib/select/select.css +69 -54
  25. package/lib/select/select.d.ts +22 -3
  26. package/lib/select/select.less +44 -29
  27. package/lib/select/select.variable.css +69 -54
  28. package/lib/select/selectTagInput.d.ts +12 -0
  29. package/lib/styles/reset.css +36 -0
  30. package/lib/styles/reset.less +26 -0
  31. package/lib/styles/reset.variable.css +36 -0
  32. package/lib/table/table.css +59 -28
  33. package/lib/table/table.variable.css +59 -28
  34. package/lib/tree/tree.css +5 -0
  35. package/lib/tree/tree.variable.css +5 -0
  36. package/package.json +1 -1
package/lib/select/select.css CHANGED
@@ -31,10 +31,10 @@
31
31
  font-weight: normal;
32
32
  list-style: none;
33
33
  }
34
- .bk-select.large .bk-select-content {
34
+ .bk-select.large .bk-select-content-wrapper {
35
35
  font-size: 14px;
36
36
  }
37
- .bk-select.is-focus.normal .bk-select-trigger .bk-select-tag {
37
+ .bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
38
38
  border-color: #3a84ff;
39
39
  box-shadow: 0px 0px 3px 0px #a3c5fd;
40
40
  }
@@ -54,31 +54,34 @@
54
54
  .bk-select.popover-show .bk-select-trigger .angle-up {
55
55
  transform: rotate(0);
56
56
  }
57
- .bk-select.is-disabled .bk-select-trigger .bk-input input {
57
+ .bk-select.is-disabled .bk-input--text {
58
58
  cursor: not-allowed;
59
59
  background-color: #fafbfd;
60
60
  }
61
- .bk-select .bk-select-trigger {
62
- position: relative;
63
- }
64
- .bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
65
- margin-right: 0;
66
- }
67
- .bk-select .bk-select-trigger .bk-input input {
68
- padding-right: 24px;
69
- cursor: pointer;
70
- background-color: white;
71
- }
72
- .bk-select .bk-select-trigger .bk-input.is-focused {
61
+ .bk-select .bk-input.is-focused {
73
62
  border-color: #3a84ff;
74
63
  outline: 0;
75
64
  box-shadow: 0px 0px 3px 0px #a3c5fd;
76
65
  }
77
- .bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity {
66
+ .bk-select .bk-input.is-focused.is-simplicity {
78
67
  border-color: transparent;
79
68
  border-bottom-color: #3a84ff;
80
69
  box-shadow: none;
81
70
  }
71
+ .bk-select .bk-input--text {
72
+ overflow: hidden;
73
+ text-overflow: ellipsis;
74
+ white-space: nowrap;
75
+ padding-right: 24px;
76
+ cursor: pointer;
77
+ background-color: white;
78
+ }
79
+ .bk-select .bk-select-trigger {
80
+ position: relative;
81
+ }
82
+ .bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
83
+ margin-right: 0;
84
+ }
82
85
  .bk-select .bk-select-trigger .bk-select-tag {
83
86
  width: 100%;
84
87
  height: 32px;
@@ -100,20 +103,33 @@
100
103
  white-space: nowrap;
101
104
  display: flex;
102
105
  width: auto;
103
- height: auto;
104
- min-height: 32px;
105
106
  align-items: center;
106
- flex-wrap: wrap;
107
107
  }
108
108
  .bk-select .bk-select-trigger .bk-select-tag::placeholder {
109
109
  color: #c4c6cc;
110
110
  }
111
+ .bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
112
+ height: 30px;
113
+ }
114
+ .bk-select .bk-select-trigger .bk-select-tag:not(.collapse-tag) {
115
+ height: auto;
116
+ min-height: 32px;
117
+ flex-wrap: wrap;
118
+ }
119
+ .bk-select .bk-select-trigger .bk-select-tag-wrapper {
120
+ display: flex;
121
+ align-items: center;
122
+ flex-wrap: wrap;
123
+ padding: 2px 0;
124
+ overflow: hidden;
125
+ }
111
126
  .bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
112
127
  border-color: #979ba5;
113
128
  }
114
129
  .bk-select .bk-select-trigger .bk-select-tag.is-disabled {
115
130
  cursor: not-allowed;
116
131
  background-color: #fafbfd;
132
+ border-color: #dcdee5;
117
133
  }
118
134
  .bk-select .bk-select-trigger .bk-select-tag.is-disabled input {
119
135
  cursor: not-allowed;
@@ -139,20 +155,19 @@
139
155
  background-color: white;
140
156
  border: 1px solid #c4c6cc;
141
157
  border-radius: 2px;
158
+ outline: none;
142
159
  box-sizing: border-box;
143
160
  transition: all 0.1s;
144
161
  resize: none;
162
+ overflow: hidden;
145
163
  text-overflow: ellipsis;
146
164
  white-space: nowrap;
147
165
  width: 1%;
148
166
  height: 22px;
149
- max-width: 190px;
150
167
  padding: 0;
151
- margin: 4px 5px 4px 0;
152
- overflow: hidden;
168
+ margin: 2px 5px 4px 0;
153
169
  background-color: transparent;
154
170
  border: none;
155
- outline: none;
156
171
  flex-grow: 1;
157
172
  }
158
173
  .bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
@@ -212,14 +227,14 @@
212
227
  border-radius: 2px;
213
228
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
214
229
  }
215
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty {
230
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty {
216
231
  display: flex;
217
232
  align-items: center;
218
233
  justify-content: center;
219
234
  height: 56px;
220
235
  color: #63656e;
221
236
  }
222
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty .spinner {
237
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty .spinner {
223
238
  display: flex;
224
239
  width: 14px;
225
240
  height: 14px;
@@ -229,14 +244,14 @@
229
244
  align-items: center;
230
245
  justify-content: center;
231
246
  }
232
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty span {
247
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty span {
233
248
  margin-left: 4px;
234
249
  line-height: 18px;
235
250
  }
236
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-dropdown {
251
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
237
252
  overflow: auto;
238
253
  }
239
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-extension {
254
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
240
255
  display: flex;
241
256
  height: 40px;
242
257
  background-color: #fafbfd;
@@ -244,10 +259,10 @@
244
259
  border-top: 1px solid #dcdee5;
245
260
  border-radius: 0 0 2px 2px;
246
261
  }
247
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options {
262
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
248
263
  padding: 4px 0;
249
264
  }
250
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option {
265
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
251
266
  position: relative;
252
267
  height: 32px;
253
268
  padding: 0 12px;
@@ -260,76 +275,76 @@
260
275
  text-overflow: ellipsis;
261
276
  white-space: nowrap;
262
277
  }
263
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option .bk-select-selected-icon {
278
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-selected-icon {
264
279
  position: absolute;
265
280
  right: 10px;
266
281
  }
267
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option-item {
282
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
268
283
  overflow: hidden;
269
284
  text-overflow: ellipsis;
270
285
  white-space: nowrap;
271
286
  }
272
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-hover {
287
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
273
288
  color: #3a84ff;
274
289
  background-color: #f5f7fa;
275
290
  }
276
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option:hover {
291
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option:hover {
277
292
  color: #63656e;
278
293
  background-color: #f5f7fa;
279
294
  }
280
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-selected {
295
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-selected {
281
296
  color: #3a84ff;
282
297
  background-color: #e1ecff;
283
298
  }
284
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-disabled {
299
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-disabled {
285
300
  color: #c4c6cc;
286
301
  cursor: not-allowed;
287
302
  background-color: transparent;
288
303
  }
289
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple {
304
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple {
290
305
  padding-right: 32px;
291
306
  }
292
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple.is-selected {
307
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-selected {
293
308
  background-color: #fff;
294
309
  }
295
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple.is-hover {
310
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-hover {
296
311
  background-color: #f5f7fa;
297
312
  }
298
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple:hover {
313
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple:hover {
299
314
  background-color: #f5f7fa;
300
315
  }
301
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options-loading {
316
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading {
302
317
  display: flex;
303
318
  align-items: center;
304
319
  justify-content: center;
305
320
  }
306
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options-loading span {
321
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading span {
307
322
  margin-left: 4px;
308
323
  line-height: 18px;
309
324
  }
310
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group-label {
325
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label {
311
326
  height: 32px;
312
327
  padding: 0 8px;
313
328
  line-height: 32px;
314
329
  color: #979ba5;
315
330
  text-align: left;
316
331
  }
317
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group-label.collapsible {
332
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label.collapsible {
318
333
  cursor: pointer;
319
334
  }
320
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group.collapsible .bk-select-option {
335
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.collapsible .bk-select-option {
321
336
  padding-left: 40px;
322
337
  }
323
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group.disabled .default-group-label {
338
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.disabled .default-group-label {
324
339
  color: #c4c6cc;
325
340
  cursor: not-allowed;
326
341
  }
327
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label {
342
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label {
328
343
  display: flex;
329
344
  user-select: none;
330
345
  align-items: center;
331
346
  }
332
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon {
347
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon {
333
348
  display: flex;
334
349
  width: 12px;
335
350
  height: 12px;
@@ -338,24 +353,24 @@
338
353
  align-items: center;
339
354
  justify-content: center;
340
355
  }
341
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon.collapse {
356
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon.collapse {
342
357
  transform: rotate(-90deg);
343
358
  }
344
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .bk-select-option {
359
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .bk-select-option {
345
360
  padding-left: 24px;
346
361
  }
347
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper {
362
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
348
363
  display: flex;
349
364
  margin: 4px 8px 0 8px;
350
365
  margin-top: 4px;
351
366
  border-bottom: 1px solid #eaebf0;
352
367
  align-items: center;
353
368
  }
354
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .icon-search {
369
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
355
370
  margin-left: 2px;
356
371
  color: #979ba5;
357
372
  }
358
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .bk-select-search-input {
373
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input {
359
374
  width: 100%;
360
375
  height: 32px;
361
376
  padding: 0 28px 0 10px;
@@ -378,6 +393,6 @@
378
393
  cursor: text;
379
394
  border: none;
380
395
  }
381
- .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .bk-select-search-input::placeholder {
396
+ .bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
382
397
  color: #c4c6cc;
383
398
  }
package/lib/select/select.d.ts CHANGED
@@ -183,6 +183,7 @@ declare const _default: import("vue").DefineComponent<{
183
183
  tagTheme: string;
184
184
  filterable: boolean;
185
185
  allowCreate: boolean;
186
+ collapseTags: boolean;
186
187
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
187
188
  selected: {
188
189
  type: import("vue-types/dist/types").PropType<ISelected[]>;
@@ -212,11 +213,16 @@ declare const _default: import("vue").DefineComponent<{
212
213
  default: boolean;
213
214
  };
214
215
  modelValue: import("vue-types").VueTypeValidableDef<any>;
216
+ collapseTags: import("vue-types").VueTypeValidableDef<boolean> & {
217
+ default: boolean;
218
+ } & {
219
+ default: boolean;
220
+ };
215
221
  }>> & {
216
222
  onEnter?: (...args: any[]) => any;
217
223
  "onUpdate:modelValue"?: (...args: any[]) => any;
218
224
  onRemove?: (...args: any[]) => any;
219
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "placeholder" | "selected" | "tagTheme" | "filterable" | "allowCreate">;
225
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "placeholder" | "selected" | "tagTheme" | "filterable" | "allowCreate" | "collapseTags">;
220
226
  $attrs: {
221
227
  [x: string]: unknown;
222
228
  };
@@ -259,11 +265,17 @@ declare const _default: import("vue").DefineComponent<{
259
265
  default: boolean;
260
266
  };
261
267
  modelValue: import("vue-types").VueTypeValidableDef<any>;
268
+ collapseTags: import("vue-types").VueTypeValidableDef<boolean> & {
269
+ default: boolean;
270
+ } & {
271
+ default: boolean;
272
+ };
262
273
  }>> & {
263
274
  onEnter?: (...args: any[]) => any;
264
275
  "onUpdate:modelValue"?: (...args: any[]) => any;
265
276
  onRemove?: (...args: any[]) => any;
266
277
  }, {
278
+ overflowTagIndex: import("vue").Ref<number>;
267
279
  value: any;
268
280
  inputRef: import("vue").Ref<HTMLElement>;
269
281
  handleRemoveTag: (val: string) => void;
@@ -277,6 +289,7 @@ declare const _default: import("vue").DefineComponent<{
277
289
  tagTheme: string;
278
290
  filterable: boolean;
279
291
  allowCreate: boolean;
292
+ collapseTags: boolean;
280
293
  }> & {
281
294
  beforeCreate?: (() => void) | (() => void)[];
282
295
  created?: (() => void) | (() => void)[];
@@ -326,11 +339,17 @@ declare const _default: import("vue").DefineComponent<{
326
339
  default: boolean;
327
340
  };
328
341
  modelValue: import("vue-types").VueTypeValidableDef<any>;
342
+ collapseTags: import("vue-types").VueTypeValidableDef<boolean> & {
343
+ default: boolean;
344
+ } & {
345
+ default: boolean;
346
+ };
329
347
  }>> & {
330
348
  onEnter?: (...args: any[]) => any;
331
349
  "onUpdate:modelValue"?: (...args: any[]) => any;
332
350
  onRemove?: (...args: any[]) => any;
333
351
  } & import("vue").ShallowUnwrapRef<{
352
+ overflowTagIndex: import("vue").Ref<number>;
334
353
  value: any;
335
354
  inputRef: import("vue").Ref<HTMLElement>;
336
355
  handleRemoveTag: (val: string) => void;
@@ -550,16 +569,16 @@ declare const _default: import("vue").DefineComponent<{
550
569
  tagTheme: string;
551
570
  filterable: boolean;
552
571
  allowCreate: boolean;
572
+ collapseTags: boolean;
553
573
  popoverMinWidth: number;
554
574
  idKey: string;
555
575
  remoteMethod: (...args: any[]) => any;
576
+ scrollHeight: number;
556
577
  popoverOptions: {
557
578
  [key: string]: any;
558
579
  };
559
- scrollHeight: number;
560
580
  showSelectAll: boolean;
561
581
  multipleMode: string;
562
- collapseTags: boolean;
563
582
  noDataText: string;
564
583
  noMatchText: string;
565
584
  loadingText: string;
package/lib/select/select.less CHANGED
@@ -91,13 +91,13 @@
91
91
  }
92
92
 
93
93
  &.large {
94
- .bk-select-content {
94
+ .bk-select-content-wrapper {
95
95
  font-size: 14px;
96
96
  }
97
97
  }
98
98
 
99
99
  &.is-focus.normal {
100
- .bk-select-trigger .bk-select-tag {
100
+ .bk-select-trigger .bk-select-tag.bk-select-tag--default {
101
101
  border-color: @primary-color;
102
102
  box-shadow: 0px 0px 3px 0px #a3c5fd;
103
103
  }
@@ -125,45 +125,61 @@
125
125
  }
126
126
 
127
127
  &.is-disabled {
128
- .bk-select-trigger .bk-input input {
128
+ .bk-input--text {
129
129
  cursor: not-allowed;
130
130
  background-color: #fafbfd;
131
131
  }
132
132
  }
133
133
 
134
- .bk-select-trigger {
135
- position: relative;
134
+ .bk-input {
135
+ &.is-focused {
136
+ .active();
136
137
 
137
- .bk-tag-input .bk-tag-input-trigger .clear-icon {
138
- margin-right: 0;
138
+ &.is-simplicity {
139
+ border-color: transparent;
140
+ border-bottom-color: @primary-color;
141
+ box-shadow: none;
142
+ }
139
143
  }
144
+ }
140
145
 
141
- .bk-input {
142
- input {
143
- padding-right: 24px;
144
- cursor: pointer;
145
- background-color: @white-color;
146
- }
146
+ .bk-input--text {
147
+ .ellipsis();
148
+ padding-right: 24px;
149
+ cursor: pointer;
150
+ background-color: @white-color;
151
+ }
147
152
 
148
- &.is-focused {
149
- .active();
153
+ .bk-select-trigger {
154
+ position: relative;
150
155
 
151
- &.is-simplicity {
152
- border-color: transparent;
153
- border-bottom-color: @primary-color;
154
- box-shadow: none;
155
- }
156
- }
156
+ .bk-tag-input .bk-tag-input-trigger .clear-icon {
157
+ margin-right: 0;
157
158
  }
158
159
 
159
160
  .bk-select-tag {
160
161
  .input();
161
162
  display: flex;
162
163
  width: auto;
163
- height: auto;
164
- min-height: 32px;
165
164
  align-items: center;
166
- flex-wrap: wrap;
165
+
166
+ &.collapse-tag .bk-select-tag-wrapper {
167
+ height: 30px;
168
+ }
169
+
170
+ &:not(.collapse-tag) {
171
+ height: auto;
172
+ min-height: 32px;
173
+ flex-wrap: wrap;
174
+ }
175
+
176
+ &-wrapper {
177
+ display: flex;
178
+ align-items: center;
179
+ flex-wrap: wrap;
180
+ padding: 2px 0;
181
+ overflow: hidden;
182
+ }
167
183
 
168
184
  &:not(.is-disabled):hover {
169
185
  border-color: #979ba5;
@@ -172,6 +188,7 @@
172
188
  &.is-disabled {
173
189
  cursor: not-allowed;
174
190
  background-color: #fafbfd;
191
+ border-color: #dcdee5;
175
192
 
176
193
  input {
177
194
  cursor: not-allowed;
@@ -192,15 +209,13 @@
192
209
 
193
210
  &-input {
194
211
  .input();
212
+ .ellipsis();
195
213
  width: 1%;
196
214
  height: 22px;
197
- max-width: 190px;
198
215
  padding: 0;
199
- margin: 4px 5px 4px 0;
200
- overflow: hidden;
216
+ margin: 2px 5px 4px 0;
201
217
  background-color: transparent;
202
218
  border: none;
203
- outline: none;
204
219
  flex-grow: 1;
205
220
  }
206
221
 
@@ -245,7 +260,7 @@
245
260
  border-radius: 2px;
246
261
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.10);
247
262
 
248
- .bk-select-content {
263
+ .bk-select-content-wrapper {
249
264
  .bk-select-empty {
250
265
  .flex-center();
251
266
  height: 56px;