@opentiny/vue-search-box 2.27.0 → 2.27.2

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 (8) hide show
  1. package/index.css +412 -0
  2. package/index.js +2832 -0
  3. package/index.js.map +1 -0
  4. package/package.json +6 -4
  5. package/es/index.es.js +0 -2772
  6. package/es/index.es.js.map +0 -1
  7. package/lib/index.cjs.js +0 -2
  8. package/lib/index.cjs.js.map +0 -1
package/index.css ADDED
@@ -0,0 +1,412 @@
1
+ .tiny-popper.tvp-search-box__dropdown-menu,
2
+ .tvp-search-box__popover {
3
+ --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
4
+ --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
5
+ --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
6
+ --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
7
+ --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
8
+ --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
9
+ --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
10
+ --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
11
+ --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
12
+ --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
13
+ --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
14
+ --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
15
+ --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
16
+ --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
17
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
18
+ --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
19
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
20
+ --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
21
+ --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
22
+ --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
23
+ --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-l, 12px);
24
+ --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
25
+ --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
26
+ --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
27
+ --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
28
+ --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
29
+ --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
30
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
31
+ --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
32
+ --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
33
+ --tvp-SearchBox-color-bg-scrollbar-thumb: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
34
+ --tvp-SearchBox-border-radius-scrollbar-thumb: var(--tv-border-radius-scrollbar-thumb, 4px);
35
+ --tvp-SearchBox-color-bg-scrollbar-thumb-active: var(--tv-co lor-bg-scrollbar-thumb-active, #dbdbdb);
36
+ --tvp-SearchBox-date-picker-clear-icon-bg: var(--tv-color-bg-1, #ffffff);
37
+ --tvp-SearchBox-color-border-divider: var(--tv-color-bg-control-unactive, #c2c2c2);
38
+ width: 232px;
39
+ overflow: auto;
40
+ }
41
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar,
42
+ .tvp-search-box__popover::-webkit-scrollbar {
43
+ width: 8px;
44
+ height: 8px;
45
+ }
46
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-corner,
47
+ .tvp-search-box__popover::-webkit-scrollbar-corner {
48
+ background: transparent;
49
+ }
50
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-track,
51
+ .tvp-search-box__popover::-webkit-scrollbar-track {
52
+ background: transparent;
53
+ }
54
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb,
55
+ .tvp-search-box__popover::-webkit-scrollbar-thumb {
56
+ background: var(--tvp-SearchBox-color-bg-scrollbar-thumb);
57
+ border-radius: var(--tvp-SearchBox-border-radius-scrollbar-thumb);
58
+ }
59
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:hover,
60
+ .tvp-search-box__popover::-webkit-scrollbar-thumb:hover {
61
+ background: var(--tv-color-bg-scrollbar-thumb-hover);
62
+ }
63
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:active,
64
+ .tvp-search-box__popover::-webkit-scrollbar-thumb:active {
65
+ background: var(--tvp-SearchBox-color-bg-scrollbar-thumb-active);
66
+ }
67
+ .tiny-popper.tvp-search-box__dropdown-menu.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
68
+ .tiny-popper.tvp-search-box__dropdown-menu.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon,
69
+ .tvp-search-box__popover.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
70
+ .tvp-search-box__popover.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon {
71
+ background-color: var(--tvp-SearchBox-date-picker-clear-icon-bg);
72
+ }
73
+ .tiny-popper.tvp-search-box__dropdown-menu .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group,
74
+ .tvp-search-box__popover .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group {
75
+ border-color: #f23030;
76
+ }
77
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select .tiny-svg,
78
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select .tiny-svg {
79
+ z-index: 1000;
80
+ }
81
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags-group,
82
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags-group {
83
+ min-height: 32px;
84
+ max-height: 82px;
85
+ width: 100%;
86
+ border: 1px solid #c2c2c2;
87
+ border-radius: 6px;
88
+ }
89
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags.is-show-tag,
90
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags.is-show-tag {
91
+ max-width: 276px !important;
92
+ width: calc(100% - 8px) !important;
93
+ min-height: 30px;
94
+ padding-right: 20px;
95
+ max-height: 76px;
96
+ overflow: auto;
97
+ }
98
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__suffix,
99
+ .tvp-search-box__popover .tvp-search-box-select .tiny-input__suffix {
100
+ z-index: 1000;
101
+ }
102
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__inner,
103
+ .tvp-search-box__popover .tvp-search-box-select .tiny-input__inner {
104
+ border: 0px;
105
+ overflow: hidden;
106
+ }
107
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number'],
108
+ .tvp-search-box__popover input[type='number'] {
109
+ -moz-appearance: textfield;
110
+ /* Firefox */
111
+ appearance: textfield;
112
+ }
113
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-inner-spin-button,
114
+ .tvp-search-box__popover input[type='number']::-webkit-inner-spin-button,
115
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-outer-spin-button,
116
+ .tvp-search-box__popover input[type='number']::-webkit-outer-spin-button {
117
+ -webkit-appearance: none;
118
+ /* Safari */
119
+ margin: 0;
120
+ }
121
+ .tvp-search-box__popover.tiny-popover[x-placement^='bottom'] {
122
+ margin-top: 0;
123
+ }
124
+ .tiny-popper.tvp-search-box__dropdown-menu,
125
+ .tvp-search-box__popover {
126
+ padding: 0;
127
+ }
128
+ .tvp-search-box {
129
+ --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
130
+ --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
131
+ --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
132
+ --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
133
+ --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
134
+ --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
135
+ --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
136
+ --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
137
+ --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
138
+ --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
139
+ --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
140
+ --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
141
+ --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
142
+ --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
143
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
144
+ --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
145
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
146
+ --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
147
+ --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
148
+ --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
149
+ --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-l, 12px);
150
+ --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
151
+ --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
152
+ --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
153
+ --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
154
+ --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
155
+ --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
156
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
157
+ --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
158
+ --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
159
+ --tvp-SearchBox-color-bg-scrollbar-thumb: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
160
+ --tvp-SearchBox-border-radius-scrollbar-thumb: var(--tv-border-radius-scrollbar-thumb, 4px);
161
+ --tvp-SearchBox-color-bg-scrollbar-thumb-active: var(--tv-co lor-bg-scrollbar-thumb-active, #dbdbdb);
162
+ --tvp-SearchBox-date-picker-clear-icon-bg: var(--tv-color-bg-1, #ffffff);
163
+ --tvp-SearchBox-color-border-divider: var(--tv-color-bg-control-unactive, #c2c2c2);
164
+ display: flex;
165
+ position: relative;
166
+ flex-wrap: wrap;
167
+ align-items: center;
168
+ justify-content: flex-start;
169
+ border: 1px solid var(--tvp-SearchBox-border-color);
170
+ border-radius: var(--tvp-SearchBox-border-radius);
171
+ min-height: var(--tvp-SearchBox-min-height);
172
+ padding-left: var(--tvp-SearchBox-padding-left);
173
+ background-color: var(--tvp-SearchBox-bg-color);
174
+ }
175
+ .tvp-search-box__form {
176
+ width: auto;
177
+ flex: 1;
178
+ min-width: 200px;
179
+ }
180
+ .tvp-search-box__form-popover {
181
+ position: absolute;
182
+ }
183
+ .tvp-search-box:focus-within {
184
+ border-color: var(--tvp-SearchBox-focus-border-color);
185
+ }
186
+ .tvp-search-box > .tvp-search-box__prefix {
187
+ position: absolute;
188
+ top: calc((var(--tvp-SearchBox-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
189
+ left: 12px;
190
+ display: inline;
191
+ font-size: var(--tvp-SearchBox-left-icon-font-size);
192
+ fill: #808080;
193
+ }
194
+ .tvp-search-box__text-highlight {
195
+ color: var(--tvp-SearchBox-dropdown-keyword-text-color);
196
+ }
197
+ .tvp-search-box__placeholder {
198
+ padding-right: var(--tvp-SearchBox-place-padding-right);
199
+ }
200
+ .tvp-search-box__tag {
201
+ margin: 1px var(--tvp-SearchBox-tag-margin-right) 1px 0;
202
+ max-width: 100%;
203
+ }
204
+ .tvp-search-box__tag > .tvp-search-box__tag-value {
205
+ overflow: hidden;
206
+ text-overflow: ellipsis;
207
+ }
208
+ .tvp-search-box__tag:hover {
209
+ cursor: pointer;
210
+ color: var(--tvp-SearchBox-tag-hover-text-color);
211
+ fill: var(--tvp-SearchBox-tag-hover-fill-color);
212
+ }
213
+ .tvp-search-box__tag-editor span {
214
+ border-bottom: 1px dashed var(--tvp-SearchBox-tag-bottom-border-color);
215
+ line-height: 1;
216
+ }
217
+ .tvp-search-box__input .tiny-input-display-only {
218
+ width: calc(100% - var(--tv-Input-suffix-right) - 63px);
219
+ }
220
+ .tvp-search-box__input .tiny-svg {
221
+ margin-left: 0;
222
+ }
223
+ .tvp-search-box__input-close {
224
+ margin-right: var(--tvp-SearchBox-close-icon-margin-right);
225
+ }
226
+ .tvp-search-box__input-separator {
227
+ display: inline-block;
228
+ margin-right: var(--tvp-SearchBox-separator-icon-margin-right);
229
+ height: 14px;
230
+ width: 1px;
231
+ background-color: var(--tvp-SearchBox-color-border-divider);
232
+ }
233
+ .tvp-search-box__input-help {
234
+ margin-right: 0px;
235
+ }
236
+ .tvp-search-box__input .tvp-search-box__input-search {
237
+ display: none;
238
+ margin-right: 2px;
239
+ }
240
+ .tvp-search-box__input-wrapper {
241
+ display: flex;
242
+ align-items: center;
243
+ width: 100%;
244
+ }
245
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg {
246
+ font-size: 16px;
247
+ margin-top: 0;
248
+ fill: var(--tvp-SearchBox-right-icon-color);
249
+ }
250
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg:hover {
251
+ fill: var(--tvp-SearchBox-right-icon-color-hover);
252
+ }
253
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix-inner {
254
+ display: flex;
255
+ align-items: center;
256
+ }
257
+ .tvp-search-box__prop {
258
+ white-space: nowrap;
259
+ vertical-align: middle;
260
+ font-size: var(--tvp-SearchBox-tag-font-size);
261
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
262
+ }
263
+ .tvp-search-box__prop span {
264
+ padding-left: 8px;
265
+ }
266
+ .tvp-search-box .tiny-dropdown__trigger {
267
+ display: block;
268
+ }
269
+ .tvp-search-box .tiny-dropdown__trigger:focus-visible {
270
+ outline: none;
271
+ }
272
+ .tvp-search-box .tiny-dropdown__trigger .tiny-dropdown__title {
273
+ width: 100%;
274
+ }
275
+ .tvp-search-box__dropdown {
276
+ display: block;
277
+ flex: 1;
278
+ }
279
+ .tvp-search-box__loading-box {
280
+ min-height: 32px;
281
+ }
282
+ .tvp-search-box__radio-wrap {
283
+ max-height: 240px;
284
+ overflow: auto;
285
+ }
286
+ .tvp-search-box__checkbox-wrap {
287
+ max-height: 186px;
288
+ }
289
+ .tvp-search-box__checkbox {
290
+ flex-direction: column;
291
+ }
292
+ .tvp-search-box__bottom-btn,
293
+ .tvp-search-box__checkbox-btn {
294
+ display: flex;
295
+ margin: 0 10px;
296
+ border-top: 1px solid var(--tvp-SearchBox-dropdown-btn-group-border-color);
297
+ margin-top: var(--tvp-SearchBox-dropdown-btn-group-margin-top);
298
+ padding-top: var(--tvp-SearchBox-dropdown-btn-group-padding-top);
299
+ justify-content: flex-end;
300
+ padding-bottom: var(--tvp-SearchBox-dropdown-btn-group-padding-bottom);
301
+ }
302
+ .tvp-search-box__bottom-btn .tiny-button,
303
+ .tvp-search-box__checkbox-btn .tiny-button {
304
+ min-width: 72px;
305
+ }
306
+ .tvp-search-box__bottom-btn {
307
+ margin-right: 0px;
308
+ margin-left: 0px;
309
+ }
310
+ .tvp-search-box__filter-type {
311
+ display: inline-block;
312
+ padding: 0 16px;
313
+ margin-top: 12px;
314
+ height: 18px;
315
+ line-height: 18px;
316
+ font-weight: 500;
317
+ white-space: nowrap;
318
+ overflow: hidden;
319
+ text-overflow: ellipsis;
320
+ color: var(--tvp-SearchBox-dropdown-header-text-color);
321
+ }
322
+ .tvp-search-box__potential-box {
323
+ min-height: 30px;
324
+ }
325
+ .tvp-search-box__filter-item {
326
+ color: var(--tvp-SearchBox-search-filter-text-color);
327
+ background-color: var(--tvp-SearchBox-bg-color);
328
+ }
329
+ .tvp-search-box__dropdown-item.tiny-dropdown-item .tiny-dropdown-item__content.tiny-dropdown-menu__item-content {
330
+ white-space: nowrap;
331
+ overflow: hidden;
332
+ text-overflow: ellipsis;
333
+ }
334
+ .tvp-search-box__dropdown-item.tiny-dropdown-item.tvp-search-box__checkbox-item .tiny-checkbox__inner > .tiny-svg {
335
+ margin-right: 0;
336
+ }
337
+ .tvp-search-box__checkbox-item .tvp-search-box__checkbox-item-label,
338
+ .tvp-search-box__checkbox-item .tiny-checkbox,
339
+ .tvp-search-box__checkbox-item .tiny-dropdown-item__label {
340
+ width: 100%;
341
+ }
342
+ .tvp-search-box__checkbox-item-label .tiny-checkbox__label {
343
+ width: 100%;
344
+ overflow: hidden;
345
+ text-overflow: ellipsis;
346
+ }
347
+ .tvp-search-box__checkbox-item .tiny-dropdown-item__wrap {
348
+ padding: 0;
349
+ }
350
+ .tvp-search-box__checkbox-item .tiny-checkbox {
351
+ padding: 6px 10px;
352
+ padding-left: 0;
353
+ }
354
+ .tvp-search-box__dropdown-title {
355
+ margin: 8px 0px;
356
+ line-height: 18px;
357
+ color: var(--tvp-SearchBox-dropdown-num-title-text-color);
358
+ font-size: 12px;
359
+ }
360
+ .tvp-search-box__dropdown-start,
361
+ .tvp-search-box__dropdown-end {
362
+ margin: 8px 0px;
363
+ font-size: var(--tvp-SearchBox-dropdown-desc-font-size);
364
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
365
+ letter-spacing: 0;
366
+ line-height: 1.5;
367
+ }
368
+ .tvp-search-box__panel-box {
369
+ padding: 0px 10px;
370
+ overflow: hidden;
371
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
372
+ }
373
+ .tvp-search-box__date-item.tiny-form-item,
374
+ .tvp-search-box__number-item.tiny-form-item {
375
+ padding-bottom: 8px;
376
+ margin-bottom: 0;
377
+ }
378
+ .tvp-search-box__date-item.tiny-form-item > div,
379
+ .tvp-search-box__number-item.tiny-form-item > div {
380
+ width: 100%;
381
+ white-space: nowrap;
382
+ }
383
+ .tvp-search-box__date-item.tiny-form-item .tiny-form-item__error,
384
+ .tvp-search-box__number-item.tiny-form-item .tiny-form-item__error {
385
+ font-size: 12px;
386
+ }
387
+ .tvp-search-box__input input {
388
+ border: 0;
389
+ }
390
+ .tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
391
+ padding-left: 0px;
392
+ }
393
+ .tvp-search-box--small {
394
+ min-height: var(--tvp-SearchBox-small-min-height);
395
+ padding-left: var(--tvp-SearchBox-small-padding-left);
396
+ }
397
+ .tvp-search-box--small > .tvp-search-box__prefix {
398
+ top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
399
+ left: 10px;
400
+ }
401
+ .tvp-search-box--small .tvp-search-box__prop {
402
+ font-size: var(--tvp-SearchBox-small-tag-font-size);
403
+ }
404
+ .tvp-search-box--small .tvp-search-box__prop span {
405
+ padding-left: 8px;
406
+ }
407
+ .tvp-search-box.hide-prefix-icon {
408
+ padding-left: 16px;
409
+ }
410
+ .tvp-search-box__suffix-icon-slot {
411
+ margin-right: 4px;
412
+ }