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