@tabler/core 1.0.0-beta → 1.0.0-beta5

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 (106) hide show
  1. package/README.md +11 -0
  2. package/dist/.DS_Store +0 -0
  3. package/dist/css/demo.css +55 -23
  4. package/dist/css/demo.min.css +3 -3
  5. package/dist/css/demo.rtl.css +55 -23
  6. package/dist/css/demo.rtl.min.css +3 -3
  7. package/dist/css/tabler-flags.css +7 -3
  8. package/dist/css/tabler-flags.min.css +3 -3
  9. package/dist/css/tabler-flags.rtl.css +7 -3
  10. package/dist/css/tabler-flags.rtl.min.css +3 -3
  11. package/dist/css/tabler-payments.css +6 -2
  12. package/dist/css/tabler-payments.min.css +3 -3
  13. package/dist/css/tabler-payments.rtl.css +6 -2
  14. package/dist/css/tabler-payments.rtl.min.css +3 -3
  15. package/dist/css/tabler-vendors.css +463 -370
  16. package/dist/css/tabler-vendors.min.css +3 -3
  17. package/dist/css/tabler-vendors.rtl.css +463 -370
  18. package/dist/css/tabler-vendors.rtl.min.css +3 -3
  19. package/dist/css/tabler.css +2165 -1401
  20. package/dist/css/tabler.min.css +8 -3
  21. package/dist/css/tabler.rtl.css +2166 -1402
  22. package/dist/css/tabler.rtl.min.css +8 -3
  23. package/dist/js/demo.js +151 -0
  24. package/dist/js/demo.min.js +9 -0
  25. package/dist/js/tabler.esm.js +7791 -0
  26. package/dist/js/tabler.esm.min.js +9 -0
  27. package/dist/js/tabler.js +2422 -2708
  28. package/dist/js/tabler.min.js +3 -3
  29. package/dist/libs/apexcharts/dist/apexcharts.min.js +5 -5
  30. package/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js +2 -2
  31. package/dist/libs/countup.js/dist/countUp.js +3 -3
  32. package/dist/libs/litepicker/dist/litepicker.js +3 -3
  33. package/dist/libs/nouislider/dist/nouislider.min.js +1 -0
  34. package/dist/libs/tom-select/dist/js/tom-select.base.min.js +300 -0
  35. package/package.json +85 -29
  36. package/src/js/demo.js +98 -0
  37. package/src/js/{autosize.js → src/autosize.js} +0 -0
  38. package/src/js/src/dropdown.js +9 -0
  39. package/src/js/{input-mask.js → src/input-mask.js} +0 -0
  40. package/src/js/{popover.js → src/popover.js} +0 -0
  41. package/src/js/{switch-icon.js → src/switch-icon.js} +0 -0
  42. package/src/js/src/tab.js +14 -0
  43. package/src/js/{toast.js → src/toast.js} +0 -0
  44. package/src/js/{tooltip.js → src/tooltip.js} +0 -0
  45. package/src/js/tabler.esm.js +10 -0
  46. package/src/js/tabler.js +12 -7
  47. package/src/scss/_bootstrap-components.scss +3 -0
  48. package/src/scss/_bootstrap-config.scss +1 -0
  49. package/src/scss/{_tabler-core.scss → _core.scss} +2 -1
  50. package/src/scss/_mixins-override.scss +3 -3
  51. package/src/scss/_utilities.scss +12 -2
  52. package/src/scss/_variables.scss +123 -72
  53. package/src/scss/demo/_examples.scss +11 -2
  54. package/src/scss/demo.scss +31 -2
  55. package/src/scss/layout/_core.scss +23 -5
  56. package/src/scss/layout/_dark.scss +168 -0
  57. package/src/scss/layout/_footer.scss +2 -5
  58. package/src/scss/layout/_navbar.scss +17 -9
  59. package/src/scss/layout/_page.scss +79 -14
  60. package/src/scss/mixins/_functions.scss +2 -6
  61. package/src/scss/mixins/_mixins.scss +18 -29
  62. package/src/scss/tabler-vendors.scss +2 -2
  63. package/src/scss/tabler.scss +1 -1
  64. package/src/scss/ui/_accordion.scss +1 -0
  65. package/src/scss/ui/_alerts.scss +8 -3
  66. package/src/scss/ui/_avatars.scss +15 -6
  67. package/src/scss/ui/_badges.scss +11 -0
  68. package/src/scss/ui/_breadcrumbs.scss +8 -14
  69. package/src/scss/ui/_buttons.scss +30 -39
  70. package/src/scss/ui/_calendars.scss +3 -3
  71. package/src/scss/ui/_cards.scss +36 -13
  72. package/src/scss/ui/_flags.scss +1 -1
  73. package/src/scss/ui/_forms.scss +9 -10
  74. package/src/scss/ui/_grid.scss +6 -6
  75. package/src/scss/ui/_icons.scss +4 -3
  76. package/src/scss/ui/_images.scss +1 -1
  77. package/src/scss/ui/_legend.scss +1 -1
  78. package/src/scss/ui/_lists.scss +2 -2
  79. package/src/scss/ui/_markdown.scss +13 -30
  80. package/src/scss/ui/_modals.scss +2 -2
  81. package/src/scss/ui/_nav.scss +26 -33
  82. package/src/scss/ui/_offcanvas.scss +21 -0
  83. package/src/scss/ui/_progress.scss +2 -1
  84. package/src/scss/ui/_ribbons.scss +7 -2
  85. package/src/scss/ui/_skeleton.scss +1 -1
  86. package/src/scss/ui/_steps.scss +2 -2
  87. package/src/scss/ui/_switch-icon.scss +5 -5
  88. package/src/scss/ui/_tables.scss +4 -2
  89. package/src/scss/ui/_type.scss +8 -8
  90. package/src/scss/ui/forms/_form-check.scss +11 -3
  91. package/src/scss/ui/forms/_form-colorinput.scss +1 -1
  92. package/src/scss/ui/forms/_form-imagecheck.scss +5 -5
  93. package/src/scss/ui/forms/_form-selectgroup.scss +9 -3
  94. package/src/scss/ui/forms/_validation.scss +1 -1
  95. package/src/scss/utils/_background.scss +2 -2
  96. package/src/scss/utils/_colors.scss +28 -16
  97. package/src/scss/utils/_opacity.scss +1 -1
  98. package/src/scss/vendor/_apexcharts.scss +1 -47
  99. package/src/scss/vendor/_litepicker.scss +5 -2
  100. package/src/scss/vendor/_nouislider.scss +3 -3
  101. package/src/scss/vendor/_tom-select.scss +12 -0
  102. package/dist/libs/choices.js/public/assets/scripts/choices.js +0 -5603
  103. package/dist/libs/nouislider/distribute/nouislider.min.js +0 -2
  104. package/src/js/dropdown.js +0 -40
  105. package/src/scss/_dark.scss +0 -105
  106. package/src/scss/vendor/_choices.scss +0 -61
@@ -1,52 +1,11 @@
1
1
  /*!
2
- * Tabler v1.0.0-beta (https://tabler.io)
3
- * @version 1.0.0-beta
2
+ * Tabler v1.0.0-beta5 (https://tabler.io)
3
+ * @version 1.0.0-beta5
4
4
  * @link https://tabler.io
5
5
  * Copyright 2018-2021 The Tabler Authors
6
6
  * Copyright 2018-2021 codecalm.net Paweł Kuna
7
7
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
8
8
  */
9
- .apexcharts-title-text {
10
- font-weight: 600 !important; }
11
-
12
- .apexcharts-tooltip-title {
13
- font-weight: 600 !important;
14
- padding-bottom: .25rem !important; }
15
-
16
- .apexcharts-gridline,
17
- .apexcharts-ycrosshairs,
18
- .apexcharts-xaxis-tick {
19
- stroke: #e6e8e9 !important; }
20
-
21
- .apexcharts-tooltip {
22
- line-height: 1;
23
- color: #ffffff;
24
- background: #232e3c !important;
25
- border: 0 !important;
26
- border-radius: 3px !important; }
27
-
28
- .apexcharts-tooltip-title {
29
- margin: 0 !important;
30
- background: transparent !important;
31
- border: 0 !important; }
32
-
33
- .apexcharts-tooltip-series-group {
34
- padding: 0 8px !important; }
35
-
36
- .apexcharts-tooltip-marker {
37
- width: .5rem;
38
- height: .5rem; }
39
-
40
- .apexcharts-gridline,
41
- .apexcharts-ycrosshairs,
42
- .apexcharts-xaxis-tick {
43
- stroke: #e7eaef; }
44
-
45
- .apexcharts-yaxis-label,
46
- .apexcharts-xaxis-label {
47
- fill: #656d77; }
48
-
49
- /*! nouislider - 14.6.3 - 11/19/2020 */
50
9
  /* Functional styling;
51
10
  * These styles are required for noUiSlider to function.
52
11
  * You don't need to change these rules to apply your design.
@@ -85,20 +44,14 @@
85
44
  z-index: 1;
86
45
  top: 0;
87
46
  right: 0;
47
+ height: 100%;
48
+ width: 100%;
88
49
  -ms-transform-origin: 0 0;
89
50
  -webkit-transform-origin: 0 0;
90
51
  -webkit-transform-style: preserve-3d;
91
52
  transform-origin: 0 0;
92
53
  transform-style: flat; }
93
54
 
94
- .noUi-connect {
95
- height: 100%;
96
- width: 100%; }
97
-
98
- .noUi-origin {
99
- height: 10%;
100
- width: 10%; }
101
-
102
55
  /* Offset direction
103
56
  */
104
57
  .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
@@ -109,6 +62,7 @@
109
62
  * connect elements.
110
63
  */
111
64
  .noUi-vertical .noUi-origin {
65
+ top: -100%;
112
66
  width: 0; }
113
67
 
114
68
  .noUi-horizontal .noUi-origin {
@@ -148,7 +102,7 @@
148
102
  width: 28px;
149
103
  height: 34px;
150
104
  right: -6px;
151
- top: -17px; }
105
+ bottom: -17px; }
152
106
 
153
107
  .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
154
108
  left: -17px;
@@ -356,13 +310,13 @@
356
310
  padding: .5rem 0; }
357
311
 
358
312
  .noUi-base {
359
- background: rgba(169, 174, 182, 0.24);
313
+ background: var(--tblr-border-color-light);
360
314
  border-radius: 1rem; }
361
315
 
362
316
  .noUi-handle {
363
317
  width: 1rem;
364
318
  height: 1rem;
365
- border: 2px solid #ffffff;
319
+ border: 2px solid var(--tblr-border-color-light);
366
320
  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
367
321
  border-radius: 1rem;
368
322
  background: currentColor;
@@ -376,20 +330,23 @@
376
330
  right: -0.5rem;
377
331
  margin: 1px 1px 0 0; }
378
332
  .noUi-handle.noUi-active, .noUi-handle:focus {
379
- box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
333
+ box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
380
334
 
381
335
  .noUi-connect {
382
336
  background: currentColor; }
383
337
 
384
338
  .litepicker {
385
- --litepicker-month-weekday-color: #656d77;
386
- --litepicker-button-prev-month-color: #656d77;
387
- --litepicker-button-next-month-color: #656d77;
339
+ --litepicker-month-weekday-color: #626976;
340
+ --litepicker-button-prev-month-color: #626976;
341
+ --litepicker-button-next-month-color: #626976;
388
342
  --litepicker-button-prev-month-color-hover: #206bc4;
389
343
  --litepicker-button-next-month-color-hover: #206bc4;
344
+ --litepicker-day-color: var(--tblr-body-color);
390
345
  --litepicker-day-color-hover: #206bc4;
391
346
  --litepicker-is-end-color-bg: #206bc4;
392
347
  --litepicker-is-today-color: #206bc4;
348
+ --litepicker-month-header-color: var(--tblr-body-color);
349
+ --litepicker-container-months-color-bg: var(--tblr-card-bg);
393
350
  font: inherit;
394
351
  -webkit-user-select: none;
395
352
  -moz-user-select: none;
@@ -398,7 +355,7 @@
398
355
  .litepicker svg {
399
356
  fill: none !important; }
400
357
  .litepicker .container__months {
401
- border: 1px solid rgba(101, 109, 119, 0.16);
358
+ border: 1px solid var(--tblr-border-color);
402
359
  border-radius: 4px;
403
360
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
404
361
  .litepicker .container__months .month-item-name,
@@ -413,360 +370,496 @@
413
370
  .litepicker .container__days .day-item {
414
371
  cursor: pointer !important;
415
372
  padding: .5rem 0 !important;
416
- transition: .3s color, .3s background-color, .3s border-color; }
373
+ transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
374
+ @media (prefers-reduced-motion: reduce) {
375
+ .litepicker .container__days .day-item {
376
+ transition: none; } }
417
377
  .datepicker-inline .litepicker .container__months {
418
378
  box-shadow: none; }
419
379
 
420
- /*===============================
421
- = Choices =
422
- ===============================*/
423
- .choices {
424
- position: relative;
425
- margin-bottom: 24px;
426
- font-size: 16px; }
427
-
428
- .choices:focus {
429
- outline: none; }
380
+ /**
381
+ * Tom Select bootstrap 5
382
+ */
383
+ /**
384
+ * tom-select.css (v//@@version)
385
+ * Copyright (c) contributors
386
+ *
387
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
388
+ * file except in compliance with the License. You may obtain a copy of the License at:
389
+ * http://www.apache.org/licenses/LICENSE-2.0
390
+ *
391
+ * Unless required by applicable law or agreed to in writing, software distributed under
392
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
393
+ * ANY KIND, either express or implied. See the License for the specific language
394
+ * governing permissions and limitations under the License.
395
+ *
396
+ */
397
+ .ts-control.plugin-drag_drop.multi > .ts-input > div.ui-sortable-placeholder {
398
+ visibility: visible !important;
399
+ background: #f2f2f2 !important;
400
+ background: rgba(0, 0, 0, 0.06) !important;
401
+ border: 0 none !important;
402
+ box-shadow: inset 0 0 12px 4px #fff; }
430
403
 
431
- .choices:last-child {
432
- margin-bottom: 0; }
404
+ .ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
405
+ content: '!';
406
+ visibility: hidden; }
433
407
 
434
- .choices.is-disabled .choices__inner,
435
- .choices.is-disabled .choices__input {
436
- background-color: #eaeaea;
437
- cursor: not-allowed;
438
- -webkit-user-select: none;
439
- -ms-user-select: none;
440
- -moz-user-select: none;
441
- user-select: none; }
408
+ .ts-control.plugin-drag_drop .ui-sortable-helper {
409
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
442
410
 
443
- .choices.is-disabled .choices__item {
444
- cursor: not-allowed; }
411
+ .plugin-checkbox_options .option input {
412
+ margin-right: 0.5rem; }
445
413
 
446
- .choices [hidden] {
447
- display: none !important; }
414
+ .plugin-clear_button .items {
415
+ padding-right: calc( 1em + (3 * 5px)) !important; }
448
416
 
449
- .choices[data-type*='select-one'] {
417
+ .plugin-clear_button .clear-button {
418
+ opacity: 0;
419
+ position: absolute;
420
+ top: 0.4375rem;
421
+ right: calc(0.75rem - 5px);
422
+ margin-right: 0 !important;
423
+ background: transparent !important;
424
+ transition: opacity 0.5s;
450
425
  cursor: pointer; }
451
426
 
452
- .choices[data-type*='select-one'] .choices__inner {
453
- padding-bottom: 7.5px; }
427
+ .plugin-clear_button.single .clear-button {
428
+ right: calc(0.75rem - 5px + 2rem); }
454
429
 
455
- .choices[data-type*='select-one'] .choices__input {
456
- display: block;
457
- width: 100%;
458
- padding: 10px;
459
- border-bottom: 1px solid #dddddd;
460
- background-color: #ffffff;
461
- margin: 0; }
462
-
463
- .choices[data-type*='select-one'] .choices__button {
464
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
465
- padding: 0;
466
- background-size: 8px;
467
- position: absolute;
468
- top: 50%;
469
- right: 0;
470
- margin-top: -10px;
471
- margin-right: 25px;
472
- height: 20px;
473
- width: 20px;
474
- border-radius: 10em;
475
- opacity: 0.5; }
476
-
477
- .choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
430
+ .plugin-clear_button .has-items.focus .clear-button,
431
+ .plugin-clear_button:hover .has-items .clear-button {
478
432
  opacity: 1; }
479
433
 
480
- .choices[data-type*='select-one'] .choices__button:focus {
481
- box-shadow: 0px 0px 0px 2px #00bcd4; }
482
-
483
- .choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
484
- display: none; }
434
+ .ts-control .dropdown-header {
435
+ position: relative;
436
+ padding: 6px 0.75rem;
437
+ border-bottom: 1px solid #d0d0d0;
438
+ background: #f8f8f8;
439
+ border-radius: 4px 4px 0 0; }
485
440
 
486
- .choices[data-type*='select-one']:after {
487
- content: '';
488
- height: 0;
489
- width: 0;
490
- border-style: solid;
491
- border-color: #333333 transparent transparent transparent;
492
- border-width: 5px;
441
+ .ts-control .dropdown-header-close {
493
442
  position: absolute;
494
- right: 11.5px;
443
+ right: 0.75rem;
495
444
  top: 50%;
496
- margin-top: -2.5px;
497
- pointer-events: none; }
498
-
499
- .choices[data-type*='select-one'].is-open:after {
500
- border-color: transparent transparent #333333 transparent;
501
- margin-top: -7.5px; }
445
+ color: #1e293b;
446
+ opacity: 0.4;
447
+ margin-top: -12px;
448
+ line-height: 20px;
449
+ font-size: 20px !important; }
502
450
 
503
- .choices[data-type*='select-one'][dir='rtl']:after {
504
- left: 11.5px;
505
- right: auto; }
506
-
507
- .choices[data-type*='select-one'][dir='rtl'] .choices__button {
508
- right: auto;
509
- left: 0;
510
- margin-left: 25px;
511
- margin-right: 0; }
451
+ .ts-control .dropdown-header-close:hover {
452
+ color: black; }
512
453
 
513
- .choices[data-type*='select-multiple'] .choices__inner,
514
- .choices[data-type*='text'] .choices__inner {
515
- cursor: text; }
516
-
517
- .choices[data-type*='select-multiple'] .choices__button,
518
- .choices[data-type*='text'] .choices__button {
519
- position: relative;
520
- display: inline-block;
521
- margin-top: 0;
522
- margin-right: -4px;
523
- margin-bottom: 0;
524
- margin-left: 8px;
525
- padding-left: 16px;
526
- border-left: 1px solid #008fa1;
527
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
528
- background-size: 8px;
529
- width: 8px;
530
- line-height: 1;
531
- opacity: 0.75;
532
- border-radius: 0; }
533
-
534
- .choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
535
- .choices[data-type*='text'] .choices__button:hover,
536
- .choices[data-type*='text'] .choices__button:focus {
537
- opacity: 1; }
454
+ .plugin-dropdown_input .ts-input.focus {
455
+ box-shadow: none;
456
+ border: 1px solid #d9dbde; }
538
457
 
539
- .choices__inner {
540
- display: inline-block;
541
- vertical-align: top;
458
+ .plugin-dropdown_input .dropdown-input {
459
+ border: 1px solid #d0d0d0;
460
+ border-width: 0 0 1px 0;
461
+ display: block;
462
+ padding: 0.4375rem 0.75rem;
463
+ box-shadow: none;
542
464
  width: 100%;
543
- background-color: #f9f9f9;
544
- padding: 7.5px 7.5px 3.75px;
545
- border: 1px solid #dddddd;
546
- border-radius: 2.5px;
547
- font-size: 14px;
548
- min-height: 44px;
549
- overflow: hidden; }
550
-
551
- .is-focused .choices__inner,
552
- .is-open .choices__inner {
553
- border-color: #b7b7b7; }
554
-
555
- .is-open .choices__inner {
556
- border-radius: 2.5px 2.5px 0 0; }
557
-
558
- .is-flipped.is-open .choices__inner {
559
- border-radius: 0 0 2.5px 2.5px; }
560
-
561
- .choices__list {
562
- margin: 0;
563
- padding-left: 0;
564
- list-style: none; }
565
-
566
- .choices__list--single {
567
- display: inline-block;
568
- padding: 4px 16px 4px 4px;
569
- width: 100%; }
570
-
571
- [dir='rtl'] .choices__list--single {
572
- padding-right: 4px;
573
- padding-left: 16px; }
465
+ background: transparent; }
466
+
467
+ .plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
468
+ border-color: #90b5e2;
469
+ outline: 0;
470
+ box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
471
+
472
+ .ts-control.plugin-input_autogrow .ts-input.has-items > input {
473
+ min-width: 0; }
474
+
475
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input {
476
+ flex: none;
477
+ min-width: 4px; }
478
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-webkit-input-placeholder {
479
+ color: transparent; }
480
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-moz-placeholder {
481
+ color: transparent; }
482
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input:-ms-input-placeholder {
483
+ color: transparent; }
484
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-ms-input-placeholder {
485
+ color: transparent; }
486
+ .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::placeholder {
487
+ color: transparent; }
488
+
489
+ .ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
490
+ display: flex; }
491
+
492
+ .ts-dropdown.plugin-optgroup_columns .optgroup {
493
+ border-right: 1px solid #f2f2f2;
494
+ border-top: 0 none;
495
+ flex-grow: 1;
496
+ flex-basis: 0;
497
+ min-width: 0; }
498
+
499
+ .ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
500
+ border-right: 0 none; }
501
+
502
+ .ts-dropdown.plugin-optgroup_columns .optgroup:before {
503
+ display: none; }
574
504
 
575
- .choices__list--single .choices__item {
576
- width: 100%; }
505
+ .ts-dropdown.plugin-optgroup_columns .optgroup-header {
506
+ border-top: 0 none; }
577
507
 
578
- .choices__list--multiple {
579
- display: inline; }
508
+ .ts-control.plugin-remove_button .item {
509
+ display: inline-flex;
510
+ align-items: center;
511
+ padding-right: 0 !important; }
580
512
 
581
- .choices__list--multiple .choices__item {
582
- display: inline-block;
513
+ .ts-control.plugin-remove_button .item .remove {
514
+ color: inherit;
515
+ text-decoration: none;
583
516
  vertical-align: middle;
584
- border-radius: 20px;
585
- padding: 4px 10px;
586
- font-size: 12px;
587
- font-weight: 500;
588
- margin-right: 3.75px;
589
- margin-bottom: 3.75px;
590
- background-color: #00bcd4;
591
- border: 1px solid #00a5bb;
592
- color: #ffffff;
593
- word-break: break-all;
594
- box-sizing: border-box; }
517
+ display: inline-block;
518
+ padding: 1px 5px;
519
+ border-left: 1px solid #e6e7e9;
520
+ border-radius: 0 2px 2px 0;
521
+ box-sizing: border-box;
522
+ margin-left: 5px; }
595
523
 
596
- .choices__list--multiple .choices__item[data-deletable] {
597
- padding-right: 5px; }
524
+ .ts-control.plugin-remove_button .item .remove:hover {
525
+ background: rgba(0, 0, 0, 0.05); }
598
526
 
599
- [dir='rtl'] .choices__list--multiple .choices__item {
600
- margin-right: 0;
601
- margin-left: 3.75px; }
527
+ .ts-control.plugin-remove_button .item.active .remove {
528
+ border-left-color: rgba(0, 0, 0, 0); }
602
529
 
603
- .choices__list--multiple .choices__item.is-highlighted {
604
- background-color: #00a5bb;
605
- border: 1px solid #008fa1; }
530
+ .ts-control.plugin-remove_button .disabled .item .remove:hover {
531
+ background: none; }
606
532
 
607
- .is-disabled .choices__list--multiple .choices__item {
608
- background-color: #aaaaaa;
609
- border: 1px solid #919191; }
533
+ .ts-control.plugin-remove_button .disabled .item .remove {
534
+ border-left-color: white; }
610
535
 
611
- .choices__list--dropdown {
612
- visibility: hidden;
613
- z-index: 1;
536
+ .ts-control.plugin-remove_button .remove-single {
614
537
  position: absolute;
615
- width: 100%;
616
- background-color: #ffffff;
617
- border: 1px solid #dddddd;
618
- top: 100%;
619
- margin-top: -1px;
620
- border-bottom-left-radius: 2.5px;
621
- border-bottom-right-radius: 2.5px;
622
- overflow: hidden;
623
- word-break: break-all;
624
- will-change: visibility; }
625
-
626
- .choices__list--dropdown.is-active {
627
- visibility: visible; }
538
+ right: 0;
539
+ top: 0;
540
+ font-size: 23px; }
628
541
 
629
- .is-open .choices__list--dropdown {
630
- border-color: #b7b7b7; }
542
+ .ts-control {
543
+ position: relative; }
631
544
 
632
- .is-flipped .choices__list--dropdown {
633
- top: auto;
634
- bottom: 100%;
635
- margin-top: 0;
636
- margin-bottom: -1px;
637
- border-radius: 0.25rem 0.25rem 0 0; }
545
+ .ts-dropdown,
546
+ .ts-input,
547
+ .ts-input input {
548
+ color: #1e293b;
549
+ font-family: inherit;
550
+ font-size: inherit;
551
+ line-height: 1.4285714;
552
+ font-smoothing: inherit; }
638
553
 
639
- .choices__list--dropdown .choices__list {
640
- position: relative;
641
- max-height: 300px;
642
- overflow: auto;
643
- -webkit-overflow-scrolling: touch;
644
- will-change: scroll-position; }
554
+ .ts-input,
555
+ .ts-control.single .ts-input.input-active {
556
+ background: #ffffff;
557
+ cursor: text; }
645
558
 
646
- .choices__list--dropdown .choices__item {
559
+ .ts-input {
560
+ border: 1px solid #d9dbde;
561
+ padding: 0.4375rem 0.75rem;
562
+ width: 100%;
563
+ overflow: hidden;
647
564
  position: relative;
648
- padding: 10px;
649
- font-size: 14px; }
650
-
651
- [dir='rtl'] .choices__list--dropdown .choices__item {
652
- text-align: right; }
653
-
654
- @media (min-width: 640px) {
655
- .choices__list--dropdown .choices__item--selectable {
656
- padding-right: 100px; }
657
- .choices__list--dropdown .choices__item--selectable:after {
658
- content: attr(data-select-text);
659
- font-size: 12px;
565
+ z-index: 1;
566
+ box-sizing: border-box;
567
+ box-shadow: none;
568
+ border-radius: 4px;
569
+ display: flex;
570
+ flex-wrap: wrap; }
571
+ .ts-control.multi .ts-input.has-items {
572
+ padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px); }
573
+ .ts-input.full {
574
+ background-color: #ffffff; }
575
+ .ts-input.disabled,
576
+ .ts-input.disabled * {
577
+ cursor: default !important; }
578
+ .ts-input.focus {
579
+ box-shadow: none; }
580
+ .ts-input > * {
581
+ vertical-align: baseline;
582
+ display: inline-block; }
583
+ .ts-control.multi .ts-input > div {
584
+ cursor: pointer;
585
+ margin: 0 3px 3px 0;
586
+ padding: 1px 5px;
587
+ background: #efefef;
588
+ color: #1e293b;
589
+ border: 0px solid #e6e7e9; }
590
+ .ts-control.multi .ts-input > div.active {
591
+ background: #206bc4;
592
+ color: #fff;
593
+ border: 0px solid rgba(0, 0, 0, 0); }
594
+ .ts-control.multi .ts-input.disabled > div, .ts-control.multi .ts-input.disabled > div.active {
595
+ color: #797979;
596
+ background: white;
597
+ border: 0px solid white; }
598
+ .ts-input > input {
599
+ flex: 1 1 auto;
600
+ min-width: 7rem;
601
+ display: inline-block !important;
602
+ padding: 0 !important;
603
+ min-height: 0 !important;
604
+ max-height: none !important;
605
+ max-width: 100% !important;
606
+ margin: 0 !important;
607
+ text-indent: 0 !important;
608
+ border: 0 none !important;
609
+ background: none !important;
610
+ line-height: inherit !important;
611
+ -webkit-user-select: auto !important;
612
+ -moz-user-select: auto !important;
613
+ -ms-user-select: auto !important;
614
+ user-select: auto !important;
615
+ box-shadow: none !important; }
616
+ .ts-input > input::-ms-clear {
617
+ display: none; }
618
+ .ts-input > input:focus {
619
+ outline: none !important; }
620
+ .ts-input.has-items > input {
621
+ margin: 0 4px !important; }
622
+ .ts-input.dropdown-active::before {
623
+ content: ' ';
624
+ display: block;
625
+ position: absolute;
626
+ background: white;
627
+ height: 1px;
628
+ bottom: 0;
629
+ left: 0;
630
+ right: 0; }
631
+ .ts-input.rtl {
632
+ text-align: right; }
633
+ .ts-input.rtl.single .ts-input:after {
634
+ left: calc(0.75rem + 5px);
635
+ right: auto; }
636
+ .ts-input.rtl .ts-input > input {
637
+ margin: 0 4px 0 -2px !important; }
638
+ .ts-input.disabled {
639
+ opacity: 0.5;
640
+ background-color: #f1f5f9; }
641
+ .input-hidden .ts-input > input {
660
642
  opacity: 0;
661
643
  position: absolute;
662
- right: 10px;
663
- top: 50%;
664
- transform: translateY(-50%); }
665
- [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
666
- text-align: right;
667
- padding-left: 100px;
668
- padding-right: 10px; }
669
- [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
670
- right: auto;
671
- left: 10px; } }
672
-
673
- .choices__list--dropdown .choices__item--selectable.is-highlighted {
674
- background-color: #f2f2f2; }
675
-
676
- .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
677
- opacity: 0.5; }
678
-
679
- .choices__item {
680
- cursor: default; }
681
-
682
- .choices__item--selectable {
683
- cursor: pointer; }
644
+ left: -10000px; }
684
645
 
685
- .choices__item--disabled {
686
- cursor: not-allowed;
687
- -webkit-user-select: none;
688
- -ms-user-select: none;
689
- -moz-user-select: none;
690
- user-select: none;
691
- opacity: 0.5; }
692
-
693
- .choices__heading {
694
- font-weight: 600;
695
- font-size: 12px;
696
- padding: 10px;
697
- border-bottom: 1px solid #f7f7f7;
698
- color: gray; }
699
-
700
- .choices__button {
701
- text-indent: -9999px;
702
- -webkit-appearance: none;
703
- -moz-appearance: none;
704
- appearance: none;
705
- border: 0;
706
- background-color: transparent;
707
- background-repeat: no-repeat;
708
- background-position: center;
709
- cursor: pointer; }
646
+ .ts-dropdown {
647
+ position: absolute;
648
+ top: 100%;
649
+ left: 0;
650
+ width: 100%;
651
+ z-index: 10;
652
+ border: 1px solid #d0d0d0;
653
+ background: #ffffff;
654
+ margin: 0.25rem 0 0 0;
655
+ border-top: 0 none;
656
+ box-sizing: border-box;
657
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
658
+ border-radius: 0 0 4px 4px; }
659
+ .ts-dropdown [data-selectable] {
660
+ cursor: pointer;
661
+ overflow: hidden; }
662
+ .ts-dropdown [data-selectable] .highlight {
663
+ background: rgba(255, 237, 40, 0.4);
664
+ border-radius: 1px; }
665
+ .ts-dropdown .option,
666
+ .ts-dropdown .optgroup-header,
667
+ .ts-dropdown .no-results,
668
+ .ts-dropdown .create {
669
+ padding: 3px 0.75rem; }
670
+ .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
671
+ cursor: inherit;
672
+ opacity: 0.5; }
673
+ .ts-dropdown [data-selectable].option {
674
+ opacity: 1;
675
+ cursor: pointer; }
676
+ .ts-dropdown .optgroup:first-child .optgroup-header {
677
+ border-top: 0 none; }
678
+ .ts-dropdown .optgroup-header {
679
+ color: #475569;
680
+ background: #ffffff;
681
+ cursor: default; }
682
+ .ts-dropdown .create:hover,
683
+ .ts-dropdown .option:hover,
684
+ .ts-dropdown .active {
685
+ background-color: rgba(98, 105, 118, 0.06);
686
+ color: inherit; }
687
+ .ts-dropdown .create:hover.create,
688
+ .ts-dropdown .option:hover.create,
689
+ .ts-dropdown .active.create {
690
+ color: inherit; }
691
+ .ts-dropdown .create {
692
+ color: rgba(30, 41, 59, 0.5); }
693
+ .ts-dropdown .spinner {
694
+ display: inline-block;
695
+ width: 30px;
696
+ height: 30px;
697
+ margin: 3px 0.75rem; }
698
+ .ts-dropdown .spinner:after {
699
+ content: " ";
700
+ display: block;
701
+ width: 24px;
702
+ height: 24px;
703
+ margin: 3px;
704
+ border-radius: 50%;
705
+ border: 5px solid #d0d0d0;
706
+ border-color: #d0d0d0 transparent #d0d0d0 transparent;
707
+ -webkit-animation: lds-dual-ring 1.2s linear infinite;
708
+ animation: lds-dual-ring 1.2s linear infinite; }
709
+
710
+ @-webkit-keyframes lds-dual-ring {
711
+ 0% {
712
+ transform: rotate(0deg); }
713
+ 100% {
714
+ transform: rotate(360deg); } }
715
+
716
+ @keyframes lds-dual-ring {
717
+ 0% {
718
+ transform: rotate(0deg); }
719
+ 100% {
720
+ transform: rotate(360deg); } }
721
+
722
+ .ts-dropdown-content {
723
+ overflow-y: auto;
724
+ overflow-x: hidden;
725
+ max-height: 200px;
726
+ overflow-scrolling: touch;
727
+ scroll-behavior: smooth; }
728
+
729
+ .ts-wrapper.form-control,
730
+ .ts-wrapper.form-select {
731
+ padding: 0 !important; }
732
+
733
+ .ts-dropdown,
734
+ .ts-dropdown.form-control,
735
+ .ts-dropdown.form-select {
736
+ height: auto;
737
+ padding: 0;
738
+ z-index: 1000;
739
+ background: #ffffff;
740
+ border: 1px solid rgba(98, 105, 118, 0.16);
741
+ border-radius: 4px;
742
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
710
743
 
711
- .choices__button:focus {
712
- outline: none; }
744
+ .ts-dropdown .optgroup-header {
745
+ font-size: 0.765625rem;
746
+ line-height: 1.4285714; }
713
747
 
714
- .choices__input {
715
- display: inline-block;
716
- vertical-align: baseline;
717
- background-color: #f9f9f9;
718
- font-size: 14px;
719
- margin-bottom: 5px;
720
- border: 0;
721
- border-radius: 0;
722
- max-width: 100%;
723
- padding: 4px 0 4px 2px; }
748
+ .ts-dropdown .optgroup:first-child:before {
749
+ display: none; }
724
750
 
725
- .choices__input:focus {
726
- outline: 0; }
751
+ .ts-dropdown .optgroup:before {
752
+ content: ' ';
753
+ display: block;
754
+ height: 0;
755
+ margin: 0.5rem 0;
756
+ overflow: hidden;
757
+ border-top: 1px solid rgba(98, 105, 118, 0.16);
758
+ margin-left: -0.75rem;
759
+ margin-right: -0.75rem; }
760
+
761
+ .ts-dropdown .create {
762
+ padding-left: 0.75rem; }
763
+
764
+ .ts-dropdown-content {
765
+ padding: 5px 0; }
766
+
767
+ .ts-input {
768
+ min-height: calc(1.4285714em + 0.875rem + 2px);
769
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
770
+ display: flex;
771
+ align-items: center; }
772
+ @media (prefers-reduced-motion: reduce) {
773
+ .ts-input {
774
+ transition: none; } }
775
+ .ts-input.dropdown -active {
776
+ border-radius: 4px; }
777
+ .ts-input.dropdown-active::before {
778
+ display: none; }
779
+ .ts-input.focus {
780
+ border-color: #90b5e2;
781
+ outline: 0;
782
+ box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
783
+ .ts-input .item {
784
+ display: flex;
785
+ align-items: center; }
786
+
787
+ .is-invalid .ts-input,
788
+ .was-validated .ts-input.invalid {
789
+ border-color: #d63939; }
790
+ .is-invalid .ts-input.focus,
791
+ .was-validated .ts-input.invalid.focus {
792
+ border-color: #b62626;
793
+ box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
794
+
795
+ .is-valid .ts-input {
796
+ border-color: #2fb344; }
797
+ .is-valid .ts-input.focus {
798
+ border-color: #2fb344;
799
+ box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
800
+
801
+ .input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
802
+ min-height: calc(1.4285714em + 0.25rem + 2px);
803
+ padding: 0 .75rem;
804
+ border-radius: 2px;
805
+ font-size: 0.75rem; }
806
+
807
+ .input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
808
+ min-height: calc(1.4285714em + 0.25rem + 2px) !important;
809
+ font-size: 0.75rem;
810
+ padding-bottom: 0; }
811
+
812
+ .input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
813
+ padding-top: calc( (calc(1.4285714em + 0.25rem + 2px) - (1.4285714 * 0.75rem) - 4px)/2) !important; }
814
+
815
+ .ts-control.multi .ts-input.has-items {
816
+ padding-left: calc(0.75rem - 5px);
817
+ padding-right: calc(0.75rem - 5px); }
818
+
819
+ .ts-control.multi .ts-input > div {
820
+ border-radius: calc(4px - 1px); }
821
+
822
+ .input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
823
+ min-height: calc(1.4285714em + 1rem + 2px);
824
+ border-radius: 8px;
825
+ font-size: 1.25rem; }
826
+
827
+ .ts-control:not(.form-select) {
828
+ padding: 0;
829
+ border: none;
830
+ height: auto;
831
+ box-shadow: none;
832
+ background: none; }
833
+ .ts-control:not(.form-select).single .ts-input {
834
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9dbde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
835
+ background-repeat: no-repeat;
836
+ background-position: right 0.75rem center;
837
+ background-size: 16px 12px;
838
+ padding-right: 2rem; }
839
+
840
+ .ts-control.form-select {
841
+ padding: 0;
842
+ height: auto;
843
+ box-shadow: none; }
844
+ .ts-control.form-select .ts-input,
845
+ .ts-control.form-select.single .ts-input.input-active {
846
+ border: none !important;
847
+ background: transparent !important; }
727
848
 
728
- [dir='rtl'] .choices__input {
729
- padding-right: 2px;
730
- padding-left: 0; }
849
+ .input-group > .ts-control {
850
+ flex-grow: 1; }
731
851
 
732
- .choices__placeholder {
733
- opacity: 0.5; }
852
+ .input-group > .ts-control:not(:nth-child(2)) > .ts-input {
853
+ border-top-left-radius: 0;
854
+ border-bottom-left-radius: 0; }
734
855
 
735
- /*===== End of Choices ======*/
736
- .choices {
737
- margin: 0;
738
- font-size: inherit;
739
- position: relative;
740
- cursor: pointer; }
741
- .choices:focus {
742
- outline: none; }
743
- .choices:after {
744
- content: none !important; }
745
- .choices.is-focused .form-select {
746
- border-color: #90b5e2;
747
- box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
748
- .choices .dropdown-menu {
749
- width: 100%;
750
- height: auto; }
751
- .choices .dropdown-menu .choices__list {
752
- max-height: 13rem;
753
- overflow-x: hidden; }
754
- .choices .dropdown-menu .dropdown-item {
755
- padding-left: 0.75rem;
756
- padding-right: 0.75rem; }
757
- .choices .dropdown-menu .dropdown-item.active {
758
- background: transparent;
759
- color: inherit; }
760
- .choices .dropdown-menu .dropdown-item.is-highlighted {
761
- color: #206bc4;
762
- background-color: rgba(32, 107, 196, 0.06); }
763
-
764
- .choices__placeholder {
765
- color: #a7abb1;
766
- opacity: 1; }
856
+ .input-group > .ts-control:not(:last-child) > .ts-input {
857
+ border-top-right-radius: 0;
858
+ border-bottom-right-radius: 0; }
767
859
 
768
- .choices__list--single {
769
- padding: 0; }
860
+ .ts-input {
861
+ color: inherit; }
770
862
 
771
- .choices__list--dropdown .choices__item--selectable:after {
772
- content: none; }
863
+ .ts-control .dropdown-menu {
864
+ width: 100%;
865
+ height: auto; }