@stackline/angular-multiselect-dropdown 12.0.0 → 13.0.0

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 (40) hide show
  1. package/README.md +12 -12
  2. package/esm2020/lib/clickOutside.mjs +78 -0
  3. package/esm2020/lib/list-filter.mjs +33 -0
  4. package/esm2020/lib/menu-item.mjs +62 -0
  5. package/esm2020/lib/multiselect.component.mjs +397 -0
  6. package/esm2020/lib/multiselect.interface.mjs +2 -0
  7. package/esm2020/lib/multiselect.model.mjs +9 -0
  8. package/esm2020/public-api.mjs +6 -0
  9. package/esm2020/stackline-angular-multiselect-dropdown.mjs +5 -0
  10. package/fesm2015/stackline-angular-multiselect-dropdown.mjs +576 -0
  11. package/fesm2015/stackline-angular-multiselect-dropdown.mjs.map +1 -0
  12. package/fesm2020/stackline-angular-multiselect-dropdown.mjs +576 -0
  13. package/fesm2020/stackline-angular-multiselect-dropdown.mjs.map +1 -0
  14. package/lib/clickOutside.d.ts +27 -0
  15. package/lib/list-filter.d.ts +9 -0
  16. package/lib/menu-item.d.ts +25 -0
  17. package/lib/multiselect.component.d.ts +80 -0
  18. package/lib/multiselect.interface.d.ts +22 -0
  19. package/lib/multiselect.model.d.ts +10 -0
  20. package/package.json +37 -105
  21. package/public-api.d.ts +6 -0
  22. package/stackline-angular-multiselect-dropdown.d.ts +5 -0
  23. package/angular2-multiselect-dropdown.ts +0 -1
  24. package/gulpfile.js +0 -68
  25. package/inline-resources.js +0 -119
  26. package/multiselect.component.css +0 -733
  27. package/src/app/angular2-multiselect-dropdown/angular2-multiselect-dropdown.ts +0 -6
  28. package/src/app/angular2-multiselect-dropdown/clickOutside.ts +0 -60
  29. package/src/app/angular2-multiselect-dropdown/index.ts +0 -6
  30. package/src/app/angular2-multiselect-dropdown/list-filter.ts +0 -29
  31. package/src/app/angular2-multiselect-dropdown/menu-item.ts +0 -55
  32. package/src/app/angular2-multiselect-dropdown/multiselect.component.html +0 -88
  33. package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +0 -710
  34. package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +0 -405
  35. package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts +0 -22
  36. package/src/app/angular2-multiselect-dropdown/multiselect.model.ts +0 -13
  37. package/tsconfig-aot.json +0 -32
  38. package/tsconfig.json +0 -36
  39. package/webpack-test.config.ts +0 -70
  40. package/webpack-umd.config.ts +0 -98
@@ -1,733 +0,0 @@
1
- .stackline-dropdown {
2
- position: relative;
3
- }
4
-
5
- .c-btn {
6
- display: inline-block;
7
- background: #fff;
8
- border: 1px solid #ccc;
9
- border-radius: 3px;
10
- font-size: 14px;
11
- color: #333;
12
- }
13
-
14
- .c-btn.disabled {
15
- background: #ccc;
16
- }
17
-
18
- .c-btn:focus {
19
- outline: none;
20
- }
21
-
22
- .selected-list .c-list {
23
- display: flex;
24
- flex: 1 1 auto;
25
- align-items: center;
26
- flex-wrap: wrap;
27
- min-width: 0;
28
- float: none;
29
- padding: 0px;
30
- margin: 0px;
31
- width: auto;
32
- }
33
- .selected-list .c-list .c-token {
34
- list-style: none;
35
- padding: 0px 5px;
36
- background: #0079FE;
37
- color: #fff;
38
- border-radius: 2px;
39
- margin-right: 4px;
40
- margin-top: 2px;
41
- float: left;
42
- }
43
- .selected-list .c-list .c-token .c-label {
44
- display: block;
45
- float: left;
46
- /*width: 50px;
47
- white-space: nowrap;
48
- text-overflow: ellipsis;
49
- overflow: hidden;*/
50
- }
51
- .selected-list .c-list .c-token .fa-remove {
52
- margin-left: 1px;
53
- font-size: 12px;
54
- }
55
- .selected-list .fa-angle-down, .selected-list .fa-angle-up {
56
- font-size: 15pt;
57
- position: absolute;
58
- right: 10px;
59
- top: 50%;
60
- transform: translateY(-50%);
61
- }
62
- .selected-list .countplaceholder {
63
- display: inline-flex;
64
- flex: 0 0 auto;
65
- align-items: center;
66
- justify-content: center;
67
- align-self: center;
68
- margin: 0 0 0 6px;
69
- line-height: 1;
70
- }
71
- .selected-list .c-btn {
72
- box-sizing: border-box;
73
- width: 100%;
74
- box-shadow: 0px 1px 5px #959595;
75
- padding: 10px 36px 10px 10px;
76
- cursor: pointer;
77
- display: flex;
78
- align-items: center;
79
- flex-wrap: nowrap;
80
- position: relative;
81
- }
82
-
83
- .dropdown-list {
84
- position: absolute;
85
- padding-top: 14px;
86
- width: 100%;
87
- z-index: 9999;
88
- }
89
- .dropdown-list ul {
90
- padding: 0px;
91
- list-style: none;
92
- overflow: auto;
93
- margin: 0px;
94
- }
95
- .dropdown-list ul li {
96
- padding: 10px 10px;
97
- cursor: pointer;
98
- text-align: left;
99
- }
100
- .dropdown-list ul li:first-child {
101
- padding-top: 10px;
102
- }
103
- .dropdown-list ul li:last-child {
104
- padding-bottom: 10px;
105
- }
106
- .dropdown-list ul li:hover {
107
- background: #f5f5f5;
108
- }
109
- .dropdown-list ::-webkit-scrollbar {
110
- width: 8px;
111
- }
112
- .dropdown-list ::-webkit-scrollbar-thumb {
113
- background: #cccccc;
114
- border-radius: 5px;
115
- }
116
- .dropdown-list ::-webkit-scrollbar-track {
117
- background: #f2f2f2;
118
- }
119
-
120
- .arrow-up {
121
- width: 0;
122
- height: 0;
123
- border-left: 13px solid transparent;
124
- border-right: 13px solid transparent;
125
- border-bottom: 15px solid #fff;
126
- margin-left: 15px;
127
- position: absolute;
128
- top: 0;
129
- }
130
-
131
- .arrow-2 {
132
- border-bottom: 15px solid #ccc;
133
- top: -1px;
134
- }
135
-
136
- .list-area {
137
- border: 1px solid #ccc;
138
- border-radius: 3px;
139
- background: #fff;
140
- margin: 0px;
141
- box-shadow: 0px 1px 5px #959595;
142
- }
143
-
144
- .select-all {
145
- padding: 10px;
146
- border-bottom: 1px solid #ccc;
147
- text-align: left;
148
- }
149
-
150
- .list-filter {
151
- border-bottom: 1px solid #ccc;
152
- position: relative;
153
- }
154
- .list-filter input {
155
- border: 0px;
156
- width: 100%;
157
- height: 35px;
158
- padding: 0px 0px 0px 35px;
159
- }
160
- .list-filter input:focus {
161
- outline: none;
162
- }
163
- .list-filter .fa {
164
- position: absolute;
165
- top: 10px;
166
- left: 13px;
167
- color: #888;
168
- }
169
-
170
- .pure-checkbox input[type=checkbox] {
171
- border: 0;
172
- clip: rect(0 0 0 0);
173
- height: 1px;
174
- margin: -1px;
175
- overflow: hidden;
176
- padding: 0;
177
- position: absolute;
178
- width: 1px;
179
- }
180
-
181
- .pure-checkbox input[type=checkbox]:focus + label:before,
182
- .pure-checkbox input[type=checkbox]:hover + label:before {
183
- border-color: #0079FE;
184
- background-color: #f2f2f2;
185
- }
186
-
187
- .pure-checkbox input[type=checkbox]:active + label:before {
188
- transition-duration: 0s;
189
- }
190
-
191
- .pure-checkbox input[type=checkbox] + label {
192
- position: relative;
193
- padding-left: 2em;
194
- vertical-align: middle;
195
- user-select: none;
196
- cursor: pointer;
197
- margin: 0px;
198
- color: #000;
199
- font-weight: 300;
200
- }
201
-
202
- .pure-checkbox input[type=checkbox] + label:before {
203
- box-sizing: content-box;
204
- content: "";
205
- color: #0079FE;
206
- position: absolute;
207
- top: 50%;
208
- left: 0;
209
- width: 14px;
210
- height: 14px;
211
- margin-top: -9px;
212
- border: 2px solid #0079FE;
213
- text-align: center;
214
- transition: all 0.4s ease;
215
- }
216
-
217
- .pure-checkbox input[type=checkbox] + label:after {
218
- box-sizing: content-box;
219
- content: "";
220
- background-color: #0079FE;
221
- position: absolute;
222
- top: 50%;
223
- left: 4px;
224
- width: 10px;
225
- height: 10px;
226
- margin-top: -5px;
227
- transform: scale(0);
228
- transform-origin: 50%;
229
- transition: transform 200ms ease-out;
230
- }
231
-
232
- .pure-checkbox input[type=checkbox]:disabled + label:before {
233
- border-color: #cccccc;
234
- }
235
-
236
- .pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {
237
- background-color: inherit;
238
- }
239
-
240
- .pure-checkbox input[type=checkbox]:disabled:checked + label:before {
241
- background-color: #cccccc;
242
- }
243
-
244
- .pure-checkbox input[type=checkbox] + label:after {
245
- background-color: transparent;
246
- top: 50%;
247
- left: 4px;
248
- width: 8px;
249
- height: 3px;
250
- margin-top: -4px;
251
- border-style: solid;
252
- border-color: #ffffff;
253
- border-width: 0 0 3px 3px;
254
- border-image: none;
255
- transform: rotate(-45deg) scale(0);
256
- }
257
-
258
- .pure-checkbox input[type=checkbox]:checked + label:after {
259
- content: "";
260
- transform: rotate(-45deg) scale(1);
261
- transition: transform 200ms ease-out;
262
- }
263
-
264
- .pure-checkbox input[type=radio]:checked + label:before {
265
- background-color: white;
266
- }
267
-
268
- .pure-checkbox input[type=radio]:checked + label:after {
269
- transform: scale(1);
270
- }
271
-
272
- .pure-checkbox input[type=radio] + label:before {
273
- border-radius: 50%;
274
- }
275
-
276
- .pure-checkbox input[type=checkbox]:checked + label:before {
277
- background: #0079FE;
278
- }
279
-
280
- .pure-checkbox input[type=checkbox]:checked + label:after {
281
- transform: rotate(-45deg) scale(1);
282
- }
283
-
284
- .list-message {
285
- text-align: center;
286
- }
287
-
288
- .list-grp {
289
- padding: 0 15px !important;
290
- }
291
-
292
- .list-grp h4 {
293
- text-transform: capitalize;
294
- margin: 15px 0px 0px 0px;
295
- font-size: 14px;
296
- font-weight: 700;
297
- }
298
-
299
- .list-grp > li {
300
- padding-left: 15px !important;
301
- }
302
-
303
- .stackline-dropdown.theme-material,
304
- .stackline-dropdown.theme-dark,
305
- .stackline-dropdown.theme-custom {
306
- --ms-primary: #3f51b5;
307
- --ms-primary-soft: rgba(63, 81, 181, 0.12);
308
- --ms-surface: #ffffff;
309
- --ms-surface-soft: #f5f7fb;
310
- --ms-surface-muted: #e8eaf6;
311
- --ms-outline: #c5cae9;
312
- --ms-outline-strong: #7986cb;
313
- --ms-on-surface: #212121;
314
- --ms-on-surface-muted: #5f6368;
315
- --ms-chip-bg: #e8eaf6;
316
- --ms-chip-text: #303f9f;
317
- --ms-chip-remove: #303f9f;
318
- --ms-divider: rgba(125, 119, 134, 0.16);
319
- --ms-section-bg: rgba(247, 242, 250, 0.76);
320
- --ms-selected-text: var(--ms-primary);
321
- --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
322
- --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
323
- display: block;
324
- width: 100%;
325
- color: var(--ms-on-surface);
326
- font: inherit;
327
- }
328
-
329
- .stackline-dropdown.theme-dark {
330
- --ms-primary: #8ab4f8;
331
- --ms-primary-soft: rgba(138, 180, 248, 0.18);
332
- --ms-surface: #151a23;
333
- --ms-surface-soft: #202736;
334
- --ms-surface-muted: #111722;
335
- --ms-outline: #384456;
336
- --ms-outline-strong: #8ab4f8;
337
- --ms-on-surface: #edf2f7;
338
- --ms-on-surface-muted: #aab6c5;
339
- --ms-chip-bg: #263247;
340
- --ms-chip-text: #d7e6ff;
341
- --ms-chip-remove: #d7e6ff;
342
- --ms-divider: rgba(170, 182, 197, 0.18);
343
- --ms-section-bg: #101620;
344
- --ms-selected-text: #d7e6ff;
345
- --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
346
- --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);
347
- }
348
-
349
- .stackline-dropdown.theme-custom {
350
- --ms-primary: var(--stackline-ms-primary, #0f766e);
351
- --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));
352
- --ms-surface: var(--stackline-ms-surface, #ffffff);
353
- --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);
354
- --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);
355
- --ms-outline: var(--stackline-ms-outline, #99f6e4);
356
- --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);
357
- --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);
358
- --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);
359
- --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);
360
- --ms-chip-text: var(--stackline-ms-chip-text, #115e59);
361
- --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);
362
- --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));
363
- --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);
364
- --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));
365
- --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));
366
- --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));
367
- }
368
-
369
- .stackline-dropdown.theme-material .selected-list,
370
- .stackline-dropdown.theme-dark .selected-list,
371
- .stackline-dropdown.theme-custom .selected-list {
372
- width: 100%;
373
- }
374
-
375
- .stackline-dropdown.theme-material .selected-list .c-btn,
376
- .stackline-dropdown.theme-dark .selected-list .c-btn,
377
- .stackline-dropdown.theme-custom .selected-list .c-btn {
378
- position: relative;
379
- display: flex;
380
- align-items: center;
381
- flex-wrap: nowrap;
382
- gap: 8px;
383
- width: 100%;
384
- min-height: 56px;
385
- padding: 11px 54px 11px 16px;
386
- border-radius: 18px;
387
- border: 1px solid var(--ms-outline);
388
- background: var(--ms-surface);
389
- box-shadow: var(--ms-shadow-soft);
390
- color: var(--ms-on-surface);
391
- cursor: pointer;
392
- font-size: inherit;
393
- line-height: 1.45;
394
- transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
395
- }
396
-
397
- .stackline-dropdown.theme-material .selected-list .c-btn:hover,
398
- .stackline-dropdown.theme-dark .selected-list .c-btn:hover,
399
- .stackline-dropdown.theme-custom .selected-list .c-btn:hover {
400
- border-color: var(--ms-outline-strong);
401
- }
402
-
403
- .stackline-dropdown.theme-material .selected-list .c-btn.disabled,
404
- .stackline-dropdown.theme-dark .selected-list .c-btn.disabled,
405
- .stackline-dropdown.theme-custom .selected-list .c-btn.disabled {
406
- background: var(--ms-surface);
407
- cursor: not-allowed;
408
- opacity: 0.72;
409
- }
410
-
411
- .stackline-dropdown.theme-material .selected-list .c-list,
412
- .stackline-dropdown.theme-dark .selected-list .c-list,
413
- .stackline-dropdown.theme-custom .selected-list .c-list {
414
- display: flex;
415
- flex: 1 1 auto;
416
- flex-wrap: wrap;
417
- gap: 8px;
418
- width: auto;
419
- min-width: 0;
420
- margin: 0;
421
- padding: 0;
422
- float: none;
423
- }
424
-
425
- .stackline-dropdown.theme-material .selected-list .c-list .c-token,
426
- .stackline-dropdown.theme-dark .selected-list .c-list .c-token,
427
- .stackline-dropdown.theme-custom .selected-list .c-list .c-token {
428
- position: relative;
429
- display: inline-block;
430
- vertical-align: middle;
431
- min-height: 32px;
432
- max-width: 100%;
433
- padding: 6px 30px 6px 12px;
434
- background: var(--ms-chip-bg);
435
- color: var(--ms-chip-text);
436
- border-radius: 999px;
437
- box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);
438
- line-height: 1.35;
439
- white-space: normal;
440
- overflow-wrap: anywhere;
441
- margin: 0;
442
- float: none;
443
- }
444
-
445
- .stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,
446
- .stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,
447
- .stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {
448
- display: inline-flex;
449
- align-items: center;
450
- float: none;
451
- min-width: 0;
452
- max-width: 100%;
453
- line-height: 1.3;
454
- font-weight: 500;
455
- white-space: normal;
456
- overflow-wrap: anywhere;
457
- }
458
-
459
- .stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,
460
- .stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,
461
- .stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {
462
- position: absolute;
463
- right: 10px;
464
- top: 50%;
465
- display: inline-flex;
466
- align-items: center;
467
- justify-content: center;
468
- width: 16px;
469
- height: 16px;
470
- margin-left: 0;
471
- transform: translateY(-50%);
472
- color: var(--ms-chip-remove);
473
- cursor: pointer;
474
- }
475
-
476
- .stackline-dropdown.theme-material .selected-list .countplaceholder,
477
- .stackline-dropdown.theme-dark .selected-list .countplaceholder,
478
- .stackline-dropdown.theme-custom .selected-list .countplaceholder {
479
- display: inline-flex;
480
- flex: 0 0 auto;
481
- align-items: center;
482
- justify-content: center;
483
- align-self: center;
484
- margin: 0;
485
- line-height: 1;
486
- color: var(--ms-on-surface-muted);
487
- font-size: 0.8rem;
488
- font-weight: 600;
489
- }
490
-
491
- .stackline-dropdown.theme-material .selected-list .fa-angle-down,
492
- .stackline-dropdown.theme-dark .selected-list .fa-angle-down,
493
- .stackline-dropdown.theme-custom .selected-list .fa-angle-down,
494
- .stackline-dropdown.theme-material .selected-list .fa-angle-up,
495
- .stackline-dropdown.theme-dark .selected-list .fa-angle-up,
496
- .stackline-dropdown.theme-custom .selected-list .fa-angle-up {
497
- position: absolute;
498
- top: 50%;
499
- right: 16px;
500
- display: inline-flex;
501
- align-items: center;
502
- justify-content: center;
503
- width: 20px;
504
- height: 20px;
505
- transform: translateY(-50%);
506
- color: var(--ms-on-surface-muted);
507
- font-size: 15pt;
508
- pointer-events: none;
509
- }
510
-
511
- .stackline-dropdown.theme-material .dropdown-list,
512
- .stackline-dropdown.theme-dark .dropdown-list,
513
- .stackline-dropdown.theme-custom .dropdown-list {
514
- position: absolute;
515
- width: 100%;
516
- padding-top: 8px;
517
- z-index: 99999;
518
- }
519
-
520
- .stackline-dropdown.theme-material .arrow-up,
521
- .stackline-dropdown.theme-dark .arrow-up,
522
- .stackline-dropdown.theme-custom .arrow-up,
523
- .stackline-dropdown.theme-material .arrow-down,
524
- .stackline-dropdown.theme-dark .arrow-down,
525
- .stackline-dropdown.theme-custom .arrow-down,
526
- .stackline-dropdown.theme-material .arrow-2,
527
- .stackline-dropdown.theme-dark .arrow-2,
528
- .stackline-dropdown.theme-custom .arrow-2 {
529
- display: none;
530
- }
531
-
532
- .stackline-dropdown.theme-material .list-area,
533
- .stackline-dropdown.theme-dark .list-area,
534
- .stackline-dropdown.theme-custom .list-area {
535
- overflow: hidden;
536
- border-radius: 22px;
537
- background: var(--ms-surface);
538
- border: 1px solid var(--ms-outline);
539
- box-shadow: var(--ms-shadow);
540
- margin: 0;
541
- }
542
-
543
- .stackline-dropdown.theme-material .select-all,
544
- .stackline-dropdown.theme-dark .select-all,
545
- .stackline-dropdown.theme-custom .select-all {
546
- padding: 10px 14px;
547
- border-bottom: 1px solid var(--ms-divider);
548
- background: var(--ms-section-bg);
549
- text-align: left;
550
- }
551
-
552
- .stackline-dropdown.theme-material .list-filter,
553
- .stackline-dropdown.theme-dark .list-filter,
554
- .stackline-dropdown.theme-custom .list-filter {
555
- position: relative;
556
- display: flex;
557
- align-items: center;
558
- min-height: 52px;
559
- padding-left: 48px;
560
- padding-right: 44px;
561
- border-bottom: 1px solid var(--ms-divider);
562
- background: var(--ms-surface);
563
- }
564
-
565
- .stackline-dropdown.theme-material .list-filter input,
566
- .stackline-dropdown.theme-dark .list-filter input,
567
- .stackline-dropdown.theme-custom .list-filter input {
568
- width: 100%;
569
- height: 100%;
570
- border: 0;
571
- background: transparent;
572
- color: var(--ms-on-surface);
573
- font: inherit;
574
- padding: 0;
575
- }
576
-
577
- .stackline-dropdown.theme-material .list-filter input::placeholder,
578
- .stackline-dropdown.theme-dark .list-filter input::placeholder,
579
- .stackline-dropdown.theme-custom .list-filter input::placeholder {
580
- color: var(--ms-on-surface-muted);
581
- }
582
-
583
- .stackline-dropdown.theme-material .list-filter input:focus,
584
- .stackline-dropdown.theme-dark .list-filter input:focus,
585
- .stackline-dropdown.theme-custom .list-filter input:focus {
586
- outline: none;
587
- }
588
-
589
- .stackline-dropdown.theme-material .list-filter .fa,
590
- .stackline-dropdown.theme-dark .list-filter .fa,
591
- .stackline-dropdown.theme-custom .list-filter .fa {
592
- position: absolute;
593
- top: 50%;
594
- left: 16px;
595
- display: inline-flex;
596
- align-items: center;
597
- justify-content: center;
598
- width: 18px;
599
- height: 18px;
600
- transform: translateY(-50%);
601
- color: var(--ms-on-surface-muted);
602
- }
603
-
604
- .stackline-dropdown.theme-material .dropdown-list ul,
605
- .stackline-dropdown.theme-dark .dropdown-list ul,
606
- .stackline-dropdown.theme-custom .dropdown-list ul {
607
- list-style: none;
608
- margin: 0;
609
- padding: 8px;
610
- overflow: auto;
611
- }
612
-
613
- .stackline-dropdown.theme-material .dropdown-list ul li,
614
- .stackline-dropdown.theme-dark .dropdown-list ul li,
615
- .stackline-dropdown.theme-custom .dropdown-list ul li {
616
- align-items: center;
617
- min-height: 0;
618
- margin: 4px;
619
- padding: 12px 14px;
620
- border-radius: 14px;
621
- cursor: pointer;
622
- text-align: left;
623
- line-height: 1.35;
624
- transition: background-color 0.16s ease, color 0.16s ease;
625
- }
626
-
627
- .stackline-dropdown.theme-material .dropdown-list ul li:first-child,
628
- .stackline-dropdown.theme-dark .dropdown-list ul li:first-child,
629
- .stackline-dropdown.theme-custom .dropdown-list ul li:first-child {
630
- padding-top: 12px;
631
- }
632
-
633
- .stackline-dropdown.theme-material .dropdown-list ul li:last-child,
634
- .stackline-dropdown.theme-dark .dropdown-list ul li:last-child,
635
- .stackline-dropdown.theme-custom .dropdown-list ul li:last-child {
636
- padding-bottom: 12px;
637
- }
638
-
639
- .stackline-dropdown.theme-material .dropdown-list ul li:hover,
640
- .stackline-dropdown.theme-dark .dropdown-list ul li:hover,
641
- .stackline-dropdown.theme-custom .dropdown-list ul li:hover {
642
- background: var(--ms-surface-soft);
643
- }
644
-
645
- .stackline-dropdown.theme-material .pure-checkbox,
646
- .stackline-dropdown.theme-dark .pure-checkbox,
647
- .stackline-dropdown.theme-custom .pure-checkbox {
648
- position: relative;
649
- }
650
-
651
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,
652
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,
653
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {
654
- position: relative;
655
- display: block;
656
- width: 100%;
657
- margin: 0;
658
- padding-left: 32px;
659
- color: inherit;
660
- cursor: pointer;
661
- font-weight: 500;
662
- user-select: none;
663
- }
664
-
665
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,
666
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,
667
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {
668
- box-sizing: content-box;
669
- content: "";
670
- position: absolute;
671
- top: 50%;
672
- left: 0;
673
- width: 16px;
674
- height: 16px;
675
- margin-top: -10px;
676
- border: 2px solid var(--ms-outline-strong);
677
- border-radius: 5px;
678
- background: var(--ms-surface);
679
- transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
680
- }
681
-
682
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,
683
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,
684
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {
685
- box-sizing: content-box;
686
- content: "";
687
- position: absolute;
688
- top: 50%;
689
- left: 5px;
690
- width: 8px;
691
- height: 3px;
692
- margin-top: -4px;
693
- border-style: solid;
694
- border-color: #ffffff;
695
- border-width: 0 0 3px 3px;
696
- border-image: none;
697
- background: transparent;
698
- transform: rotate(-45deg) scale(0);
699
- transform-origin: 50%;
700
- transition: transform 0.16s ease;
701
- }
702
-
703
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,
704
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,
705
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,
706
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,
707
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,
708
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {
709
- border-color: var(--ms-primary);
710
- background: var(--ms-surface-soft);
711
- }
712
-
713
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,
714
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,
715
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {
716
- border-color: var(--ms-primary);
717
- background: var(--ms-primary);
718
- }
719
-
720
- .stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,
721
- .stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,
722
- .stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {
723
- transform: rotate(-45deg) scale(1);
724
- }
725
-
726
- .stackline-dropdown.theme-material .list-message,
727
- .stackline-dropdown.theme-dark .list-message,
728
- .stackline-dropdown.theme-custom .list-message {
729
- margin: 0;
730
- padding: 20px 14px;
731
- color: var(--ms-on-surface-muted);
732
- text-align: center;
733
- }