@bagelink/vue 0.0.276 → 0.0.282
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.
- package/dist/components/ComboBox.vue.d.ts +2 -0
- package/dist/components/ComboBox.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/CheckInput.vue.d.ts +9 -4
- package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
- package/dist/index.cjs +25 -17
- package/dist/index.mjs +25 -17
- package/dist/plugins/modal.d.ts +1 -1
- package/dist/plugins/modal.d.ts.map +1 -1
- package/dist/style.css +861 -641
- package/package.json +1 -1
- package/src/components/ComboBox.vue +15 -10
- package/src/components/form/inputs/CheckInput.vue +55 -53
- package/src/components/form/inputs/SelectInput.vue +272 -284
- package/src/components/formkit/Toggle.vue +85 -100
- package/src/plugins/modal.ts +23 -23
- package/src/styles/buttons.css +13 -3
- package/src/styles/inputs.css +100 -109
- package/src/styles/layout.css +449 -191
- package/src/styles/text.css +80 -59
|
@@ -1,24 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:id="id"
|
|
11
|
-
label="label"
|
|
12
|
-
trackBy="value"
|
|
13
|
-
:options="optionList"
|
|
14
|
-
:required
|
|
15
|
-
:placeholder
|
|
16
|
-
v-model="seletValue"
|
|
17
|
-
v-bind="extraProps"
|
|
18
|
-
/>
|
|
19
|
-
<!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
|
|
20
|
-
</label>
|
|
21
|
-
</div>
|
|
2
|
+
<div class="pb-1">
|
|
3
|
+
<label class="txt-start" :for="id">
|
|
4
|
+
{{ label }}
|
|
5
|
+
<Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
|
|
6
|
+
:placeholder="placeholder" v-model="seletValue" :close-on-select="true" v-bind="extraProps" />
|
|
7
|
+
<!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
|
|
8
|
+
</label>
|
|
9
|
+
</div>
|
|
22
10
|
</template>
|
|
23
11
|
|
|
24
12
|
<script lang="ts" setup>
|
|
@@ -26,20 +14,20 @@ import { watch } from 'vue';
|
|
|
26
14
|
import Multiselect from 'vue-multiselect';
|
|
27
15
|
|
|
28
16
|
type Option = {
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
label: string;
|
|
18
|
+
value: string | number;
|
|
31
19
|
};
|
|
32
20
|
type RawOption = Option | string | number;
|
|
33
21
|
|
|
34
22
|
const props = defineProps<{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
23
|
+
required?: boolean,
|
|
24
|
+
label?: string,
|
|
25
|
+
id?: string,
|
|
26
|
+
modelValue?: string | number,
|
|
27
|
+
placeholder?: string,
|
|
28
|
+
defaultValue?: string | number,
|
|
29
|
+
options: RawOption[] | string
|
|
30
|
+
extraProps?: Record<string, any>
|
|
43
31
|
}>();
|
|
44
32
|
|
|
45
33
|
let dataValue = $ref<string | number | undefined>(props.modelValue || props.defaultValue);
|
|
@@ -48,24 +36,24 @@ const emit = defineEmits(['update:modelValue']);
|
|
|
48
36
|
const optionList = $ref<Option[]>([]);
|
|
49
37
|
|
|
50
38
|
const seletValue = $computed({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
39
|
+
get: () => optionList.find((opt) => opt.value === dataValue),
|
|
40
|
+
set: (val?: Option) => {
|
|
41
|
+
dataValue = val?.value;
|
|
42
|
+
emit('update:modelValue', dataValue);
|
|
43
|
+
},
|
|
56
44
|
});
|
|
57
45
|
|
|
58
46
|
function optnToValueLabel(option: RawOption): Option {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
47
|
+
if (typeof option === 'string' || typeof option === 'number') {
|
|
48
|
+
return { label: `${option}`, value: option };
|
|
49
|
+
}
|
|
50
|
+
return option;
|
|
63
51
|
}
|
|
64
52
|
|
|
65
53
|
function updateOptionList() {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
54
|
+
const { options } = props;
|
|
55
|
+
const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
|
|
56
|
+
optionList.push(...optnLst.map(optnToValueLabel));
|
|
69
57
|
}
|
|
70
58
|
|
|
71
59
|
watch(() => props.options, updateOptionList, { immediate: true });
|
|
@@ -73,211 +61,211 @@ watch(() => props.options, updateOptionList, { immediate: true });
|
|
|
73
61
|
|
|
74
62
|
<style>
|
|
75
63
|
fieldset[disabled] .multiselect {
|
|
76
|
-
|
|
64
|
+
pointer-events: none;
|
|
77
65
|
}
|
|
78
66
|
|
|
79
67
|
.multiselect__spinner {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
68
|
+
position: absolute;
|
|
69
|
+
right: 1px;
|
|
70
|
+
top: 1px;
|
|
71
|
+
width: 40px;
|
|
72
|
+
height: 38px;
|
|
73
|
+
background: #fff;
|
|
74
|
+
display: block;
|
|
87
75
|
}
|
|
88
76
|
|
|
89
77
|
.multiselect__spinner::before,
|
|
90
78
|
.multiselect__spinner::after {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
79
|
+
position: absolute;
|
|
80
|
+
content: "";
|
|
81
|
+
top: 50%;
|
|
82
|
+
left: 50%;
|
|
83
|
+
margin: -8px 0 0 -8px;
|
|
84
|
+
width: 16px;
|
|
85
|
+
height: 16px;
|
|
86
|
+
border-radius: 100%;
|
|
87
|
+
border-color: var(--bgl-primary-tint) transparent transparent;
|
|
88
|
+
border-style: solid;
|
|
89
|
+
border-width: 2px;
|
|
90
|
+
box-shadow: 0 0 0 1px transparent;
|
|
103
91
|
}
|
|
104
92
|
|
|
105
93
|
.multiselect__spinner::before {
|
|
106
|
-
|
|
107
|
-
|
|
94
|
+
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
|
|
95
|
+
animation-iteration-count: infinite;
|
|
108
96
|
}
|
|
109
97
|
|
|
110
98
|
.multiselect__spinner::after {
|
|
111
|
-
|
|
112
|
-
|
|
99
|
+
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
|
|
100
|
+
animation-iteration-count: infinite;
|
|
113
101
|
}
|
|
114
102
|
|
|
115
103
|
.multiselect__loading-enter-active,
|
|
116
104
|
.multiselect__loading-leave-active {
|
|
117
|
-
|
|
118
|
-
|
|
105
|
+
transition: opacity 0.4s ease-in-out;
|
|
106
|
+
opacity: 1;
|
|
119
107
|
}
|
|
120
108
|
|
|
121
109
|
.multiselect__loading-enter,
|
|
122
110
|
.multiselect__loading-leave-active {
|
|
123
|
-
|
|
111
|
+
opacity: 0;
|
|
124
112
|
}
|
|
125
113
|
|
|
126
114
|
.multiselect,
|
|
127
115
|
.multiselect__input,
|
|
128
116
|
.multiselect__single {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
117
|
+
font-family: inherit;
|
|
118
|
+
font-size: var(--input-font-size);
|
|
119
|
+
touch-action: manipulation;
|
|
132
120
|
}
|
|
133
121
|
|
|
134
122
|
.multiselect {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
123
|
+
box-sizing: content-box;
|
|
124
|
+
display: block;
|
|
125
|
+
position: relative;
|
|
126
|
+
width: 100%;
|
|
127
|
+
min-height: var(--input-height);
|
|
128
|
+
text-align: left;
|
|
129
|
+
color: var(--input-color);
|
|
142
130
|
}
|
|
143
131
|
|
|
144
132
|
.multiselect * {
|
|
145
|
-
|
|
133
|
+
box-sizing: border-box;
|
|
146
134
|
}
|
|
147
135
|
|
|
148
136
|
.multiselect:focus {
|
|
149
|
-
|
|
137
|
+
outline: none;
|
|
150
138
|
}
|
|
151
139
|
|
|
152
140
|
.multiselect--disabled {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
141
|
+
background: #ededed;
|
|
142
|
+
pointer-events: none;
|
|
143
|
+
opacity: 0.6;
|
|
156
144
|
}
|
|
157
145
|
|
|
158
146
|
.multiselect--active {
|
|
159
|
-
|
|
147
|
+
z-index: 50;
|
|
160
148
|
}
|
|
161
149
|
|
|
162
150
|
.multiselect--active:not(.multiselect--above) .multiselect__current,
|
|
163
151
|
.multiselect--active:not(.multiselect--above) .multiselect__input,
|
|
164
152
|
.multiselect--active:not(.multiselect--above) .multiselect__tags {
|
|
165
|
-
|
|
166
|
-
|
|
153
|
+
border-bottom-left-radius: 0;
|
|
154
|
+
border-bottom-right-radius: 0;
|
|
167
155
|
}
|
|
168
156
|
|
|
169
157
|
.multiselect--active:not(.multiselect--above) .multiselect__tags {
|
|
170
|
-
|
|
158
|
+
box-shadow: inset 0 0 10px #00000012;
|
|
171
159
|
}
|
|
172
160
|
|
|
173
161
|
.multiselect--active .multiselect__select {
|
|
174
|
-
|
|
162
|
+
transform: rotateZ(180deg);
|
|
175
163
|
}
|
|
176
164
|
|
|
177
165
|
.multiselect--above.multiselect--active .multiselect__current,
|
|
178
166
|
.multiselect--above.multiselect--active .multiselect__input,
|
|
179
167
|
.multiselect--above.multiselect--active .multiselect__tags {
|
|
180
|
-
|
|
181
|
-
|
|
168
|
+
border-top-left-radius: 0;
|
|
169
|
+
border-top-right-radius: 0;
|
|
182
170
|
}
|
|
183
171
|
|
|
184
172
|
.multiselect__input,
|
|
185
173
|
.multiselect__single {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
174
|
+
position: relative;
|
|
175
|
+
display: inline-block;
|
|
176
|
+
border: none;
|
|
177
|
+
background: var(--input-bg);
|
|
178
|
+
width: calc(100%);
|
|
179
|
+
transition: border 0.1s ease;
|
|
180
|
+
box-sizing: border-box;
|
|
181
|
+
vertical-align: top;
|
|
182
|
+
font-size: var(--input-font-size);
|
|
183
|
+
padding-inline-start: 0rem;
|
|
196
184
|
}
|
|
197
185
|
|
|
198
186
|
.multiselect--active .multiselect__input {
|
|
199
|
-
|
|
187
|
+
margin-top: -0.6rem;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
190
|
.multiselect__input::placeholder {
|
|
203
|
-
|
|
191
|
+
color: var(--input-color);
|
|
204
192
|
}
|
|
205
193
|
|
|
206
194
|
.multiselect__tag~.multiselect__input,
|
|
207
195
|
.multiselect__tag~.multiselect__single {
|
|
208
|
-
|
|
196
|
+
width: auto;
|
|
209
197
|
}
|
|
210
198
|
|
|
211
199
|
.multiselect__input:hover,
|
|
212
200
|
.multiselect__single:hover {
|
|
213
|
-
|
|
201
|
+
border-color: #cfcfcf;
|
|
214
202
|
}
|
|
215
203
|
|
|
216
204
|
.multiselect__input:focus,
|
|
217
205
|
.multiselect__single:focus {
|
|
218
|
-
|
|
219
|
-
|
|
206
|
+
border-color: #a8a8a8;
|
|
207
|
+
outline: none;
|
|
220
208
|
}
|
|
221
209
|
|
|
222
210
|
.multiselect__single {
|
|
223
|
-
|
|
224
|
-
|
|
211
|
+
/* padding-left: 5px; */
|
|
212
|
+
margin-bottom: 8px;
|
|
225
213
|
}
|
|
226
214
|
|
|
227
215
|
.multiselect__tags-wrap {
|
|
228
|
-
|
|
216
|
+
display: inline;
|
|
229
217
|
}
|
|
230
218
|
|
|
231
219
|
.multiselect__tags {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
220
|
+
/* min-height: 40px; */
|
|
221
|
+
display: block;
|
|
222
|
+
/* padding: 0.7rem 40px 0.7rem 8px; */
|
|
223
|
+
border-radius: var(--input-border-radius);
|
|
224
|
+
background: var(--input-bg);
|
|
225
|
+
font-size: var(--input-font-size);
|
|
226
|
+
height: var(--input-height);
|
|
227
|
+
line-height: 0;
|
|
228
|
+
padding: calc(var(--input-height) / 2);
|
|
229
|
+
padding-inline-end: 40px;
|
|
230
|
+
padding-inline-start: 0.7rem;
|
|
243
231
|
}
|
|
244
232
|
|
|
245
233
|
.multiselect__tag {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
234
|
+
position: relative;
|
|
235
|
+
display: inline-block;
|
|
236
|
+
padding: 4px 26px 4px 10px;
|
|
237
|
+
border-radius: 5px;
|
|
238
|
+
margin-right: 10px;
|
|
239
|
+
color: #fff;
|
|
240
|
+
line-height: 1;
|
|
241
|
+
background: var(--bgl-primary-tint);
|
|
242
|
+
margin-bottom: 5px;
|
|
243
|
+
white-space: nowrap;
|
|
244
|
+
overflow: hidden;
|
|
245
|
+
max-width: 100%;
|
|
246
|
+
text-overflow: ellipsis;
|
|
259
247
|
}
|
|
260
248
|
|
|
261
249
|
.multiselect__tag-icon {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
250
|
+
cursor: pointer;
|
|
251
|
+
margin-left: 7px;
|
|
252
|
+
position: absolute;
|
|
253
|
+
right: 0;
|
|
254
|
+
top: 0;
|
|
255
|
+
bottom: 0;
|
|
256
|
+
font-weight: 700;
|
|
257
|
+
font-style: initial;
|
|
258
|
+
width: 22px;
|
|
259
|
+
text-align: center;
|
|
260
|
+
line-height: 22px;
|
|
261
|
+
transition: all 0.2s ease;
|
|
262
|
+
border-radius: 5px;
|
|
275
263
|
}
|
|
276
264
|
|
|
277
265
|
.multiselect__tag-icon::after {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
266
|
+
content: "×";
|
|
267
|
+
color: #266d4d;
|
|
268
|
+
font-size: 14px;
|
|
281
269
|
}
|
|
282
270
|
|
|
283
271
|
/* // Remove these lines to avoid green closing button
|
|
@@ -288,250 +276,250 @@ fieldset[disabled] .multiselect {
|
|
|
288
276
|
|
|
289
277
|
.multiselect__tag-icon:focus::after,
|
|
290
278
|
.multiselect__tag-icon:hover::after {
|
|
291
|
-
|
|
279
|
+
color: white;
|
|
292
280
|
}
|
|
293
281
|
|
|
294
282
|
.multiselect__current {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
283
|
+
line-height: 16px;
|
|
284
|
+
min-height: 40px;
|
|
285
|
+
box-sizing: border-box;
|
|
286
|
+
display: block;
|
|
287
|
+
overflow: hidden;
|
|
288
|
+
padding: 8px 12px 0;
|
|
289
|
+
padding-right: 30px;
|
|
290
|
+
white-space: nowrap;
|
|
291
|
+
margin: 0;
|
|
292
|
+
text-decoration: none;
|
|
293
|
+
border-radius: 5px;
|
|
294
|
+
/* border: 1px solid #e8e8e8; */
|
|
295
|
+
cursor: pointer;
|
|
308
296
|
}
|
|
309
297
|
|
|
310
298
|
.multiselect__select {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
299
|
+
line-height: 16px;
|
|
300
|
+
display: block;
|
|
301
|
+
position: absolute;
|
|
302
|
+
box-sizing: border-box;
|
|
303
|
+
/* width: 40px; */
|
|
304
|
+
/* height: 38px; */
|
|
305
|
+
right: 1px;
|
|
306
|
+
top: 1px;
|
|
307
|
+
padding: 4px 8px;
|
|
308
|
+
margin: 0;
|
|
309
|
+
text-decoration: none;
|
|
310
|
+
text-align: center;
|
|
311
|
+
cursor: pointer;
|
|
312
|
+
transition: transform 0.2s ease;
|
|
313
|
+
padding-top: calc(var(--input-height) / 2 - 0.7rem);
|
|
326
314
|
|
|
327
315
|
}
|
|
328
316
|
|
|
329
317
|
.multiselect__select::before {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
318
|
+
position: relative;
|
|
319
|
+
background-size: contain;
|
|
320
|
+
transform: scale(0.5);
|
|
321
|
+
color: var(--bgl-black);
|
|
322
|
+
content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
|
|
335
323
|
}
|
|
336
324
|
|
|
337
325
|
.multiselect__placeholder {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
326
|
+
color: var(--placeholder-color);
|
|
327
|
+
display: inline-block;
|
|
328
|
+
margin-bottom: 10px;
|
|
341
329
|
|
|
342
330
|
}
|
|
343
331
|
|
|
344
332
|
.multiselect--active .multiselect__placeholder {
|
|
345
|
-
|
|
333
|
+
display: none;
|
|
346
334
|
}
|
|
347
335
|
|
|
348
336
|
.multiselect__content-wrapper {
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
337
|
+
position: absolute;
|
|
338
|
+
display: block;
|
|
339
|
+
background: #fff;
|
|
340
|
+
width: 100%;
|
|
341
|
+
max-height: 240px;
|
|
342
|
+
overflow: auto;
|
|
343
|
+
box-shadow: 0 0 10px #00000012;
|
|
344
|
+
border-top: none;
|
|
345
|
+
border-bottom-left-radius: 5px;
|
|
346
|
+
border-bottom-right-radius: 5px;
|
|
347
|
+
z-index: 50;
|
|
348
|
+
-webkit-overflow-scrolling: touch;
|
|
361
349
|
}
|
|
362
350
|
|
|
363
351
|
.multiselect__content {
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
352
|
+
list-style: none;
|
|
353
|
+
display: inline-block;
|
|
354
|
+
padding: 0;
|
|
355
|
+
margin: 0;
|
|
356
|
+
min-width: 100%;
|
|
357
|
+
vertical-align: top;
|
|
370
358
|
}
|
|
371
359
|
|
|
372
360
|
.multiselect--above .multiselect__content-wrapper {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
361
|
+
bottom: 100%;
|
|
362
|
+
border-bottom-left-radius: 0;
|
|
363
|
+
border-bottom-right-radius: 0;
|
|
364
|
+
border-top-left-radius: 5px;
|
|
365
|
+
border-top-right-radius: 5px;
|
|
366
|
+
border-bottom: none;
|
|
367
|
+
border-top: 1px solid #e8e8e8;
|
|
380
368
|
}
|
|
381
369
|
|
|
382
370
|
.multiselect__content::-webkit-scrollbar {
|
|
383
|
-
|
|
371
|
+
display: none;
|
|
384
372
|
}
|
|
385
373
|
|
|
386
374
|
.multiselect__element {
|
|
387
|
-
|
|
375
|
+
display: block;
|
|
388
376
|
}
|
|
389
377
|
|
|
390
378
|
.multiselect__option {
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
379
|
+
display: block;
|
|
380
|
+
padding-inline-start: 12px;
|
|
381
|
+
min-height: calc(var(--input-height) * 0.8);
|
|
382
|
+
line-height: calc(var(--input-height) * 0.8);
|
|
383
|
+
text-decoration: none;
|
|
384
|
+
text-transform: none;
|
|
385
|
+
position: relative;
|
|
386
|
+
cursor: pointer;
|
|
387
|
+
white-space: nowrap;
|
|
400
388
|
}
|
|
401
389
|
|
|
402
390
|
.multiselect__option::after {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
391
|
+
top: 0;
|
|
392
|
+
right: 0;
|
|
393
|
+
position: absolute;
|
|
394
|
+
width: calc(var(--input-height) * 0.8);
|
|
395
|
+
height: calc(var(--input-height) * 0.8);
|
|
396
|
+
;
|
|
397
|
+
text-align: center;
|
|
398
|
+
font-size: 13px;
|
|
411
399
|
}
|
|
412
400
|
|
|
413
401
|
.multiselect__option--highlight {
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
402
|
+
background: var(--bgl-primary-light);
|
|
403
|
+
outline: none;
|
|
404
|
+
color: var(--bgl-primary);
|
|
417
405
|
}
|
|
418
406
|
|
|
419
407
|
.multiselect__option--selected {
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
408
|
+
background: var(--bgl-primary);
|
|
409
|
+
color: var(--bgl-white);
|
|
410
|
+
font-weight: bold;
|
|
423
411
|
}
|
|
424
412
|
|
|
425
413
|
.multiselect__option--selected.multiselect__option--highlight {
|
|
426
|
-
|
|
427
|
-
|
|
414
|
+
filter: brightness(0.9);
|
|
415
|
+
color: #fff;
|
|
428
416
|
}
|
|
429
417
|
|
|
430
418
|
.multiselect__option--selected.multiselect__option--highlight::after {
|
|
431
|
-
|
|
432
|
-
|
|
419
|
+
content: "✕";
|
|
420
|
+
color: var(--bgl-white);
|
|
433
421
|
}
|
|
434
422
|
|
|
435
423
|
.multiselect--disabled .multiselect__current,
|
|
436
424
|
.multiselect--disabled .multiselect__select {
|
|
437
|
-
|
|
438
|
-
|
|
425
|
+
background: #ededed;
|
|
426
|
+
color: #a6a6a6;
|
|
439
427
|
}
|
|
440
428
|
|
|
441
429
|
.multiselect__option--disabled {
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
430
|
+
background: #ededed !important;
|
|
431
|
+
color: #a6a6a6 !important;
|
|
432
|
+
cursor: text;
|
|
433
|
+
pointer-events: none;
|
|
446
434
|
}
|
|
447
435
|
|
|
448
436
|
.multiselect__option--group {
|
|
449
|
-
|
|
450
|
-
|
|
437
|
+
background: #ededed;
|
|
438
|
+
color: var(--input-color);
|
|
451
439
|
}
|
|
452
440
|
|
|
453
441
|
.multiselect__option--group.multiselect__option--highlight {
|
|
454
|
-
|
|
455
|
-
|
|
442
|
+
background: var(--input-color);
|
|
443
|
+
color: #fff;
|
|
456
444
|
}
|
|
457
445
|
|
|
458
446
|
.multiselect__option--group.multiselect__option--highlight::after {
|
|
459
|
-
|
|
447
|
+
background: var(--input-color);
|
|
460
448
|
}
|
|
461
449
|
|
|
462
450
|
.multiselect__option--disabled.multiselect__option--highlight {
|
|
463
|
-
|
|
451
|
+
background: #dedede;
|
|
464
452
|
}
|
|
465
453
|
|
|
466
454
|
.multiselect__option--group-selected.multiselect__option--highlight {
|
|
467
|
-
|
|
468
|
-
|
|
455
|
+
background: var(--bgl-red);
|
|
456
|
+
color: #fff;
|
|
469
457
|
}
|
|
470
458
|
|
|
471
459
|
.multiselect__option--group-selected.multiselect__option--highlight::after {
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
460
|
+
background: var(--bgl-red);
|
|
461
|
+
content: attr(data-deselect);
|
|
462
|
+
color: #fff;
|
|
475
463
|
}
|
|
476
464
|
|
|
477
465
|
.multiselect-enter-active,
|
|
478
466
|
.multiselect-leave-active {
|
|
479
|
-
|
|
467
|
+
transition: all 0.15s ease;
|
|
480
468
|
}
|
|
481
469
|
|
|
482
470
|
.multiselect-enter,
|
|
483
471
|
.multiselect-leave-active {
|
|
484
|
-
|
|
472
|
+
opacity: 0;
|
|
485
473
|
}
|
|
486
474
|
|
|
487
475
|
.multiselect__strong {
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
476
|
+
margin-bottom: 8px;
|
|
477
|
+
line-height: 20px;
|
|
478
|
+
display: inline-block;
|
|
479
|
+
vertical-align: top;
|
|
492
480
|
}
|
|
493
481
|
|
|
494
482
|
*[dir="rtl"] .multiselect {
|
|
495
|
-
|
|
483
|
+
text-align: right;
|
|
496
484
|
}
|
|
497
485
|
|
|
498
486
|
*[dir="rtl"] .multiselect__select {
|
|
499
|
-
|
|
500
|
-
|
|
487
|
+
right: auto;
|
|
488
|
+
left: 1px;
|
|
501
489
|
}
|
|
502
490
|
|
|
503
491
|
*[dir="rtl"] .multiselect__tags {
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
492
|
+
padding: calc(var(--input-height) / 2);
|
|
493
|
+
padding-inline-end: 40px;
|
|
494
|
+
padding-inline-start: 0.7rem;
|
|
507
495
|
}
|
|
508
496
|
|
|
509
497
|
*[dir="rtl"] .multiselect__content {
|
|
510
|
-
|
|
498
|
+
text-align: right;
|
|
511
499
|
}
|
|
512
500
|
|
|
513
501
|
*[dir="rtl"] .multiselect__option::after {
|
|
514
|
-
|
|
515
|
-
|
|
502
|
+
right: auto;
|
|
503
|
+
left: 0;
|
|
516
504
|
}
|
|
517
505
|
|
|
518
506
|
*[dir="rtl"] .multiselect__clear {
|
|
519
|
-
|
|
520
|
-
|
|
507
|
+
right: auto;
|
|
508
|
+
left: 12px;
|
|
521
509
|
}
|
|
522
510
|
|
|
523
511
|
*[dir="rtl"] .multiselect__spinner {
|
|
524
|
-
|
|
525
|
-
|
|
512
|
+
right: auto;
|
|
513
|
+
left: 1px;
|
|
526
514
|
}
|
|
527
515
|
|
|
528
516
|
@keyframes spinning {
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
517
|
+
from {
|
|
518
|
+
transform: rotate(0);
|
|
519
|
+
}
|
|
532
520
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
521
|
+
to {
|
|
522
|
+
transform: rotate(2turn);
|
|
523
|
+
}
|
|
536
524
|
}
|
|
537
525
|
</style>
|