@tabler/core 1.0.0-beta4 → 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 (76) hide show
  1. package/README.md +6 -0
  2. package/dist/css/demo.css +57 -25
  3. package/dist/css/demo.min.css +3 -3
  4. package/dist/css/demo.rtl.css +57 -25
  5. package/dist/css/demo.rtl.min.css +3 -3
  6. package/dist/css/tabler-flags.css +3 -3
  7. package/dist/css/tabler-flags.min.css +3 -3
  8. package/dist/css/tabler-flags.rtl.css +3 -3
  9. package/dist/css/tabler-flags.rtl.min.css +3 -3
  10. package/dist/css/tabler-payments.css +2 -2
  11. package/dist/css/tabler-payments.min.css +2 -2
  12. package/dist/css/tabler-payments.rtl.css +2 -2
  13. package/dist/css/tabler-payments.rtl.min.css +2 -2
  14. package/dist/css/tabler-vendors.css +459 -320
  15. package/dist/css/tabler-vendors.min.css +3 -3
  16. package/dist/css/tabler-vendors.rtl.css +459 -320
  17. package/dist/css/tabler-vendors.rtl.min.css +3 -3
  18. package/dist/css/tabler.css +1283 -1091
  19. package/dist/css/tabler.min.css +8 -3
  20. package/dist/css/tabler.rtl.css +1283 -1091
  21. package/dist/css/tabler.rtl.min.css +8 -3
  22. package/dist/js/demo.js +151 -0
  23. package/dist/js/demo.min.js +9 -0
  24. package/dist/js/tabler.esm.js +7791 -0
  25. package/dist/js/tabler.esm.min.js +9 -0
  26. package/dist/js/tabler.js +19 -21
  27. package/dist/js/tabler.min.js +3 -3
  28. package/dist/libs/litepicker/dist/litepicker.js +3 -3
  29. package/dist/libs/tom-select/dist/js/tom-select.base.min.js +300 -0
  30. package/package.json +60 -5
  31. package/src/js/demo.js +98 -0
  32. package/src/js/src/dropdown.js +0 -31
  33. package/src/js/tabler.esm.js +10 -0
  34. package/src/js/tabler.js +3 -0
  35. package/src/scss/_core.scss +1 -1
  36. package/src/scss/_utilities.scss +12 -2
  37. package/src/scss/_variables.scss +76 -53
  38. package/src/scss/demo/_examples.scss +10 -1
  39. package/src/scss/demo.scss +31 -2
  40. package/src/scss/layout/_core.scss +23 -5
  41. package/src/scss/layout/_dark.scss +168 -0
  42. package/src/scss/layout/_navbar.scss +5 -5
  43. package/src/scss/mixins/_functions.scss +0 -4
  44. package/src/scss/mixins/_mixins.scss +18 -29
  45. package/src/scss/tabler-vendors.scss +2 -1
  46. package/src/scss/ui/_accordion.scss +1 -0
  47. package/src/scss/ui/_alerts.scss +1 -1
  48. package/src/scss/ui/_avatars.scss +6 -5
  49. package/src/scss/ui/_buttons.scss +27 -33
  50. package/src/scss/ui/_calendars.scss +1 -1
  51. package/src/scss/ui/_cards.scss +7 -8
  52. package/src/scss/ui/_flags.scss +1 -1
  53. package/src/scss/ui/_forms.scss +9 -10
  54. package/src/scss/ui/_legend.scss +1 -1
  55. package/src/scss/ui/_lists.scss +2 -2
  56. package/src/scss/ui/_modals.scss +1 -1
  57. package/src/scss/ui/_nav.scss +3 -3
  58. package/src/scss/ui/_offcanvas.scss +20 -2
  59. package/src/scss/ui/_progress.scss +2 -1
  60. package/src/scss/ui/_ribbons.scss +1 -1
  61. package/src/scss/ui/_steps.scss +1 -1
  62. package/src/scss/ui/_switch-icon.scss +5 -5
  63. package/src/scss/ui/_tables.scss +4 -2
  64. package/src/scss/ui/forms/_form-check.scss +1 -1
  65. package/src/scss/ui/forms/_form-colorinput.scss +1 -1
  66. package/src/scss/ui/forms/_form-imagecheck.scss +5 -5
  67. package/src/scss/ui/forms/_form-selectgroup.scss +9 -3
  68. package/src/scss/ui/forms/_validation.scss +1 -1
  69. package/src/scss/utils/_background.scss +2 -2
  70. package/src/scss/utils/_colors.scss +24 -12
  71. package/src/scss/vendor/_apexcharts.scss +2 -0
  72. package/src/scss/vendor/_litepicker.scss +5 -2
  73. package/src/scss/vendor/_tom-select.scss +12 -0
  74. package/dist/libs/choices.js/public/assets/scripts/choices.js +0 -5603
  75. package/src/scss/_dark.scss +0 -105
  76. package/src/scss/vendor/_choices.scss +0 -61
@@ -1,6 +1,6 @@
1
1
  /*!
2
- * Tabler v1.0.0-beta4 (https://tabler.io)
3
- * @version 1.0.0-beta4
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
@@ -310,13 +310,13 @@
310
310
  padding: .5rem 0; }
311
311
 
312
312
  .noUi-base {
313
- background: rgba(169, 174, 182, 0.24);
313
+ background: var(--tblr-border-color-light);
314
314
  border-radius: 1rem; }
315
315
 
316
316
  .noUi-handle {
317
317
  width: 1rem;
318
318
  height: 1rem;
319
- border: 2px solid #ffffff;
319
+ border: 2px solid var(--tblr-border-color-light);
320
320
  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
321
321
  border-radius: 1rem;
322
322
  background: currentColor;
@@ -330,20 +330,23 @@
330
330
  right: -0.5rem;
331
331
  margin: 1px 1px 0 0; }
332
332
  .noUi-handle.noUi-active, .noUi-handle:focus {
333
- 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); }
334
334
 
335
335
  .noUi-connect {
336
336
  background: currentColor; }
337
337
 
338
338
  .litepicker {
339
- --litepicker-month-weekday-color: #656d77;
340
- --litepicker-button-prev-month-color: #656d77;
341
- --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;
342
342
  --litepicker-button-prev-month-color-hover: #206bc4;
343
343
  --litepicker-button-next-month-color-hover: #206bc4;
344
+ --litepicker-day-color: var(--tblr-body-color);
344
345
  --litepicker-day-color-hover: #206bc4;
345
346
  --litepicker-is-end-color-bg: #206bc4;
346
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);
347
350
  font: inherit;
348
351
  -webkit-user-select: none;
349
352
  -moz-user-select: none;
@@ -352,7 +355,7 @@
352
355
  .litepicker svg {
353
356
  fill: none !important; }
354
357
  .litepicker .container__months {
355
- border: 1px solid rgba(101, 109, 119, 0.16);
358
+ border: 1px solid var(--tblr-border-color);
356
359
  border-radius: 4px;
357
360
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
358
361
  .litepicker .container__months .month-item-name,
@@ -367,360 +370,496 @@
367
370
  .litepicker .container__days .day-item {
368
371
  cursor: pointer !important;
369
372
  padding: .5rem 0 !important;
370
- 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; } }
371
377
  .datepicker-inline .litepicker .container__months {
372
378
  box-shadow: none; }
373
379
 
374
- /*===============================
375
- = Choices =
376
- ===============================*/
377
- .choices {
378
- position: relative;
379
- margin-bottom: 24px;
380
- font-size: 16px; }
381
-
382
- .choices:focus {
383
- 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; }
384
403
 
385
- .choices:last-child {
386
- margin-bottom: 0; }
404
+ .ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
405
+ content: '!';
406
+ visibility: hidden; }
387
407
 
388
- .choices.is-disabled .choices__inner,
389
- .choices.is-disabled .choices__input {
390
- background-color: #eaeaea;
391
- cursor: not-allowed;
392
- -webkit-user-select: none;
393
- -ms-user-select: none;
394
- -moz-user-select: none;
395
- user-select: none; }
408
+ .ts-control.plugin-drag_drop .ui-sortable-helper {
409
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
396
410
 
397
- .choices.is-disabled .choices__item {
398
- cursor: not-allowed; }
411
+ .plugin-checkbox_options .option input {
412
+ margin-right: 0.5rem; }
399
413
 
400
- .choices [hidden] {
401
- display: none !important; }
414
+ .plugin-clear_button .items {
415
+ padding-right: calc( 1em + (3 * 5px)) !important; }
402
416
 
403
- .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;
404
425
  cursor: pointer; }
405
426
 
406
- .choices[data-type*='select-one'] .choices__inner {
407
- padding-bottom: 7.5px; }
427
+ .plugin-clear_button.single .clear-button {
428
+ right: calc(0.75rem - 5px + 2rem); }
408
429
 
409
- .choices[data-type*='select-one'] .choices__input {
410
- display: block;
411
- width: 100%;
412
- padding: 10px;
413
- border-bottom: 1px solid #dddddd;
414
- background-color: #ffffff;
415
- margin: 0; }
416
-
417
- .choices[data-type*='select-one'] .choices__button {
418
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
419
- padding: 0;
420
- background-size: 8px;
421
- position: absolute;
422
- top: 50%;
423
- right: 0;
424
- margin-top: -10px;
425
- margin-right: 25px;
426
- height: 20px;
427
- width: 20px;
428
- border-radius: 10em;
429
- opacity: 0.5; }
430
-
431
- .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 {
432
432
  opacity: 1; }
433
433
 
434
- .choices[data-type*='select-one'] .choices__button:focus {
435
- box-shadow: 0px 0px 0px 2px #00bcd4; }
436
-
437
- .choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
438
- 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; }
439
440
 
440
- .choices[data-type*='select-one']:after {
441
- content: '';
442
- height: 0;
443
- width: 0;
444
- border-style: solid;
445
- border-color: #333333 transparent transparent transparent;
446
- border-width: 5px;
441
+ .ts-control .dropdown-header-close {
447
442
  position: absolute;
448
- right: 11.5px;
443
+ right: 0.75rem;
449
444
  top: 50%;
450
- margin-top: -2.5px;
451
- pointer-events: none; }
452
-
453
- .choices[data-type*='select-one'].is-open:after {
454
- border-color: transparent transparent #333333 transparent;
455
- margin-top: -7.5px; }
445
+ color: #1e293b;
446
+ opacity: 0.4;
447
+ margin-top: -12px;
448
+ line-height: 20px;
449
+ font-size: 20px !important; }
456
450
 
457
- .choices[data-type*='select-one'][dir='rtl']:after {
458
- left: 11.5px;
459
- right: auto; }
460
-
461
- .choices[data-type*='select-one'][dir='rtl'] .choices__button {
462
- right: auto;
463
- left: 0;
464
- margin-left: 25px;
465
- margin-right: 0; }
451
+ .ts-control .dropdown-header-close:hover {
452
+ color: black; }
466
453
 
467
- .choices[data-type*='select-multiple'] .choices__inner,
468
- .choices[data-type*='text'] .choices__inner {
469
- cursor: text; }
470
-
471
- .choices[data-type*='select-multiple'] .choices__button,
472
- .choices[data-type*='text'] .choices__button {
473
- position: relative;
474
- display: inline-block;
475
- margin-top: 0;
476
- margin-right: -4px;
477
- margin-bottom: 0;
478
- margin-left: 8px;
479
- padding-left: 16px;
480
- border-left: 1px solid #008fa1;
481
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
482
- background-size: 8px;
483
- width: 8px;
484
- line-height: 1;
485
- opacity: 0.75;
486
- border-radius: 0; }
487
-
488
- .choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
489
- .choices[data-type*='text'] .choices__button:hover,
490
- .choices[data-type*='text'] .choices__button:focus {
491
- opacity: 1; }
454
+ .plugin-dropdown_input .ts-input.focus {
455
+ box-shadow: none;
456
+ border: 1px solid #d9dbde; }
492
457
 
493
- .choices__inner {
494
- display: inline-block;
495
- 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;
496
464
  width: 100%;
497
- background-color: #f9f9f9;
498
- padding: 7.5px 7.5px 3.75px;
499
- border: 1px solid #dddddd;
500
- border-radius: 2.5px;
501
- font-size: 14px;
502
- min-height: 44px;
503
- overflow: hidden; }
504
-
505
- .is-focused .choices__inner,
506
- .is-open .choices__inner {
507
- border-color: #b7b7b7; }
508
-
509
- .is-open .choices__inner {
510
- border-radius: 2.5px 2.5px 0 0; }
511
-
512
- .is-flipped.is-open .choices__inner {
513
- border-radius: 0 0 2.5px 2.5px; }
514
-
515
- .choices__list {
516
- margin: 0;
517
- padding-left: 0;
518
- list-style: none; }
519
-
520
- .choices__list--single {
521
- display: inline-block;
522
- padding: 4px 16px 4px 4px;
523
- width: 100%; }
524
-
525
- [dir='rtl'] .choices__list--single {
526
- padding-right: 4px;
527
- 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; }
528
504
 
529
- .choices__list--single .choices__item {
530
- width: 100%; }
505
+ .ts-dropdown.plugin-optgroup_columns .optgroup-header {
506
+ border-top: 0 none; }
531
507
 
532
- .choices__list--multiple {
533
- display: inline; }
508
+ .ts-control.plugin-remove_button .item {
509
+ display: inline-flex;
510
+ align-items: center;
511
+ padding-right: 0 !important; }
534
512
 
535
- .choices__list--multiple .choices__item {
536
- display: inline-block;
513
+ .ts-control.plugin-remove_button .item .remove {
514
+ color: inherit;
515
+ text-decoration: none;
537
516
  vertical-align: middle;
538
- border-radius: 20px;
539
- padding: 4px 10px;
540
- font-size: 12px;
541
- font-weight: 500;
542
- margin-right: 3.75px;
543
- margin-bottom: 3.75px;
544
- background-color: #00bcd4;
545
- border: 1px solid #00a5bb;
546
- color: #ffffff;
547
- word-break: break-all;
548
- 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; }
549
523
 
550
- .choices__list--multiple .choices__item[data-deletable] {
551
- padding-right: 5px; }
524
+ .ts-control.plugin-remove_button .item .remove:hover {
525
+ background: rgba(0, 0, 0, 0.05); }
552
526
 
553
- [dir='rtl'] .choices__list--multiple .choices__item {
554
- margin-right: 0;
555
- margin-left: 3.75px; }
527
+ .ts-control.plugin-remove_button .item.active .remove {
528
+ border-left-color: rgba(0, 0, 0, 0); }
556
529
 
557
- .choices__list--multiple .choices__item.is-highlighted {
558
- background-color: #00a5bb;
559
- border: 1px solid #008fa1; }
530
+ .ts-control.plugin-remove_button .disabled .item .remove:hover {
531
+ background: none; }
560
532
 
561
- .is-disabled .choices__list--multiple .choices__item {
562
- background-color: #aaaaaa;
563
- border: 1px solid #919191; }
533
+ .ts-control.plugin-remove_button .disabled .item .remove {
534
+ border-left-color: white; }
564
535
 
565
- .choices__list--dropdown {
566
- visibility: hidden;
567
- z-index: 1;
536
+ .ts-control.plugin-remove_button .remove-single {
568
537
  position: absolute;
569
- width: 100%;
570
- background-color: #ffffff;
571
- border: 1px solid #dddddd;
572
- top: 100%;
573
- margin-top: -1px;
574
- border-bottom-left-radius: 2.5px;
575
- border-bottom-right-radius: 2.5px;
576
- overflow: hidden;
577
- word-break: break-all;
578
- will-change: visibility; }
579
-
580
- .choices__list--dropdown.is-active {
581
- visibility: visible; }
538
+ right: 0;
539
+ top: 0;
540
+ font-size: 23px; }
582
541
 
583
- .is-open .choices__list--dropdown {
584
- border-color: #b7b7b7; }
542
+ .ts-control {
543
+ position: relative; }
585
544
 
586
- .is-flipped .choices__list--dropdown {
587
- top: auto;
588
- bottom: 100%;
589
- margin-top: 0;
590
- margin-bottom: -1px;
591
- 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; }
592
553
 
593
- .choices__list--dropdown .choices__list {
594
- position: relative;
595
- max-height: 300px;
596
- overflow: auto;
597
- -webkit-overflow-scrolling: touch;
598
- will-change: scroll-position; }
554
+ .ts-input,
555
+ .ts-control.single .ts-input.input-active {
556
+ background: #ffffff;
557
+ cursor: text; }
599
558
 
600
- .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;
601
564
  position: relative;
602
- padding: 10px;
603
- font-size: 14px; }
604
-
605
- [dir='rtl'] .choices__list--dropdown .choices__item {
606
- text-align: right; }
607
-
608
- @media (min-width: 640px) {
609
- .choices__list--dropdown .choices__item--selectable {
610
- padding-right: 100px; }
611
- .choices__list--dropdown .choices__item--selectable:after {
612
- content: attr(data-select-text);
613
- 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 {
614
642
  opacity: 0;
615
643
  position: absolute;
616
- right: 10px;
617
- top: 50%;
618
- transform: translateY(-50%); }
619
- [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
620
- text-align: right;
621
- padding-left: 100px;
622
- padding-right: 10px; }
623
- [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
624
- right: auto;
625
- left: 10px; } }
626
-
627
- .choices__list--dropdown .choices__item--selectable.is-highlighted {
628
- background-color: #f2f2f2; }
629
-
630
- .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
631
- opacity: 0.5; }
632
-
633
- .choices__item {
634
- cursor: default; }
635
-
636
- .choices__item--selectable {
637
- cursor: pointer; }
644
+ left: -10000px; }
638
645
 
639
- .choices__item--disabled {
640
- cursor: not-allowed;
641
- -webkit-user-select: none;
642
- -ms-user-select: none;
643
- -moz-user-select: none;
644
- user-select: none;
645
- opacity: 0.5; }
646
-
647
- .choices__heading {
648
- font-weight: 600;
649
- font-size: 12px;
650
- padding: 10px;
651
- border-bottom: 1px solid #f7f7f7;
652
- color: gray; }
653
-
654
- .choices__button {
655
- text-indent: -9999px;
656
- -webkit-appearance: none;
657
- -moz-appearance: none;
658
- appearance: none;
659
- border: 0;
660
- background-color: transparent;
661
- background-repeat: no-repeat;
662
- background-position: center;
663
- 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); }
664
743
 
665
- .choices__button:focus {
666
- outline: none; }
744
+ .ts-dropdown .optgroup-header {
745
+ font-size: 0.765625rem;
746
+ line-height: 1.4285714; }
667
747
 
668
- .choices__input {
669
- display: inline-block;
670
- vertical-align: baseline;
671
- background-color: #f9f9f9;
672
- font-size: 14px;
673
- margin-bottom: 5px;
674
- border: 0;
675
- border-radius: 0;
676
- max-width: 100%;
677
- padding: 4px 0 4px 2px; }
748
+ .ts-dropdown .optgroup:first-child:before {
749
+ display: none; }
678
750
 
679
- .choices__input:focus {
680
- 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; }
681
848
 
682
- [dir='rtl'] .choices__input {
683
- padding-right: 2px;
684
- padding-left: 0; }
849
+ .input-group > .ts-control {
850
+ flex-grow: 1; }
685
851
 
686
- .choices__placeholder {
687
- 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; }
688
855
 
689
- /*===== End of Choices ======*/
690
- .choices {
691
- margin: 0;
692
- font-size: inherit;
693
- position: relative;
694
- cursor: pointer; }
695
- .choices:focus {
696
- outline: none; }
697
- .choices:after {
698
- content: none !important; }
699
- .choices.is-focused .form-select {
700
- border-color: #90b5e2;
701
- box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
702
- .choices .dropdown-menu {
703
- width: 100%;
704
- height: auto; }
705
- .choices .dropdown-menu .choices__list {
706
- max-height: 13rem;
707
- overflow-x: hidden; }
708
- .choices .dropdown-menu .dropdown-item {
709
- padding-left: 0.75rem;
710
- padding-right: 0.75rem; }
711
- .choices .dropdown-menu .dropdown-item.active {
712
- background: transparent;
713
- color: inherit; }
714
- .choices .dropdown-menu .dropdown-item.is-highlighted {
715
- color: #206bc4;
716
- background-color: rgba(32, 107, 196, 0.06); }
717
-
718
- .choices__placeholder {
719
- color: #a7abb1;
720
- opacity: 1; }
856
+ .input-group > .ts-control:not(:last-child) > .ts-input {
857
+ border-top-right-radius: 0;
858
+ border-bottom-right-radius: 0; }
721
859
 
722
- .choices__list--single {
723
- padding: 0; }
860
+ .ts-input {
861
+ color: inherit; }
724
862
 
725
- .choices__list--dropdown .choices__item--selectable:after {
726
- content: none; }
863
+ .ts-control .dropdown-menu {
864
+ width: 100%;
865
+ height: auto; }