@nurihaus/web-design-system 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +386 -406
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -439,25 +439,22 @@ p {
|
|
|
439
439
|
height: -moz-fit-content;
|
|
440
440
|
height: fit-content;
|
|
441
441
|
overflow: hidden;
|
|
442
|
-
|
|
443
|
-
|
|
442
|
+
}
|
|
443
|
+
.base-avatar.avatar-image {
|
|
444
444
|
width: 100%;
|
|
445
445
|
height: 100%;
|
|
446
446
|
-o-object-fit: cover;
|
|
447
447
|
object-fit: cover;
|
|
448
448
|
}
|
|
449
|
-
|
|
450
|
-
& .avatar-fallback {
|
|
449
|
+
.base-avatar .avatar-fallback {
|
|
451
450
|
display: block;
|
|
452
451
|
width: 100%;
|
|
453
452
|
height: 100%;
|
|
454
|
-
|
|
455
|
-
|
|
453
|
+
}
|
|
454
|
+
:is(.base-avatar .avatar-fallback) svg {
|
|
456
455
|
width: 100%;
|
|
457
456
|
height: 100%;
|
|
458
457
|
}
|
|
459
|
-
}
|
|
460
|
-
}
|
|
461
458
|
/***************************************************************************************************
|
|
462
459
|
* *
|
|
463
460
|
* avatar *
|
|
@@ -467,90 +464,43 @@ p {
|
|
|
467
464
|
display: flex;
|
|
468
465
|
align-items: center;
|
|
469
466
|
justify-content: center;
|
|
470
|
-
|
|
471
|
-
|
|
467
|
+
}
|
|
468
|
+
.avatar.size-xl {
|
|
472
469
|
width: 124px;
|
|
473
470
|
height: 124px;
|
|
474
471
|
border: 1px solid #e4e4e7;
|
|
475
|
-
|
|
476
|
-
|
|
472
|
+
}
|
|
473
|
+
.avatar.size-xl.badge-option {
|
|
477
474
|
width: 48px;
|
|
478
475
|
height: 48px;
|
|
479
|
-
width: 30px;
|
|
480
|
-
height: 30px;
|
|
481
|
-
width: 24px;
|
|
482
|
-
height: 24px;
|
|
483
|
-
width: 18px;
|
|
484
|
-
height: 18px;
|
|
485
476
|
}
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
font-size: var(--font-size-lg);
|
|
489
|
-
line-height: var(--line-height-lg);
|
|
490
|
-
font-weight: var(--font-weight-bold)
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
&.size-l {
|
|
477
|
+
.avatar.size-l {
|
|
494
478
|
width: 74px;
|
|
495
479
|
height: 74px;
|
|
496
480
|
border: 1px solid #e4e4e7;
|
|
497
|
-
height: 48px;
|
|
498
|
-
|
|
499
|
-
font-size: var(--font-size-sm);
|
|
500
|
-
line-height: var(--line-height-sm);
|
|
501
|
-
font-weight: var(--font-weight-semibold);
|
|
502
|
-
height: 54px;
|
|
503
|
-
|
|
504
|
-
font-size: var(--font-size-base);
|
|
505
|
-
line-height: var(--line-height-base);
|
|
506
|
-
font-weight: var(--font-weight-bold);
|
|
507
|
-
width: 24px;
|
|
508
|
-
height: 24px;
|
|
509
|
-
height: 50px;
|
|
510
|
-
width: 500px;
|
|
511
|
-
height: 50px
|
|
512
481
|
}
|
|
513
|
-
|
|
514
|
-
|
|
482
|
+
.avatar.size-l.badge-option {
|
|
483
|
+
width: 30px;
|
|
484
|
+
height: 30px;
|
|
485
|
+
}
|
|
486
|
+
.avatar.size-m {
|
|
515
487
|
width: 58px;
|
|
516
488
|
height: 58px;
|
|
517
489
|
border: 1px solid #e4e4e7;
|
|
518
|
-
height: 40px;
|
|
519
|
-
|
|
520
|
-
font-size: var(--font-size-sm);
|
|
521
|
-
line-height: var(--line-height-sm);
|
|
522
|
-
font-weight: var(--font-weight-semibold);
|
|
523
|
-
height: 50px;
|
|
524
|
-
|
|
525
|
-
font-size: var(--font-size-sm);
|
|
526
|
-
line-height: var(--line-height-sm);
|
|
527
|
-
font-weight: var(--font-weight-semibold);
|
|
528
|
-
width: 20px;
|
|
529
|
-
height: 20px;
|
|
530
|
-
height: 40px;
|
|
531
|
-
width: 450px;
|
|
532
|
-
height: 40px
|
|
533
490
|
}
|
|
534
|
-
|
|
535
|
-
|
|
491
|
+
.avatar.size-m.badge-option {
|
|
492
|
+
width: 24px;
|
|
493
|
+
height: 24px;
|
|
494
|
+
}
|
|
495
|
+
.avatar.size-s {
|
|
536
496
|
width: 40px;
|
|
537
497
|
height: 40px;
|
|
538
498
|
border: 1px solid #e4e4e7;
|
|
539
|
-
height: 32px;
|
|
540
|
-
|
|
541
|
-
font-size: var(--font-size-sm);
|
|
542
|
-
line-height: var(--line-height-sm);
|
|
543
|
-
font-weight: var(--font-weight-bold);
|
|
544
|
-
height: 40px;
|
|
545
|
-
|
|
546
|
-
font-size: var(--font-size-xsm);
|
|
547
|
-
line-height: var(--line-height-xsm);
|
|
548
|
-
font-weight: var(--font-weight-semibold);
|
|
549
|
-
width: 18px;
|
|
550
|
-
height: 18px;
|
|
551
|
-
width: 400px
|
|
552
499
|
}
|
|
553
|
-
|
|
500
|
+
.avatar.size-s.badge-option {
|
|
501
|
+
width: 18px;
|
|
502
|
+
height: 18px;
|
|
503
|
+
}
|
|
554
504
|
.base-badge {
|
|
555
505
|
position: relative;
|
|
556
506
|
display: flex;
|
|
@@ -561,36 +511,49 @@ p {
|
|
|
561
511
|
background-color: attr(data-backgroundColor color, transparent);
|
|
562
512
|
color: attr(data-textColor color, transparent);
|
|
563
513
|
border: attr(data-borderColor color, transparent);
|
|
514
|
+
}
|
|
515
|
+
.base-badge.size-l {
|
|
516
|
+
height: 48px;
|
|
564
517
|
|
|
565
|
-
|
|
566
|
-
height:
|
|
518
|
+
font-size: var(--font-size-sm);
|
|
519
|
+
line-height: var(--line-height-sm);
|
|
520
|
+
font-weight: var(--font-weight-semibold);
|
|
521
|
+
}
|
|
522
|
+
.base-badge.size-m {
|
|
523
|
+
height: 40px;
|
|
567
524
|
|
|
568
525
|
font-size: var(--font-size-sm);
|
|
569
526
|
line-height: var(--line-height-sm);
|
|
570
527
|
font-weight: var(--font-weight-semibold);
|
|
571
|
-
|
|
528
|
+
}
|
|
529
|
+
.base-badge.size-r {
|
|
530
|
+
height: 36px;
|
|
572
531
|
|
|
573
532
|
font-size: var(--font-size-sm);
|
|
574
533
|
line-height: var(--line-height-sm);
|
|
575
534
|
font-weight: var(--font-weight-semibold);
|
|
576
535
|
}
|
|
536
|
+
.base-badge.size-s {
|
|
537
|
+
height: 32px;
|
|
577
538
|
|
|
578
|
-
|
|
539
|
+
font-size: var(--font-size-sm);
|
|
540
|
+
line-height: var(--line-height-sm);
|
|
541
|
+
font-weight: var(--font-weight-bold);
|
|
542
|
+
}
|
|
543
|
+
.base-badge.size-sm {
|
|
579
544
|
height: 28px;
|
|
580
545
|
|
|
581
546
|
font-size: var(--font-size-xsm);
|
|
582
547
|
line-height: var(--line-height-xsm);
|
|
583
548
|
font-weight: var(--font-weight-bold);
|
|
584
549
|
}
|
|
585
|
-
|
|
586
|
-
&.icon-text-option {
|
|
550
|
+
.base-badge.icon-text-option {
|
|
587
551
|
display: flex;
|
|
588
552
|
align-items: center;
|
|
589
553
|
justify-content: space-between;
|
|
590
554
|
|
|
591
555
|
padding: 0 20px;
|
|
592
556
|
}
|
|
593
|
-
}
|
|
594
557
|
/***************************************************************************************************
|
|
595
558
|
* *
|
|
596
559
|
* option-badge *
|
|
@@ -629,13 +592,12 @@ p {
|
|
|
629
592
|
justify-content: space-between;
|
|
630
593
|
|
|
631
594
|
padding: 0 20px;
|
|
632
|
-
|
|
633
|
-
> span {
|
|
595
|
+
}
|
|
596
|
+
.icon-text-option > span {
|
|
634
597
|
display: flex;
|
|
635
598
|
align-items: center;
|
|
636
599
|
gap: 4px;
|
|
637
600
|
}
|
|
638
|
-
}
|
|
639
601
|
.base-button {
|
|
640
602
|
display: flex;
|
|
641
603
|
justify-content: center;
|
|
@@ -644,12 +606,11 @@ p {
|
|
|
644
606
|
border-radius: 6px;
|
|
645
607
|
border: none;
|
|
646
608
|
cursor: pointer;
|
|
647
|
-
|
|
648
|
-
|
|
609
|
+
}
|
|
610
|
+
.base-button:focus-visible {
|
|
649
611
|
outline: none;
|
|
650
612
|
box-shadow: none;
|
|
651
613
|
}
|
|
652
|
-
}
|
|
653
614
|
/***************************************************************************************************
|
|
654
615
|
* *
|
|
655
616
|
* cta-button *
|
|
@@ -657,84 +618,113 @@ p {
|
|
|
657
618
|
***************************************************************************************************/
|
|
658
619
|
.cta-button {
|
|
659
620
|
border-radius: 6px;
|
|
660
|
-
|
|
661
|
-
|
|
621
|
+
}
|
|
622
|
+
.cta-button.variant-primary {
|
|
662
623
|
background-color: var(--color-purple-900);
|
|
663
624
|
border: 1px solid var(--color-purple-900);
|
|
664
625
|
color: var(--color-white);
|
|
665
|
-
|
|
666
|
-
|
|
626
|
+
}
|
|
627
|
+
.cta-button.variant-primary:not(:disabled):hover {
|
|
667
628
|
background-color: var(--color-purple-900);
|
|
668
629
|
border-color: var(--color-purple-900);
|
|
669
630
|
color: var(--color-white);
|
|
631
|
+
}
|
|
632
|
+
.cta-button.variant-secondary {
|
|
633
|
+
background-color: var(--color-purple-50);
|
|
634
|
+
color: var(--color-purple-900);
|
|
635
|
+
}
|
|
636
|
+
.cta-button.variant-secondary:not(:disabled):hover {
|
|
670
637
|
background-color: var(--color-purple-100);
|
|
671
638
|
border-color: var(--color-purple-100);
|
|
672
639
|
color: var(--color-purple-900);
|
|
640
|
+
}
|
|
641
|
+
.cta-button.variant-ghost {
|
|
642
|
+
background-color: var(--color-white);
|
|
643
|
+
border: 1px solid var(--color-grey-scale-300);
|
|
644
|
+
color: var(--color-purple-900);
|
|
645
|
+
}
|
|
646
|
+
.cta-button.variant-ghost:not(:disabled):hover {
|
|
673
647
|
background-color: var(--color-white);
|
|
674
648
|
border-color: var(--color-purple-900);
|
|
675
649
|
color: var(--color-purple-900);
|
|
650
|
+
}
|
|
651
|
+
.cta-button.variant-neutral {
|
|
652
|
+
background-color: var(--color-white);
|
|
653
|
+
color: var(--color-purple-900);
|
|
654
|
+
}
|
|
655
|
+
.cta-button.variant-neutral:not(:disabled):hover {
|
|
676
656
|
background-color: var(--color-grey-scale-100);
|
|
677
657
|
border: 1px solid var(--color-grey-scale-100);
|
|
678
658
|
color: var(--color-purple-900);
|
|
659
|
+
}
|
|
660
|
+
.cta-button.variant-confirm {
|
|
661
|
+
background-color: var(--color-accent-red-500);
|
|
662
|
+
border: 1px solid var(--color-accent-red-500);
|
|
663
|
+
color: var(--color-white);
|
|
664
|
+
}
|
|
665
|
+
.cta-button.variant-confirm:not(:disabled):hover {
|
|
679
666
|
background-color: var(--color-accent-red-700);
|
|
680
667
|
border-color: var(--color-accent-red-700);
|
|
681
668
|
color: var(--color-white);
|
|
682
669
|
}
|
|
670
|
+
.cta-button.variant-outlined {
|
|
671
|
+
background-color: var(--color-white);
|
|
672
|
+
border: 1px solid var(--color-accent-red-700);
|
|
673
|
+
color: var(--color-accent-red-700);
|
|
683
674
|
}
|
|
675
|
+
.cta-button.size-xl {
|
|
676
|
+
height: 60px;
|
|
684
677
|
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
678
|
+
font-size: var(--font-size-lg);
|
|
679
|
+
line-height: var(--line-height-lg);
|
|
680
|
+
font-weight: var(--font-weight-bold);
|
|
688
681
|
}
|
|
682
|
+
.cta-button.size-l {
|
|
683
|
+
height: 54px;
|
|
689
684
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
color: var(--color-purple-900)
|
|
685
|
+
font-size: var(--font-size-base);
|
|
686
|
+
line-height: var(--line-height-base);
|
|
687
|
+
font-weight: var(--font-weight-bold);
|
|
694
688
|
}
|
|
689
|
+
.cta-button.size-r {
|
|
690
|
+
height: 48px;
|
|
695
691
|
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
692
|
+
font-size: var(--font-size-sm);
|
|
693
|
+
line-height: var(--line-height-sm);
|
|
694
|
+
font-weight: var(--font-weight-semibold);
|
|
699
695
|
}
|
|
696
|
+
.cta-button.size-m {
|
|
697
|
+
height: 50px;
|
|
700
698
|
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
color: var(--color-white)
|
|
699
|
+
font-size: var(--font-size-sm);
|
|
700
|
+
line-height: var(--line-height-sm);
|
|
701
|
+
font-weight: var(--font-weight-semibold);
|
|
705
702
|
}
|
|
703
|
+
.cta-button.size-s {
|
|
704
|
+
height: 40px;
|
|
706
705
|
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
color: var(--color-accent-red-700);
|
|
706
|
+
font-size: var(--font-size-xsm);
|
|
707
|
+
line-height: var(--line-height-xsm);
|
|
708
|
+
font-weight: var(--font-weight-semibold);
|
|
711
709
|
}
|
|
712
|
-
|
|
713
|
-
&.size-xs {
|
|
710
|
+
.cta-button.size-xs {
|
|
714
711
|
height: 30px;
|
|
715
712
|
|
|
716
713
|
font-size: var(--font-size-xsm);
|
|
717
714
|
line-height: var(--line-height-xsm);
|
|
718
715
|
font-weight: var(--font-weight-semibold);
|
|
719
716
|
}
|
|
720
|
-
|
|
721
|
-
&:disabled {
|
|
717
|
+
.cta-button:disabled {
|
|
722
718
|
background-color: var(--color-grey-scale-200);
|
|
723
719
|
color: var(--color-white);
|
|
724
720
|
cursor: not-allowed;
|
|
725
721
|
border: none;
|
|
726
|
-
background-color: var(--color-grey-scale-100);
|
|
727
|
-
color: var(--color-grey-scale-400);
|
|
728
|
-
cursor: not-allowed;
|
|
729
722
|
}
|
|
730
|
-
|
|
731
|
-
.base-check-box {
|
|
732
|
-
&.label {
|
|
723
|
+
.base-check-box.label {
|
|
733
724
|
font-size: var(--font-size-sm);
|
|
734
725
|
font-weight: var(--font-weight-medium);
|
|
735
726
|
color: var(--color-black);
|
|
736
727
|
}
|
|
737
|
-
}
|
|
738
728
|
/***************************************************************************************************
|
|
739
729
|
* *
|
|
740
730
|
* check-box *
|
|
@@ -748,45 +738,48 @@ p {
|
|
|
748
738
|
background-color: transparent;
|
|
749
739
|
border: none;
|
|
750
740
|
}
|
|
751
|
-
.check-box-indicator {
|
|
752
|
-
&.wrapper {
|
|
741
|
+
.check-box-indicator.wrapper {
|
|
753
742
|
display: flex;
|
|
754
743
|
align-items: center;
|
|
755
744
|
justify-content: center;
|
|
756
745
|
border-radius: 4px;
|
|
757
746
|
border: 1.5px solid var(--color-purple-900);
|
|
758
747
|
}
|
|
748
|
+
.check-box-indicator {
|
|
759
749
|
|
|
760
750
|
width: 100%;
|
|
761
751
|
height: 100%;
|
|
762
|
-
|
|
763
|
-
|
|
752
|
+
}
|
|
753
|
+
.check-box-indicator.size-l {
|
|
754
|
+
width: 24px;
|
|
755
|
+
height: 24px;
|
|
756
|
+
}
|
|
757
|
+
.check-box-indicator.size-m {
|
|
758
|
+
width: 20px;
|
|
759
|
+
height: 20px;
|
|
760
|
+
}
|
|
761
|
+
.check-box-indicator.size-s {
|
|
762
|
+
width: 18px;
|
|
763
|
+
height: 18px;
|
|
764
|
+
}
|
|
765
|
+
.check-box-indicator[data-state='unchecked'] {
|
|
764
766
|
background-color: #fff;
|
|
765
767
|
}
|
|
766
|
-
|
|
767
|
-
&[data-state='checked'] {
|
|
768
|
+
.check-box-indicator[data-state='checked'] {
|
|
768
769
|
background-color: var(--color-purple-900);
|
|
769
770
|
}
|
|
770
|
-
|
|
771
|
-
&[data-disabled='true'] {
|
|
771
|
+
.check-box-indicator[data-disabled='true'] {
|
|
772
772
|
border: none;
|
|
773
773
|
border-radius: 4px;
|
|
774
774
|
background-color: var(--color-grey-scale-300);
|
|
775
775
|
}
|
|
776
|
-
|
|
777
|
-
.base-collapsible-menu {
|
|
778
|
-
&.trigger {
|
|
776
|
+
.base-collapsible-menu.trigger {
|
|
779
777
|
display: flex;
|
|
780
778
|
align-items: center;
|
|
781
779
|
justify-content: space-between;
|
|
782
780
|
gap: 10px;
|
|
783
781
|
width: 100%;
|
|
784
|
-
display: flex;
|
|
785
|
-
align-items: center;
|
|
786
|
-
justify-content: space-between;
|
|
787
|
-
gap: 10px;
|
|
788
782
|
}
|
|
789
|
-
}
|
|
790
783
|
/***************************************************************************************************
|
|
791
784
|
* *
|
|
792
785
|
* collapsible-menu *
|
|
@@ -797,10 +790,13 @@ p {
|
|
|
797
790
|
flex-direction: column;
|
|
798
791
|
gap: 4px;
|
|
799
792
|
}
|
|
800
|
-
.collapsible-menu.size-m {
|
|
801
|
-
.collapsible-menu-row {
|
|
793
|
+
.collapsible-menu.size-m .collapsible-menu-row {
|
|
802
794
|
height: 40px;
|
|
795
|
+
}
|
|
796
|
+
.collapsible-menu.size-l .collapsible-menu-row {
|
|
803
797
|
height: 48px;
|
|
798
|
+
}
|
|
799
|
+
.collapsible-menu-row {
|
|
804
800
|
all: unset;
|
|
805
801
|
box-sizing: border-box;
|
|
806
802
|
display: flex;
|
|
@@ -817,24 +813,19 @@ p {
|
|
|
817
813
|
line-height: var(--line-height-sm);
|
|
818
814
|
font-weight: var(--font-weight-medium);
|
|
819
815
|
color: var(--collapsible-menu-text-color, var(--color-grey-scale-700));
|
|
820
|
-
|
|
821
|
-
|
|
816
|
+
}
|
|
817
|
+
.collapsible-menu-row:hover {
|
|
822
818
|
background-color: var(--collapsible-menu-hover-bg-color, var(--color-grey-scale-100));
|
|
823
819
|
}
|
|
824
|
-
|
|
825
|
-
&.is-active {
|
|
820
|
+
.collapsible-menu-row.is-active {
|
|
826
821
|
background-color: var(--collapsible-menu-active-bg-color, var(--color-grey-scale-100));
|
|
827
822
|
color: var(--collapsible-menu-active-text-color, var(--color-purple-800));
|
|
828
823
|
font-weight: var(--collapsible-menu-active-font-weight, 600);
|
|
829
824
|
}
|
|
830
|
-
|
|
831
|
-
&:disabled,
|
|
832
|
-
&[aria-disabled='true'] {
|
|
825
|
+
.collapsible-menu-row:disabled,.collapsible-menu-row[aria-disabled='true'] {
|
|
833
826
|
cursor: not-allowed;
|
|
834
827
|
color: var(--collapsible-menu-disabled-text-color, var(--color-grey-scale-400));
|
|
835
828
|
}
|
|
836
|
-
}
|
|
837
|
-
}
|
|
838
829
|
.collapsible-menu-left {
|
|
839
830
|
display: inline-flex;
|
|
840
831
|
align-items: center;
|
|
@@ -860,11 +851,23 @@ p {
|
|
|
860
851
|
margin-top: 2px;
|
|
861
852
|
margin-bottom: 4px;
|
|
862
853
|
}
|
|
854
|
+
.base-drop-down.trigger {
|
|
855
|
+
display: flex;
|
|
856
|
+
align-items: center;
|
|
857
|
+
justify-content: space-between;
|
|
858
|
+
gap: 10px;
|
|
859
|
+
}
|
|
863
860
|
/***************************************************************************************************
|
|
864
861
|
* *
|
|
865
862
|
* drop-down-single *
|
|
866
863
|
* *
|
|
867
864
|
***************************************************************************************************/
|
|
865
|
+
.drop-down-single-trigger.size-m {
|
|
866
|
+
height: 40px;
|
|
867
|
+
}
|
|
868
|
+
.drop-down-single-trigger.size-l {
|
|
869
|
+
height: 50px;
|
|
870
|
+
}
|
|
868
871
|
.drop-down-single-trigger {
|
|
869
872
|
|
|
870
873
|
border: 1px solid var(--color-grey-scale-300);
|
|
@@ -873,47 +876,41 @@ p {
|
|
|
873
876
|
width: fit-content;
|
|
874
877
|
padding: 0 14px;
|
|
875
878
|
background-color: var(--color-white);
|
|
876
|
-
|
|
877
|
-
|
|
879
|
+
}
|
|
880
|
+
.drop-down-single-trigger:focus {
|
|
878
881
|
border-color: var(--color-purple-900);
|
|
879
882
|
}
|
|
880
|
-
|
|
881
|
-
&[data-placeholder] {
|
|
882
|
-
.drop-down-single-icon {
|
|
883
|
+
.drop-down-single-trigger[data-placeholder] .drop-down-single-icon {
|
|
883
884
|
color: var(--color-grey-scale-400);
|
|
884
|
-
color: var(--color-black);
|
|
885
885
|
}
|
|
886
|
-
|
|
887
|
-
svg {
|
|
886
|
+
.drop-down-single-trigger[data-placeholder] svg {
|
|
888
887
|
color: var(--color-grey-scale-400);
|
|
888
|
+
}
|
|
889
|
+
.drop-down-single-trigger:not([data-placeholder]) .drop-down-single-icon {
|
|
889
890
|
color: var(--color-black);
|
|
890
891
|
}
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
892
|
+
.drop-down-single-trigger:not([data-placeholder]) svg {
|
|
893
|
+
color: var(--color-black);
|
|
894
|
+
}
|
|
895
|
+
.drop-down-single-trigger[data-state='open'] .rotate {
|
|
895
896
|
transform: rotate(180deg);
|
|
896
897
|
transform-origin: 50% 50%;
|
|
897
898
|
transition: transform 160ms ease;
|
|
898
899
|
will-change: transform;
|
|
899
900
|
}
|
|
900
|
-
}
|
|
901
|
-
}
|
|
902
901
|
.drop-down-single-value {
|
|
903
902
|
font-size: var(--font-size-sm);
|
|
904
903
|
line-height: var(--line-height-sm);
|
|
905
904
|
font-weight: var(--font-weight-medium);
|
|
906
905
|
|
|
907
906
|
text-align: left;
|
|
908
|
-
|
|
909
|
-
|
|
907
|
+
}
|
|
908
|
+
.drop-down-single-value ::-moz-placeholder {
|
|
910
909
|
color: var(--color-grey-scale-400);
|
|
911
910
|
}
|
|
912
|
-
|
|
913
|
-
::placeholder {
|
|
911
|
+
.drop-down-single-value ::placeholder {
|
|
914
912
|
color: var(--color-grey-scale-400);
|
|
915
913
|
}
|
|
916
|
-
}
|
|
917
914
|
.drop-down-single-content {
|
|
918
915
|
z-index: 5;
|
|
919
916
|
min-width: var(--radix-select-trigger-width);
|
|
@@ -934,448 +931,434 @@ p {
|
|
|
934
931
|
font-weight: var(--font-weight-medium);
|
|
935
932
|
|
|
936
933
|
cursor: pointer;
|
|
937
|
-
|
|
938
|
-
|
|
934
|
+
}
|
|
935
|
+
.drop-down-single-item[data-highlighted] {
|
|
939
936
|
background-color: var(--color-purple-50);
|
|
940
937
|
outline: none;
|
|
941
938
|
}
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
939
|
+
.drop-down-single-item:disabled {
|
|
940
|
+
background-color: var(--color-grey-scale-100);
|
|
941
|
+
color: var(--color-grey-scale-400);
|
|
942
|
+
cursor: not-allowed;
|
|
943
|
+
}
|
|
944
|
+
.base-text:where(.xsm) {
|
|
945
945
|
font-size: var(--font-size-xsm);
|
|
946
946
|
line-height: var(--line-height-xsm);
|
|
947
947
|
}
|
|
948
|
-
|
|
948
|
+
.base-text:where(.sm) {
|
|
949
949
|
font-size: var(--font-size-sm);
|
|
950
950
|
line-height: var(--line-height-sm);
|
|
951
951
|
}
|
|
952
|
-
|
|
952
|
+
.base-text:where(.base) {
|
|
953
953
|
font-size: var(--font-size-base);
|
|
954
954
|
line-height: var(--line-height-base);
|
|
955
955
|
}
|
|
956
|
-
|
|
956
|
+
.base-text:where(.lg) {
|
|
957
957
|
font-size: var(--font-size-lg);
|
|
958
958
|
line-height: var(--line-height-lg);
|
|
959
959
|
}
|
|
960
|
-
|
|
960
|
+
.base-text:where(.xl) {
|
|
961
961
|
font-size: var(--font-size-xl);
|
|
962
962
|
line-height: var(--line-height-xl);
|
|
963
963
|
}
|
|
964
|
-
|
|
964
|
+
.base-text:where(.t-2xl) {
|
|
965
965
|
font-size: var(--font-size-2xl);
|
|
966
966
|
line-height: var(--line-height-2xl);
|
|
967
967
|
}
|
|
968
|
-
|
|
968
|
+
.base-text:where(.t-3xl) {
|
|
969
969
|
font-size: var(--font-size-3xl);
|
|
970
970
|
line-height: var(--line-height-3xl);
|
|
971
971
|
}
|
|
972
|
-
|
|
972
|
+
.base-text:where(.t-4xl) {
|
|
973
973
|
font-size: var(--font-size-4xl);
|
|
974
974
|
line-height: var(--line-height-4xl);
|
|
975
975
|
}
|
|
976
|
-
|
|
976
|
+
.base-text:where(.t-5xl) {
|
|
977
977
|
font-size: var(--font-size-5xl);
|
|
978
978
|
line-height: var(--line-height-5xl);
|
|
979
979
|
}
|
|
980
|
-
|
|
980
|
+
.base-text:where(.t-6xl) {
|
|
981
981
|
font-size: var(--font-size-6xl);
|
|
982
982
|
line-height: var(--line-height-6xl);
|
|
983
983
|
}
|
|
984
|
-
|
|
985
|
-
&:where(.regular) {
|
|
984
|
+
.base-text:where(.regular) {
|
|
986
985
|
font-weight: var(--font-weight-regular);
|
|
987
986
|
}
|
|
988
|
-
|
|
987
|
+
.base-text:where(.medium) {
|
|
989
988
|
font-weight: var(--font-weight-medium);
|
|
990
989
|
}
|
|
991
|
-
|
|
990
|
+
.base-text:where(.semibold) {
|
|
992
991
|
font-weight: var(--font-weight-semibold);
|
|
993
992
|
}
|
|
994
|
-
|
|
993
|
+
.base-text:where(.bold) {
|
|
995
994
|
font-weight: var(--font-weight-bold);
|
|
996
995
|
}
|
|
997
|
-
|
|
996
|
+
.base-text:where(.extrabold) {
|
|
998
997
|
font-weight: var(--font-weight-extrabold);
|
|
999
998
|
}
|
|
1000
|
-
|
|
1001
|
-
&[class*='textAlign-'] {
|
|
1002
|
-
&.textAlign-left {
|
|
999
|
+
.base-text.textAlign-left[class*='textAlign-'] {
|
|
1003
1000
|
text-align: left;
|
|
1004
1001
|
}
|
|
1005
|
-
|
|
1002
|
+
.base-text.textAlign-center[class*='textAlign-'] {
|
|
1006
1003
|
text-align: center;
|
|
1007
1004
|
}
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
&[class*='textDecoration-'] {
|
|
1011
|
-
&.textDecoration-underline {
|
|
1005
|
+
.base-text.textDecoration-underline[class*='textDecoration-'] {
|
|
1012
1006
|
text-decoration: underline;
|
|
1013
1007
|
}
|
|
1014
|
-
|
|
1008
|
+
.base-text.textDecoration-none[class*='textDecoration-'] {
|
|
1015
1009
|
text-decoration: none;
|
|
1016
1010
|
}
|
|
1017
|
-
|
|
1011
|
+
.base-text.textDecoration-lineThrough[class*='textDecoration-'] {
|
|
1018
1012
|
text-decoration: line-through;
|
|
1019
1013
|
}
|
|
1020
|
-
|
|
1014
|
+
.base-text.textDecoration-overline[class*='textDecoration-'] {
|
|
1021
1015
|
text-decoration: overline;
|
|
1022
1016
|
}
|
|
1023
|
-
|
|
1017
|
+
.base-text.textDecoration-blink[class*='textDecoration-'] {
|
|
1024
1018
|
text-decoration: blink;
|
|
1025
1019
|
}
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
&[class*='wordBreak-'] {
|
|
1029
|
-
&.wordBreak-normal {
|
|
1020
|
+
.base-text.wordBreak-normal[class*='wordBreak-'] {
|
|
1030
1021
|
word-break: normal;
|
|
1031
1022
|
}
|
|
1032
|
-
|
|
1023
|
+
.base-text.wordBreak-breakAll[class*='wordBreak-'] {
|
|
1033
1024
|
word-break: break-all;
|
|
1034
1025
|
}
|
|
1035
|
-
|
|
1026
|
+
.base-text.wordBreak-breakWord[class*='wordBreak-'] {
|
|
1036
1027
|
word-break: break-word;
|
|
1037
1028
|
}
|
|
1038
|
-
|
|
1029
|
+
.base-text.wordBreak-keepAll[class*='wordBreak-'] {
|
|
1039
1030
|
word-break: keep-all;
|
|
1040
1031
|
}
|
|
1041
|
-
|
|
1032
|
+
.base-text.wordBreak-keepWord[class*='wordBreak-'] {
|
|
1042
1033
|
word-break: keep-word;
|
|
1043
1034
|
}
|
|
1044
|
-
|
|
1035
|
+
.base-text.wordBreak-breakSpaces[class*='wordBreak-'] {
|
|
1045
1036
|
word-break: break-spaces;
|
|
1046
1037
|
}
|
|
1047
|
-
|
|
1038
|
+
.base-text.wordBreak-all[class*='wordBreak-'] {
|
|
1048
1039
|
word-break: all;
|
|
1049
1040
|
}
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
&[class*='whiteSpace-'] {
|
|
1053
|
-
&.whiteSpace-normal {
|
|
1041
|
+
.base-text.whiteSpace-normal[class*='whiteSpace-'] {
|
|
1054
1042
|
white-space: normal;
|
|
1055
1043
|
}
|
|
1056
|
-
|
|
1044
|
+
.base-text.whiteSpace-nowrap[class*='whiteSpace-'] {
|
|
1057
1045
|
white-space: nowrap;
|
|
1058
1046
|
}
|
|
1059
|
-
|
|
1047
|
+
.base-text.whiteSpace-pre[class*='whiteSpace-'] {
|
|
1060
1048
|
white-space: pre;
|
|
1061
1049
|
}
|
|
1062
|
-
|
|
1050
|
+
.base-text.whiteSpace-preLine[class*='whiteSpace-'] {
|
|
1063
1051
|
white-space: pre-line;
|
|
1064
1052
|
}
|
|
1065
|
-
|
|
1053
|
+
.base-text.whiteSpace-preWrap[class*='whiteSpace-'] {
|
|
1066
1054
|
white-space: pre-wrap;
|
|
1067
1055
|
}
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
&[class*='color-'] {
|
|
1071
|
-
&.color-black {
|
|
1056
|
+
.base-text.color-black[class*='color-'] {
|
|
1072
1057
|
color: var(--color-black);
|
|
1073
1058
|
}
|
|
1074
|
-
|
|
1059
|
+
.base-text.color-white[class*='color-'] {
|
|
1075
1060
|
color: var(--color-white);
|
|
1076
1061
|
}
|
|
1077
|
-
|
|
1062
|
+
.base-text.color-grey-scale-50[class*='color-'] {
|
|
1078
1063
|
color: var(--color-grey-scale-50);
|
|
1079
1064
|
}
|
|
1080
|
-
|
|
1065
|
+
.base-text.color-grey-scale-100[class*='color-'] {
|
|
1081
1066
|
color: var(--color-grey-scale-100);
|
|
1082
1067
|
}
|
|
1083
|
-
|
|
1068
|
+
.base-text.color-grey-scale-200[class*='color-'] {
|
|
1084
1069
|
color: var(--color-grey-scale-200);
|
|
1085
1070
|
}
|
|
1086
|
-
|
|
1071
|
+
.base-text.color-grey-scale-300[class*='color-'] {
|
|
1087
1072
|
color: var(--color-grey-scale-300);
|
|
1088
1073
|
}
|
|
1089
|
-
|
|
1074
|
+
.base-text.color-grey-scale-400[class*='color-'] {
|
|
1090
1075
|
color: var(--color-grey-scale-400);
|
|
1091
1076
|
}
|
|
1092
|
-
|
|
1077
|
+
.base-text.color-grey-scale-500[class*='color-'] {
|
|
1093
1078
|
color: var(--color-grey-scale-500);
|
|
1094
1079
|
}
|
|
1095
|
-
|
|
1080
|
+
.base-text.color-grey-scale-600[class*='color-'] {
|
|
1096
1081
|
color: var(--color-grey-scale-600);
|
|
1097
1082
|
}
|
|
1098
|
-
|
|
1083
|
+
.base-text.color-grey-scale-700[class*='color-'] {
|
|
1099
1084
|
color: var(--color-grey-scale-700);
|
|
1100
1085
|
}
|
|
1101
|
-
|
|
1086
|
+
.base-text.color-grey-scale-800[class*='color-'] {
|
|
1102
1087
|
color: var(--color-grey-scale-800);
|
|
1103
1088
|
}
|
|
1104
|
-
|
|
1089
|
+
.base-text.color-grey-scale-900[class*='color-'] {
|
|
1105
1090
|
color: var(--color-grey-scale-900);
|
|
1106
1091
|
}
|
|
1107
|
-
|
|
1092
|
+
.base-text.color-purple-50[class*='color-'] {
|
|
1108
1093
|
color: var(--color-purple-50);
|
|
1109
1094
|
}
|
|
1110
|
-
|
|
1095
|
+
.base-text.color-purple-100[class*='color-'] {
|
|
1111
1096
|
color: var(--color-purple-100);
|
|
1112
1097
|
}
|
|
1113
|
-
|
|
1098
|
+
.base-text.color-purple-200[class*='color-'] {
|
|
1114
1099
|
color: var(--color-purple-200);
|
|
1115
1100
|
}
|
|
1116
|
-
|
|
1101
|
+
.base-text.color-purple-300[class*='color-'] {
|
|
1117
1102
|
color: var(--color-purple-300);
|
|
1118
1103
|
}
|
|
1119
|
-
|
|
1104
|
+
.base-text.color-purple-400[class*='color-'] {
|
|
1120
1105
|
color: var(--color-purple-400);
|
|
1121
1106
|
}
|
|
1122
|
-
|
|
1107
|
+
.base-text.color-purple-500[class*='color-'] {
|
|
1123
1108
|
color: var(--color-purple-500);
|
|
1124
1109
|
}
|
|
1125
|
-
|
|
1110
|
+
.base-text.color-purple-600[class*='color-'] {
|
|
1126
1111
|
color: var(--color-purple-600);
|
|
1127
1112
|
}
|
|
1128
|
-
|
|
1113
|
+
.base-text.color-purple-700[class*='color-'] {
|
|
1129
1114
|
color: var(--color-purple-700);
|
|
1130
1115
|
}
|
|
1131
|
-
|
|
1116
|
+
.base-text.color-purple-800[class*='color-'] {
|
|
1132
1117
|
color: var(--color-purple-800);
|
|
1133
1118
|
}
|
|
1134
|
-
|
|
1119
|
+
.base-text.color-purple-900[class*='color-'] {
|
|
1135
1120
|
color: var(--color-purple-900);
|
|
1136
1121
|
}
|
|
1137
|
-
|
|
1122
|
+
.base-text.color-accent-red-50[class*='color-'] {
|
|
1138
1123
|
color: var(--color-accent-red-50);
|
|
1139
1124
|
}
|
|
1140
|
-
|
|
1125
|
+
.base-text.color-accent-red-100[class*='color-'] {
|
|
1141
1126
|
color: var(--color-accent-red-100);
|
|
1142
1127
|
}
|
|
1143
|
-
|
|
1128
|
+
.base-text.color-accent-red-200[class*='color-'] {
|
|
1144
1129
|
color: var(--color-accent-red-200);
|
|
1145
1130
|
}
|
|
1146
|
-
|
|
1131
|
+
.base-text.color-accent-red-300[class*='color-'] {
|
|
1147
1132
|
color: var(--color-accent-red-300);
|
|
1148
1133
|
}
|
|
1149
|
-
|
|
1134
|
+
.base-text.color-accent-red-400[class*='color-'] {
|
|
1150
1135
|
color: var(--color-accent-red-400);
|
|
1151
1136
|
}
|
|
1152
|
-
|
|
1137
|
+
.base-text.color-accent-red-500[class*='color-'] {
|
|
1153
1138
|
color: var(--color-accent-red-500);
|
|
1154
1139
|
}
|
|
1155
|
-
|
|
1140
|
+
.base-text.color-accent-red-600[class*='color-'] {
|
|
1156
1141
|
color: var(--color-accent-red-600);
|
|
1157
1142
|
}
|
|
1158
|
-
|
|
1143
|
+
.base-text.color-accent-red-700[class*='color-'] {
|
|
1159
1144
|
color: var(--color-accent-red-700);
|
|
1160
1145
|
}
|
|
1161
|
-
|
|
1146
|
+
.base-text.color-accent-red-800[class*='color-'] {
|
|
1162
1147
|
color: var(--color-accent-red-800);
|
|
1163
1148
|
}
|
|
1164
|
-
|
|
1149
|
+
.base-text.color-accent-red-900[class*='color-'] {
|
|
1165
1150
|
color: var(--color-accent-red-900);
|
|
1166
1151
|
}
|
|
1167
|
-
|
|
1152
|
+
.base-text.color-accent-pink-50[class*='color-'] {
|
|
1168
1153
|
color: var(--color-accent-pink-50);
|
|
1169
1154
|
}
|
|
1170
|
-
|
|
1155
|
+
.base-text.color-accent-pink-100[class*='color-'] {
|
|
1171
1156
|
color: var(--color-accent-pink-100);
|
|
1172
1157
|
}
|
|
1173
|
-
|
|
1158
|
+
.base-text.color-accent-pink-200[class*='color-'] {
|
|
1174
1159
|
color: var(--color-accent-pink-200);
|
|
1175
1160
|
}
|
|
1176
|
-
|
|
1161
|
+
.base-text.color-accent-pink-300[class*='color-'] {
|
|
1177
1162
|
color: var(--color-accent-pink-300);
|
|
1178
1163
|
}
|
|
1179
|
-
|
|
1164
|
+
.base-text.color-accent-pink-400[class*='color-'] {
|
|
1180
1165
|
color: var(--color-accent-pink-400);
|
|
1181
1166
|
}
|
|
1182
|
-
|
|
1167
|
+
.base-text.color-accent-pink-500[class*='color-'] {
|
|
1183
1168
|
color: var(--color-accent-pink-500);
|
|
1184
1169
|
}
|
|
1185
|
-
|
|
1170
|
+
.base-text.color-accent-pink-600[class*='color-'] {
|
|
1186
1171
|
color: var(--color-accent-pink-600);
|
|
1187
1172
|
}
|
|
1188
|
-
|
|
1173
|
+
.base-text.color-accent-pink-700[class*='color-'] {
|
|
1189
1174
|
color: var(--color-accent-pink-700);
|
|
1190
1175
|
}
|
|
1191
|
-
|
|
1176
|
+
.base-text.color-accent-pink-800[class*='color-'] {
|
|
1192
1177
|
color: var(--color-accent-pink-800);
|
|
1193
1178
|
}
|
|
1194
|
-
|
|
1179
|
+
.base-text.color-accent-pink-900[class*='color-'] {
|
|
1195
1180
|
color: var(--color-accent-pink-900);
|
|
1196
1181
|
}
|
|
1197
|
-
|
|
1182
|
+
.base-text.color-accent-magenta-50[class*='color-'] {
|
|
1198
1183
|
color: var(--color-accent-magenta-50);
|
|
1199
1184
|
}
|
|
1200
|
-
|
|
1185
|
+
.base-text.color-accent-magenta-100[class*='color-'] {
|
|
1201
1186
|
color: var(--color-accent-magenta-100);
|
|
1202
1187
|
}
|
|
1203
|
-
|
|
1188
|
+
.base-text.color-accent-magenta-200[class*='color-'] {
|
|
1204
1189
|
color: var(--color-accent-magenta-200);
|
|
1205
1190
|
}
|
|
1206
|
-
|
|
1191
|
+
.base-text.color-accent-magenta-300[class*='color-'] {
|
|
1207
1192
|
color: var(--color-accent-magenta-300);
|
|
1208
1193
|
}
|
|
1209
|
-
|
|
1194
|
+
.base-text.color-accent-magenta-400[class*='color-'] {
|
|
1210
1195
|
color: var(--color-accent-magenta-400);
|
|
1211
1196
|
}
|
|
1212
|
-
|
|
1197
|
+
.base-text.color-accent-magenta-500[class*='color-'] {
|
|
1213
1198
|
color: var(--color-accent-magenta-500);
|
|
1214
1199
|
}
|
|
1215
|
-
|
|
1200
|
+
.base-text.color-accent-magenta-600[class*='color-'] {
|
|
1216
1201
|
color: var(--color-accent-magenta-600);
|
|
1217
1202
|
}
|
|
1218
|
-
|
|
1203
|
+
.base-text.color-accent-magenta-700[class*='color-'] {
|
|
1219
1204
|
color: var(--color-accent-magenta-700);
|
|
1220
1205
|
}
|
|
1221
|
-
|
|
1206
|
+
.base-text.color-accent-magenta-800[class*='color-'] {
|
|
1222
1207
|
color: var(--color-accent-magenta-800);
|
|
1223
1208
|
}
|
|
1224
|
-
|
|
1209
|
+
.base-text.color-accent-magenta-900[class*='color-'] {
|
|
1225
1210
|
color: var(--color-accent-magenta-900);
|
|
1226
1211
|
}
|
|
1227
|
-
|
|
1212
|
+
.base-text.color-accent-blue-50[class*='color-'] {
|
|
1228
1213
|
color: var(--color-accent-blue-50);
|
|
1229
1214
|
}
|
|
1230
|
-
|
|
1215
|
+
.base-text.color-accent-blue-100[class*='color-'] {
|
|
1231
1216
|
color: var(--color-accent-blue-100);
|
|
1232
1217
|
}
|
|
1233
|
-
|
|
1218
|
+
.base-text.color-accent-blue-200[class*='color-'] {
|
|
1234
1219
|
color: var(--color-accent-blue-200);
|
|
1235
1220
|
}
|
|
1236
|
-
|
|
1221
|
+
.base-text.color-accent-blue-300[class*='color-'] {
|
|
1237
1222
|
color: var(--color-accent-blue-300);
|
|
1238
1223
|
}
|
|
1239
|
-
|
|
1224
|
+
.base-text.color-accent-blue-400[class*='color-'] {
|
|
1240
1225
|
color: var(--color-accent-blue-400);
|
|
1241
1226
|
}
|
|
1242
|
-
|
|
1227
|
+
.base-text.color-accent-blue-500[class*='color-'] {
|
|
1243
1228
|
color: var(--color-accent-blue-500);
|
|
1244
1229
|
}
|
|
1245
|
-
|
|
1230
|
+
.base-text.color-accent-blue-600[class*='color-'] {
|
|
1246
1231
|
color: var(--color-accent-blue-600);
|
|
1247
1232
|
}
|
|
1248
|
-
|
|
1233
|
+
.base-text.color-accent-blue-700[class*='color-'] {
|
|
1249
1234
|
color: var(--color-accent-blue-700);
|
|
1250
1235
|
}
|
|
1251
|
-
|
|
1236
|
+
.base-text.color-accent-blue-800[class*='color-'] {
|
|
1252
1237
|
color: var(--color-accent-blue-800);
|
|
1253
1238
|
}
|
|
1254
|
-
|
|
1239
|
+
.base-text.color-accent-blue-900[class*='color-'] {
|
|
1255
1240
|
color: var(--color-accent-blue-900);
|
|
1256
1241
|
}
|
|
1257
|
-
|
|
1242
|
+
.base-text.color-accent-mint-50[class*='color-'] {
|
|
1258
1243
|
color: var(--color-accent-mint-50);
|
|
1259
1244
|
}
|
|
1260
|
-
|
|
1245
|
+
.base-text.color-accent-mint-100[class*='color-'] {
|
|
1261
1246
|
color: var(--color-accent-mint-100);
|
|
1262
1247
|
}
|
|
1263
|
-
|
|
1248
|
+
.base-text.color-accent-mint-200[class*='color-'] {
|
|
1264
1249
|
color: var(--color-accent-mint-200);
|
|
1265
1250
|
}
|
|
1266
|
-
|
|
1251
|
+
.base-text.color-accent-mint-300[class*='color-'] {
|
|
1267
1252
|
color: var(--color-accent-mint-300);
|
|
1268
1253
|
}
|
|
1269
|
-
|
|
1254
|
+
.base-text.color-accent-mint-400[class*='color-'] {
|
|
1270
1255
|
color: var(--color-accent-mint-400);
|
|
1271
1256
|
}
|
|
1272
|
-
|
|
1257
|
+
.base-text.color-accent-mint-500[class*='color-'] {
|
|
1273
1258
|
color: var(--color-accent-mint-500);
|
|
1274
1259
|
}
|
|
1275
|
-
|
|
1260
|
+
.base-text.color-accent-mint-600[class*='color-'] {
|
|
1276
1261
|
color: var(--color-accent-mint-600);
|
|
1277
1262
|
}
|
|
1278
|
-
|
|
1263
|
+
.base-text.color-accent-mint-700[class*='color-'] {
|
|
1279
1264
|
color: var(--color-accent-mint-700);
|
|
1280
1265
|
}
|
|
1281
|
-
|
|
1266
|
+
.base-text.color-accent-mint-800[class*='color-'] {
|
|
1282
1267
|
color: var(--color-accent-mint-800);
|
|
1283
1268
|
}
|
|
1284
|
-
|
|
1269
|
+
.base-text.color-accent-mint-900[class*='color-'] {
|
|
1285
1270
|
color: var(--color-accent-mint-900);
|
|
1286
1271
|
}
|
|
1287
|
-
|
|
1272
|
+
.base-text.color-accent-green-50[class*='color-'] {
|
|
1288
1273
|
color: var(--color-accent-green-50);
|
|
1289
1274
|
}
|
|
1290
|
-
|
|
1275
|
+
.base-text.color-accent-green-100[class*='color-'] {
|
|
1291
1276
|
color: var(--color-accent-green-100);
|
|
1292
1277
|
}
|
|
1293
|
-
|
|
1278
|
+
.base-text.color-accent-green-200[class*='color-'] {
|
|
1294
1279
|
color: var(--color-accent-green-200);
|
|
1295
1280
|
}
|
|
1296
|
-
|
|
1281
|
+
.base-text.color-accent-green-300[class*='color-'] {
|
|
1297
1282
|
color: var(--color-accent-green-300);
|
|
1298
1283
|
}
|
|
1299
|
-
|
|
1284
|
+
.base-text.color-accent-green-400[class*='color-'] {
|
|
1300
1285
|
color: var(--color-accent-green-400);
|
|
1301
1286
|
}
|
|
1302
|
-
|
|
1287
|
+
.base-text.color-accent-green-500[class*='color-'] {
|
|
1303
1288
|
color: var(--color-accent-green-500);
|
|
1304
1289
|
}
|
|
1305
|
-
|
|
1290
|
+
.base-text.color-accent-green-600[class*='color-'] {
|
|
1306
1291
|
color: var(--color-accent-green-600);
|
|
1307
1292
|
}
|
|
1308
|
-
|
|
1293
|
+
.base-text.color-accent-green-700[class*='color-'] {
|
|
1309
1294
|
color: var(--color-accent-green-700);
|
|
1310
1295
|
}
|
|
1311
|
-
|
|
1296
|
+
.base-text.color-accent-green-800[class*='color-'] {
|
|
1312
1297
|
color: var(--color-accent-green-800);
|
|
1313
1298
|
}
|
|
1314
|
-
|
|
1299
|
+
.base-text.color-accent-green-900[class*='color-'] {
|
|
1315
1300
|
color: var(--color-accent-green-900);
|
|
1316
1301
|
}
|
|
1317
|
-
|
|
1302
|
+
.base-text.color-accent-yellow-50[class*='color-'] {
|
|
1318
1303
|
color: var(--color-accent-yellow-50);
|
|
1319
1304
|
}
|
|
1320
|
-
|
|
1305
|
+
.base-text.color-accent-yellow-100[class*='color-'] {
|
|
1321
1306
|
color: var(--color-accent-yellow-100);
|
|
1322
1307
|
}
|
|
1323
|
-
|
|
1308
|
+
.base-text.color-accent-yellow-200[class*='color-'] {
|
|
1324
1309
|
color: var(--color-accent-yellow-200);
|
|
1325
1310
|
}
|
|
1326
|
-
|
|
1311
|
+
.base-text.color-accent-yellow-300[class*='color-'] {
|
|
1327
1312
|
color: var(--color-accent-yellow-300);
|
|
1328
1313
|
}
|
|
1329
|
-
|
|
1314
|
+
.base-text.color-accent-yellow-400[class*='color-'] {
|
|
1330
1315
|
color: var(--color-accent-yellow-400);
|
|
1331
1316
|
}
|
|
1332
|
-
|
|
1317
|
+
.base-text.color-accent-yellow-500[class*='color-'] {
|
|
1333
1318
|
color: var(--color-accent-yellow-500);
|
|
1334
1319
|
}
|
|
1335
|
-
|
|
1320
|
+
.base-text.color-accent-yellow-600[class*='color-'] {
|
|
1336
1321
|
color: var(--color-accent-yellow-600);
|
|
1337
1322
|
}
|
|
1338
|
-
|
|
1323
|
+
.base-text.color-accent-yellow-700[class*='color-'] {
|
|
1339
1324
|
color: var(--color-accent-yellow-700);
|
|
1340
1325
|
}
|
|
1341
|
-
|
|
1326
|
+
.base-text.color-accent-yellow-800[class*='color-'] {
|
|
1342
1327
|
color: var(--color-accent-yellow-800);
|
|
1343
1328
|
}
|
|
1344
|
-
|
|
1329
|
+
.base-text.color-accent-yellow-900[class*='color-'] {
|
|
1345
1330
|
color: var(--color-accent-yellow-900);
|
|
1346
1331
|
}
|
|
1347
|
-
|
|
1332
|
+
.base-text.color-accent-orange-50[class*='color-'] {
|
|
1348
1333
|
color: var(--color-accent-orange-50);
|
|
1349
1334
|
}
|
|
1350
|
-
|
|
1335
|
+
.base-text.color-accent-orange-100[class*='color-'] {
|
|
1351
1336
|
color: var(--color-accent-orange-100);
|
|
1352
1337
|
}
|
|
1353
|
-
|
|
1338
|
+
.base-text.color-accent-orange-200[class*='color-'] {
|
|
1354
1339
|
color: var(--color-accent-orange-200);
|
|
1355
1340
|
}
|
|
1356
|
-
|
|
1341
|
+
.base-text.color-accent-orange-300[class*='color-'] {
|
|
1357
1342
|
color: var(--color-accent-orange-300);
|
|
1358
1343
|
}
|
|
1359
|
-
|
|
1344
|
+
.base-text.color-accent-orange-400[class*='color-'] {
|
|
1360
1345
|
color: var(--color-accent-orange-400);
|
|
1361
1346
|
}
|
|
1362
|
-
|
|
1347
|
+
.base-text.color-accent-orange-500[class*='color-'] {
|
|
1363
1348
|
color: var(--color-accent-orange-500);
|
|
1364
1349
|
}
|
|
1365
|
-
|
|
1350
|
+
.base-text.color-accent-orange-600[class*='color-'] {
|
|
1366
1351
|
color: var(--color-accent-orange-600);
|
|
1367
1352
|
}
|
|
1368
|
-
|
|
1353
|
+
.base-text.color-accent-orange-700[class*='color-'] {
|
|
1369
1354
|
color: var(--color-accent-orange-700);
|
|
1370
1355
|
}
|
|
1371
|
-
|
|
1356
|
+
.base-text.color-accent-orange-800[class*='color-'] {
|
|
1372
1357
|
color: var(--color-accent-orange-800);
|
|
1373
1358
|
}
|
|
1374
|
-
|
|
1359
|
+
.base-text.color-accent-orange-900[class*='color-'] {
|
|
1375
1360
|
color: var(--color-accent-orange-900);
|
|
1376
1361
|
}
|
|
1377
|
-
}
|
|
1378
|
-
}
|
|
1379
1362
|
.component-loading-inline {
|
|
1380
1363
|
display: flex;
|
|
1381
1364
|
width: 100%;
|
|
@@ -1443,8 +1426,8 @@ p {
|
|
|
1443
1426
|
|
|
1444
1427
|
padding: 30px;
|
|
1445
1428
|
border-radius: 6px;
|
|
1446
|
-
|
|
1447
|
-
|
|
1429
|
+
}
|
|
1430
|
+
.base-modal.modal-container {
|
|
1448
1431
|
position: fixed;
|
|
1449
1432
|
top: 50%;
|
|
1450
1433
|
left: 50%;
|
|
@@ -1452,8 +1435,7 @@ p {
|
|
|
1452
1435
|
z-index: 9999;
|
|
1453
1436
|
background-color: var(--color-white);
|
|
1454
1437
|
}
|
|
1455
|
-
|
|
1456
|
-
&.modal-overlay {
|
|
1438
|
+
.base-modal.modal-overlay {
|
|
1457
1439
|
position: fixed;
|
|
1458
1440
|
top: 0;
|
|
1459
1441
|
left: 0;
|
|
@@ -1462,7 +1444,6 @@ p {
|
|
|
1462
1444
|
background-color: rgba(0, 0, 0, 0.5);
|
|
1463
1445
|
z-index: 9998;
|
|
1464
1446
|
}
|
|
1465
|
-
}
|
|
1466
1447
|
/***************************************************************************************************
|
|
1467
1448
|
* *
|
|
1468
1449
|
* modal-with-double-button *
|
|
@@ -1474,6 +1455,15 @@ p {
|
|
|
1474
1455
|
align-items: center;
|
|
1475
1456
|
width: 100%;
|
|
1476
1457
|
}
|
|
1458
|
+
.modal-with-double-button-container.size-s {
|
|
1459
|
+
width: 400px;
|
|
1460
|
+
}
|
|
1461
|
+
.modal-with-double-button-container.size-m {
|
|
1462
|
+
width: 450px;
|
|
1463
|
+
}
|
|
1464
|
+
.modal-with-double-button-container.size-l {
|
|
1465
|
+
width: 500px;
|
|
1466
|
+
}
|
|
1477
1467
|
.modal-with-double-button-title-icon {
|
|
1478
1468
|
margin-bottom: 20px;
|
|
1479
1469
|
}
|
|
@@ -1490,34 +1480,32 @@ p {
|
|
|
1490
1480
|
gap: 16px;
|
|
1491
1481
|
width: 100%;
|
|
1492
1482
|
margin-top: 30px;
|
|
1493
|
-
|
|
1494
|
-
|
|
1483
|
+
}
|
|
1484
|
+
.modal-with-double-button-close.row {
|
|
1495
1485
|
display: flex;
|
|
1496
1486
|
justify-content: center;
|
|
1497
1487
|
align-items: center;
|
|
1498
1488
|
gap: 16px;
|
|
1499
|
-
|
|
1500
|
-
|
|
1489
|
+
}
|
|
1490
|
+
.modal-with-double-button-close.row > * {
|
|
1501
1491
|
flex: 1;
|
|
1502
|
-
width: 100%;
|
|
1503
1492
|
}
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
&.column {
|
|
1493
|
+
.modal-with-double-button-close.column {
|
|
1507
1494
|
display: flex;
|
|
1508
1495
|
flex-direction: column;
|
|
1509
1496
|
justify-content: center;
|
|
1510
1497
|
align-items: center;
|
|
1511
|
-
gap: 10px
|
|
1498
|
+
gap: 10px;
|
|
1512
1499
|
}
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1500
|
+
.modal-with-double-button-close.column > * {
|
|
1501
|
+
width: 100%;
|
|
1502
|
+
}
|
|
1503
|
+
.radio:where(.radio-group) {
|
|
1516
1504
|
display: flex;
|
|
1517
1505
|
flex-direction: column;
|
|
1518
1506
|
gap: 16px;
|
|
1519
1507
|
}
|
|
1520
|
-
|
|
1508
|
+
.radio:where(.radio-button) {
|
|
1521
1509
|
display: flex;
|
|
1522
1510
|
align-items: center;
|
|
1523
1511
|
justify-content: center;
|
|
@@ -1526,45 +1514,40 @@ p {
|
|
|
1526
1514
|
border-radius: 50%;
|
|
1527
1515
|
background-color: var(--color-grey-scale-200);
|
|
1528
1516
|
}
|
|
1529
|
-
|
|
1517
|
+
.radio:where(.radio-indicator) {
|
|
1530
1518
|
width: 8px;
|
|
1531
1519
|
height: 8px;
|
|
1532
1520
|
border-radius: 50%;
|
|
1533
1521
|
background-color: var(--color-purple-900);
|
|
1534
1522
|
}
|
|
1535
|
-
|
|
1523
|
+
.radio:where(.radio-label) {
|
|
1536
1524
|
font-size: var(--font-size-sm);
|
|
1537
1525
|
font-weight: var(--font-weight-medium);
|
|
1538
1526
|
color: var(--color-black);
|
|
1539
1527
|
}
|
|
1540
|
-
}
|
|
1541
1528
|
.base-table {
|
|
1542
1529
|
width: -moz-fit-content;
|
|
1543
1530
|
width: fit-content;
|
|
1544
|
-
|
|
1545
|
-
|
|
1531
|
+
}
|
|
1532
|
+
.base-table .header {
|
|
1546
1533
|
display: flex;
|
|
1547
1534
|
align-items: center;
|
|
1548
1535
|
width: 100%;
|
|
1549
1536
|
}
|
|
1550
|
-
|
|
1551
|
-
.body {
|
|
1537
|
+
.base-table .body {
|
|
1552
1538
|
width: 100%;
|
|
1553
1539
|
}
|
|
1554
|
-
|
|
1555
|
-
.row {
|
|
1540
|
+
.base-table .row {
|
|
1556
1541
|
display: flex;
|
|
1557
1542
|
align-items: center;
|
|
1558
1543
|
width: 100%;
|
|
1559
1544
|
}
|
|
1560
|
-
|
|
1561
|
-
.cell {
|
|
1545
|
+
.base-table .cell {
|
|
1562
1546
|
text-align: start;
|
|
1563
1547
|
display: flex;
|
|
1564
1548
|
flex-direction: column;
|
|
1565
1549
|
justify-content: center;
|
|
1566
1550
|
}
|
|
1567
|
-
}
|
|
1568
1551
|
/***************************************************************************************************
|
|
1569
1552
|
* *
|
|
1570
1553
|
* data-table *
|
|
@@ -1584,28 +1567,27 @@ p {
|
|
|
1584
1567
|
.data-table-row {
|
|
1585
1568
|
position: relative;
|
|
1586
1569
|
border-bottom: 1px solid var(--color-grey-scale-200);
|
|
1587
|
-
|
|
1588
|
-
|
|
1570
|
+
}
|
|
1571
|
+
.data-table-row .fixed {
|
|
1589
1572
|
position: sticky;
|
|
1590
1573
|
background-color: #fff;
|
|
1591
1574
|
z-index: 2;
|
|
1592
|
-
|
|
1593
|
-
|
|
1575
|
+
}
|
|
1576
|
+
:is(.data-table-row .fixed) > * {
|
|
1594
1577
|
position: relative;
|
|
1595
1578
|
z-index: 1;
|
|
1596
1579
|
}
|
|
1597
|
-
background-color: #f5f5f5
|
|
1598
|
-
}
|
|
1599
|
-
}
|
|
1600
1580
|
.body .data-table-row:hover {
|
|
1601
|
-
background-color: #f5f5f5
|
|
1581
|
+
background-color: #f5f5f5;
|
|
1602
1582
|
}
|
|
1583
|
+
:is(.body .data-table-row:hover) .fixed {
|
|
1584
|
+
background-color: #f5f5f5;
|
|
1585
|
+
}
|
|
1603
1586
|
.fixed-cell {
|
|
1604
1587
|
position: sticky;
|
|
1605
1588
|
left: 0;
|
|
1606
1589
|
}
|
|
1607
|
-
.base-text-field {
|
|
1608
|
-
&.input {
|
|
1590
|
+
.base-text-field.input {
|
|
1609
1591
|
border: none;
|
|
1610
1592
|
outline: none;
|
|
1611
1593
|
background-color: transparent;
|
|
@@ -1613,25 +1595,18 @@ p {
|
|
|
1613
1595
|
font-size: var(--font-size-sm);
|
|
1614
1596
|
line-height: var(--line-height-sm);
|
|
1615
1597
|
font-weight: var(--font-weight-medium);
|
|
1616
|
-
|
|
1617
|
-
|
|
1598
|
+
}
|
|
1599
|
+
.base-text-field.input::-moz-placeholder {
|
|
1618
1600
|
color: var(--color-grey-scale-400);
|
|
1619
1601
|
}
|
|
1620
|
-
|
|
1621
|
-
&::placeholder {
|
|
1602
|
+
.base-text-field.input::placeholder {
|
|
1622
1603
|
color: var(--color-grey-scale-400);
|
|
1623
1604
|
}
|
|
1624
|
-
|
|
1625
|
-
&:-webkit-autofill,
|
|
1626
|
-
&:-webkit-autofill:hover,
|
|
1627
|
-
&:-webkit-autofill:focus,
|
|
1628
|
-
&:-webkit-autofill:active {
|
|
1605
|
+
.base-text-field.input:-webkit-autofill,.base-text-field.input:-webkit-autofill:hover,.base-text-field.input:-webkit-autofill:focus,.base-text-field.input:-webkit-autofill:active {
|
|
1629
1606
|
box-shadow: 0 0 0px 1000px transparent inset;
|
|
1630
1607
|
-webkit-transition: background-color 5000s ease-in-out 0s;
|
|
1631
1608
|
transition: background-color 5000s ease-in-out 0s;
|
|
1632
1609
|
}
|
|
1633
|
-
}
|
|
1634
|
-
}
|
|
1635
1610
|
/***************************************************************************************************
|
|
1636
1611
|
* *
|
|
1637
1612
|
* base-text-field *
|
|
@@ -1650,33 +1625,35 @@ p {
|
|
|
1650
1625
|
|
|
1651
1626
|
border-radius: 4px;
|
|
1652
1627
|
border: 1px solid var(--color-grey-scale-300);
|
|
1653
|
-
|
|
1654
|
-
|
|
1628
|
+
}
|
|
1629
|
+
.text-field-input-wrapper.size-m {
|
|
1630
|
+
height: 40px;
|
|
1631
|
+
}
|
|
1632
|
+
.text-field-input-wrapper.size-l {
|
|
1633
|
+
height: 50px;
|
|
1634
|
+
}
|
|
1635
|
+
.text-field-input-wrapper:has([data-disabled='true']) {
|
|
1655
1636
|
border-color: var(--color-grey-scale-300);
|
|
1656
1637
|
background-color: var(--color-grey-scale-100);
|
|
1657
1638
|
}
|
|
1658
|
-
|
|
1659
|
-
&:focus-within {
|
|
1639
|
+
.text-field-input-wrapper:focus-within {
|
|
1660
1640
|
border: 1px solid var(--color-purple-900);
|
|
1661
1641
|
}
|
|
1662
|
-
|
|
1663
|
-
> input {
|
|
1642
|
+
.text-field-input-wrapper > input {
|
|
1664
1643
|
width: 100%;
|
|
1665
1644
|
}
|
|
1666
|
-
}
|
|
1667
1645
|
.text-field-helper-text {
|
|
1668
1646
|
margin-top: 4px;
|
|
1669
|
-
|
|
1670
|
-
|
|
1647
|
+
}
|
|
1648
|
+
.text-field-helper-text.error {
|
|
1671
1649
|
color: var(--color-accent-red-500);
|
|
1672
1650
|
}
|
|
1673
|
-
}
|
|
1674
1651
|
.base-tooltip {
|
|
1675
1652
|
z-index: 3;
|
|
1676
|
-
|
|
1653
|
+
}
|
|
1654
|
+
.base-tooltip.content {
|
|
1677
1655
|
text-align: center;
|
|
1678
1656
|
}
|
|
1679
|
-
}
|
|
1680
1657
|
/***************************************************************************************************
|
|
1681
1658
|
* *
|
|
1682
1659
|
* tooltip *
|
|
@@ -1702,48 +1679,51 @@ p {
|
|
|
1702
1679
|
font-weight: var(--font-weight-regular);
|
|
1703
1680
|
|
|
1704
1681
|
position: relative;
|
|
1705
|
-
|
|
1706
|
-
|
|
1682
|
+
}
|
|
1683
|
+
.tooltip-content::before {
|
|
1707
1684
|
content: '';
|
|
1708
1685
|
position: absolute;
|
|
1709
1686
|
width: 0;
|
|
1710
1687
|
height: 0;
|
|
1711
1688
|
border-style: solid;
|
|
1689
|
+
}
|
|
1690
|
+
.tooltip-content.direction-top {
|
|
1691
|
+
transform: translateY(-10px);
|
|
1692
|
+
}
|
|
1693
|
+
.tooltip-content.direction-top::before {
|
|
1712
1694
|
bottom: -8px;
|
|
1713
1695
|
left: 50%;
|
|
1714
1696
|
transform: translateX(-50%);
|
|
1715
1697
|
border-width: 8px 8px 0 8px;
|
|
1716
1698
|
border-color: var(--color-purple-900) transparent transparent transparent;
|
|
1699
|
+
}
|
|
1700
|
+
.tooltip-content.direction-bottom {
|
|
1701
|
+
transform: translateY(10px);
|
|
1702
|
+
}
|
|
1703
|
+
.tooltip-content.direction-bottom::before {
|
|
1717
1704
|
top: -8px;
|
|
1718
1705
|
left: 50%;
|
|
1719
1706
|
transform: translateX(-50%);
|
|
1720
1707
|
border-width: 0 8px 8px 8px;
|
|
1721
1708
|
border-color: transparent transparent var(--color-purple-900) transparent;
|
|
1709
|
+
}
|
|
1710
|
+
.tooltip-content.direction-left {
|
|
1711
|
+
transform: translateX(-10px);
|
|
1712
|
+
}
|
|
1713
|
+
.tooltip-content.direction-left::before {
|
|
1722
1714
|
right: -8px;
|
|
1723
1715
|
top: 50%;
|
|
1724
1716
|
transform: translateY(-50%);
|
|
1725
1717
|
border-width: 8px 0 8px 8px;
|
|
1726
1718
|
border-color: transparent transparent transparent var(--color-purple-900);
|
|
1719
|
+
}
|
|
1720
|
+
.tooltip-content.direction-right {
|
|
1721
|
+
transform: translateX(10px);
|
|
1722
|
+
}
|
|
1723
|
+
.tooltip-content.direction-right::before {
|
|
1727
1724
|
left: -8px;
|
|
1728
1725
|
top: 50%;
|
|
1729
1726
|
transform: translateY(-50%);
|
|
1730
1727
|
border-width: 8px 8px 8px 0;
|
|
1731
1728
|
border-color: transparent var(--color-purple-900) transparent transparent;
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
&.direction-top {
|
|
1735
|
-
transform: translateY(-10px)
|
|
1736
|
-
}
|
|
1737
|
-
|
|
1738
|
-
&.direction-bottom {
|
|
1739
|
-
transform: translateY(10px)
|
|
1740
|
-
}
|
|
1741
|
-
|
|
1742
|
-
&.direction-left {
|
|
1743
|
-
transform: translateX(-10px)
|
|
1744
|
-
}
|
|
1745
|
-
|
|
1746
|
-
&.direction-right {
|
|
1747
|
-
transform: translateX(10px)
|
|
1748
|
-
}
|
|
1749
|
-
}
|
|
1729
|
+
}
|