@clayui/css 3.127.0 → 3.128.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/css/atlas.css +207 -48
- package/lib/css/atlas.css.map +1 -1
- package/lib/css/base.css +159 -64
- package/lib/css/base.css.map +1 -1
- package/lib/css/cadmin.css +188 -50
- package/lib/css/cadmin.css.map +1 -1
- package/lib/images/icons/icons.svg +1 -1
- package/package.json +2 -2
- package/src/scss/_license-text.scss +1 -1
- package/src/scss/atlas/variables/_globals.scss +2 -0
- package/src/scss/cadmin/components/_grid.scss +3 -1
- package/src/scss/cadmin/variables/_dropdowns.scss +3 -0
- package/src/scss/cadmin/variables/_globals.scss +2 -0
- package/src/scss/components/_grid.scss +3 -1
- package/src/scss/mixins/_alerts.scss +104 -48
- package/src/scss/mixins/_badges.scss +75 -33
- package/src/scss/mixins/_buttons.scss +503 -225
- package/src/scss/mixins/_cards.scss +619 -277
- package/src/scss/mixins/_close.scss +42 -24
- package/src/scss/mixins/_custom-forms.scss +864 -581
- package/src/scss/mixins/_dropdown-menu.scss +466 -223
- package/src/scss/mixins/_links.scss +564 -282
- package/src/scss/variables/_dropdowns.scss +3 -0
- package/src/scss/variables/_globals.scss +2 -0
|
@@ -550,400 +550,641 @@
|
|
|
550
550
|
);
|
|
551
551
|
|
|
552
552
|
@if ($enabled) {
|
|
553
|
-
@
|
|
554
|
-
|
|
555
|
-
&::before {
|
|
556
|
-
@include clay-css(map-get($map, before));
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
&::after {
|
|
560
|
-
@include clay-css(map-get($map, after));
|
|
553
|
+
@if (length($base) != 0) {
|
|
554
|
+
@include clay-css($base);
|
|
561
555
|
}
|
|
562
556
|
|
|
563
|
-
|
|
564
|
-
$_link: setter(map-get($map, link), ());
|
|
565
|
-
|
|
566
|
-
@include clay-css($_link);
|
|
557
|
+
$_before: map-get($map, before);
|
|
567
558
|
|
|
559
|
+
@if ($_before) {
|
|
568
560
|
&::before {
|
|
569
|
-
@include clay-css(
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
&::after {
|
|
573
|
-
@include clay-css(map-get($_link, after));
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
.inline-item {
|
|
577
|
-
@include clay-css(map-get($_link, inline-item));
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
.inline-item-before {
|
|
581
|
-
@include clay-css(map-get($_link, inline-item-before));
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
.inline-item-middle {
|
|
585
|
-
@include clay-css(map-get($_link, inline-item-middle));
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
.inline-item-after {
|
|
589
|
-
@include clay-css(map-get($_link, inline-item-after));
|
|
561
|
+
@include clay-css($_before);
|
|
590
562
|
}
|
|
591
563
|
}
|
|
592
564
|
|
|
593
|
-
|
|
594
|
-
$_visited: setter(map-get($map, visited), ());
|
|
595
|
-
|
|
596
|
-
@include clay-css($_visited);
|
|
597
|
-
|
|
598
|
-
&::before {
|
|
599
|
-
@include clay-css(map-get($_visited, before));
|
|
600
|
-
}
|
|
565
|
+
$_after: map-get($map, after);
|
|
601
566
|
|
|
567
|
+
@if ($_after) {
|
|
602
568
|
&::after {
|
|
603
|
-
@include clay-css(
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
.inline-item {
|
|
607
|
-
@include clay-css(map-get($_visited, inline-item));
|
|
608
|
-
}
|
|
609
|
-
|
|
610
|
-
.inline-item-before {
|
|
611
|
-
@include clay-css(map-get($_visited, inline-item-before));
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
.inline-item-middle {
|
|
615
|
-
@include clay-css(map-get($_visited, inline-item-middle));
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
.inline-item-after {
|
|
619
|
-
@include clay-css(map-get($_visited, inline-item-after));
|
|
569
|
+
@include clay-css($_after);
|
|
620
570
|
}
|
|
621
571
|
}
|
|
622
572
|
|
|
623
|
-
|
|
624
|
-
&.hover {
|
|
625
|
-
@include clay-css($hover);
|
|
573
|
+
$_link: map-get($map, link);
|
|
626
574
|
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
575
|
+
@if ($_link) {
|
|
576
|
+
&:link {
|
|
577
|
+
@include clay-css($_link);
|
|
630
578
|
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
579
|
+
&::before {
|
|
580
|
+
@include clay-css(map-get($_link, before));
|
|
581
|
+
}
|
|
634
582
|
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
583
|
+
&::after {
|
|
584
|
+
@include clay-css(map-get($_link, after));
|
|
585
|
+
}
|
|
638
586
|
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
587
|
+
.inline-item {
|
|
588
|
+
@include clay-css(map-get($_link, inline-item));
|
|
589
|
+
}
|
|
642
590
|
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
591
|
+
.inline-item-before {
|
|
592
|
+
@include clay-css(map-get($_link, inline-item-before));
|
|
593
|
+
}
|
|
646
594
|
|
|
647
|
-
|
|
648
|
-
|
|
595
|
+
.inline-item-middle {
|
|
596
|
+
@include clay-css(map-get($_link, inline-item-middle));
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.inline-item-after {
|
|
600
|
+
@include clay-css(map-get($_link, inline-item-after));
|
|
601
|
+
}
|
|
649
602
|
}
|
|
650
603
|
}
|
|
651
604
|
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
@include clay-css($
|
|
605
|
+
$_visited: map-get($map, visited);
|
|
606
|
+
|
|
607
|
+
@if ($_visited) {
|
|
608
|
+
&:visited {
|
|
609
|
+
@include clay-css($_visited);
|
|
657
610
|
|
|
658
611
|
&::before {
|
|
659
|
-
@include clay-css(map-get($
|
|
612
|
+
@include clay-css(map-get($_visited, before));
|
|
660
613
|
}
|
|
661
614
|
|
|
662
615
|
&::after {
|
|
663
|
-
@include clay-css(map-get($
|
|
616
|
+
@include clay-css(map-get($_visited, after));
|
|
664
617
|
}
|
|
665
618
|
|
|
666
619
|
.inline-item {
|
|
667
|
-
@include clay-css(map-get($
|
|
620
|
+
@include clay-css(map-get($_visited, inline-item));
|
|
668
621
|
}
|
|
669
622
|
|
|
670
623
|
.inline-item-before {
|
|
671
|
-
@include clay-css(
|
|
624
|
+
@include clay-css(
|
|
625
|
+
map-get($_visited, inline-item-before)
|
|
626
|
+
);
|
|
672
627
|
}
|
|
673
628
|
|
|
674
629
|
.inline-item-middle {
|
|
675
|
-
@include clay-css(
|
|
630
|
+
@include clay-css(
|
|
631
|
+
map-get($_visited, inline-item-middle)
|
|
632
|
+
);
|
|
676
633
|
}
|
|
677
634
|
|
|
678
635
|
.inline-item-after {
|
|
679
|
-
@include clay-css(
|
|
636
|
+
@include clay-css(
|
|
637
|
+
map-get($_visited, inline-item-after)
|
|
638
|
+
);
|
|
680
639
|
}
|
|
681
640
|
}
|
|
682
641
|
}
|
|
683
642
|
|
|
684
|
-
|
|
685
|
-
|
|
643
|
+
@if (length($hover) != 0) {
|
|
644
|
+
&:hover,
|
|
645
|
+
&.hover {
|
|
646
|
+
@include clay-css($hover);
|
|
686
647
|
|
|
687
|
-
|
|
688
|
-
@include clay-css(map-get($active, before));
|
|
689
|
-
}
|
|
648
|
+
$_before: map-get($hover, before);
|
|
690
649
|
|
|
691
|
-
|
|
692
|
-
|
|
650
|
+
@if ($_before) {
|
|
651
|
+
&::before {
|
|
652
|
+
@include clay-css($_before);
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
$_after: map-get($hover, after);
|
|
657
|
+
|
|
658
|
+
@if ($_after) {
|
|
659
|
+
&::after {
|
|
660
|
+
@include clay-css($_after);
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
$_inline-item: map-get($hover, inline-item);
|
|
665
|
+
|
|
666
|
+
@if ($_inline-item) {
|
|
667
|
+
.inline-item {
|
|
668
|
+
@include clay-css($_inline-item);
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
$_inline-item-before: map-get($hover, inline-item-before);
|
|
673
|
+
|
|
674
|
+
@if ($_inline-item-before) {
|
|
675
|
+
.inline-item-before {
|
|
676
|
+
@include clay-css($_inline-item-before);
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
$_inline-item-middle: map-get($hover, inline-item-middle);
|
|
681
|
+
|
|
682
|
+
@if ($_inline-item-middle) {
|
|
683
|
+
.inline-item-middle {
|
|
684
|
+
@include clay-css($_inline-item-middle);
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
$_inline-item-after: map-get($hover, inline-item-after);
|
|
689
|
+
|
|
690
|
+
@if ($_inline-item-after) {
|
|
691
|
+
.inline-item-after {
|
|
692
|
+
@include clay-css($_inline-item-after);
|
|
693
|
+
}
|
|
694
|
+
}
|
|
693
695
|
}
|
|
696
|
+
}
|
|
694
697
|
|
|
698
|
+
@if (length($focus) != 0) {
|
|
695
699
|
@at-root {
|
|
700
|
+
&.focus,
|
|
696
701
|
#{$focus-visible-selector},
|
|
697
702
|
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
698
|
-
|
|
703
|
+
@include clay-css($focus);
|
|
704
|
+
|
|
705
|
+
$_before: map-get($focus, before);
|
|
706
|
+
|
|
707
|
+
@if ($_before) {
|
|
708
|
+
&::before {
|
|
709
|
+
@include clay-css($_before);
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
$_after: map-get($focus, after);
|
|
714
|
+
|
|
715
|
+
@if ($_after) {
|
|
716
|
+
&::after {
|
|
717
|
+
@include clay-css($_after);
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
$_inline-item: map-get($focus, inline-item);
|
|
722
|
+
|
|
723
|
+
@if ($_inline-item) {
|
|
724
|
+
.inline-item {
|
|
725
|
+
@include clay-css($_inline-item);
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
$_inline-item-before: map-get(
|
|
730
|
+
$focus,
|
|
731
|
+
inline-item-before
|
|
732
|
+
);
|
|
733
|
+
|
|
734
|
+
@if ($_inline-item-before) {
|
|
735
|
+
.inline-item-before {
|
|
736
|
+
@include clay-css($_inline-item-before);
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
$_inline-item-middle: map-get(
|
|
741
|
+
$focus,
|
|
742
|
+
inline-item-middle
|
|
743
|
+
);
|
|
744
|
+
|
|
745
|
+
@if ($_inline-item-middle) {
|
|
746
|
+
.inline-item-middle {
|
|
747
|
+
@include clay-css($_inline-item-middle);
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
$_inline-item-after: map-get($focus, inline-item-after);
|
|
752
|
+
|
|
753
|
+
@if ($_inline-item-after) {
|
|
754
|
+
.inline-item-after {
|
|
755
|
+
@include clay-css($_inline-item-after);
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
@if (length($active) != 0) {
|
|
763
|
+
&:active {
|
|
764
|
+
@include clay-css($active);
|
|
699
765
|
|
|
700
|
-
|
|
766
|
+
$_before: map-get($active, before);
|
|
701
767
|
|
|
768
|
+
@if ($_before) {
|
|
702
769
|
&::before {
|
|
703
|
-
@include clay-css(
|
|
770
|
+
@include clay-css($_before);
|
|
704
771
|
}
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
$_after: map-get($active, after);
|
|
705
775
|
|
|
776
|
+
@if ($_after) {
|
|
706
777
|
&::after {
|
|
707
|
-
@include clay-css(
|
|
778
|
+
@include clay-css($_after);
|
|
708
779
|
}
|
|
709
780
|
}
|
|
710
|
-
}
|
|
711
781
|
|
|
712
|
-
|
|
713
|
-
@include clay-css(map-get($active, inline-item));
|
|
714
|
-
}
|
|
782
|
+
$_focus: map-get($active, focus);
|
|
715
783
|
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
784
|
+
@if ($_focus) {
|
|
785
|
+
@at-root {
|
|
786
|
+
#{$focus-visible-selector},
|
|
787
|
+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
788
|
+
@include clay-css($_focus);
|
|
719
789
|
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
790
|
+
&::before {
|
|
791
|
+
@include clay-css(map-get($_focus, before));
|
|
792
|
+
}
|
|
723
793
|
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
794
|
+
&::after {
|
|
795
|
+
@include clay-css(map-get($_focus, after));
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
}
|
|
728
800
|
|
|
729
|
-
|
|
730
|
-
@include clay-css($active-class);
|
|
801
|
+
$_inline-item: map-get($active, inline-item);
|
|
731
802
|
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
803
|
+
@if ($_inline-item) {
|
|
804
|
+
.inline-item {
|
|
805
|
+
@include clay-css($_inline-item);
|
|
806
|
+
}
|
|
807
|
+
}
|
|
735
808
|
|
|
736
|
-
|
|
737
|
-
|
|
809
|
+
$_inline-item-before: map-get($active, inline-item-before);
|
|
810
|
+
|
|
811
|
+
@if ($_inline-item-before) {
|
|
812
|
+
.inline-item-before {
|
|
813
|
+
@include clay-css($_inline-item-before);
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
$_inline-item-middle: map-get($active, inline-item-middle);
|
|
818
|
+
|
|
819
|
+
@if ($_inline-item-middle) {
|
|
820
|
+
.inline-item-middle {
|
|
821
|
+
@include clay-css($_inline-item-middle);
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
$_inline-item-after: map-get($active, inline-item-after);
|
|
826
|
+
|
|
827
|
+
@if ($_inline-item-after) {
|
|
828
|
+
.inline-item-after {
|
|
829
|
+
@include clay-css($_inline-item-after);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
738
832
|
}
|
|
833
|
+
}
|
|
739
834
|
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
$_active-class-focus: setter(
|
|
744
|
-
map-get($active-class, focus),
|
|
745
|
-
()
|
|
746
|
-
);
|
|
835
|
+
@if (length($active-class) != 0) {
|
|
836
|
+
&.active {
|
|
837
|
+
@include clay-css($active-class);
|
|
747
838
|
|
|
748
|
-
|
|
839
|
+
$_before: map-get($active-class, before);
|
|
749
840
|
|
|
841
|
+
@if ($_before) {
|
|
750
842
|
&::before {
|
|
751
|
-
@include clay-css(
|
|
752
|
-
map-get($_active-class-focus, before)
|
|
753
|
-
);
|
|
843
|
+
@include clay-css($_before);
|
|
754
844
|
}
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
$_after: map-get($active-class, after);
|
|
755
848
|
|
|
849
|
+
@if ($_after) {
|
|
756
850
|
&::after {
|
|
757
|
-
@include clay-css(
|
|
758
|
-
map-get($_active-class-focus, after)
|
|
759
|
-
);
|
|
851
|
+
@include clay-css($_after);
|
|
760
852
|
}
|
|
761
853
|
}
|
|
762
|
-
}
|
|
763
854
|
|
|
764
|
-
|
|
765
|
-
@include clay-css(map-get($active-class, inline-item));
|
|
766
|
-
}
|
|
855
|
+
$_focus: map-get($active-class, focus);
|
|
767
856
|
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
857
|
+
@if ($_focus) {
|
|
858
|
+
@at-root {
|
|
859
|
+
#{$focus-visible-selector},
|
|
860
|
+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
861
|
+
@include clay-css($_focus);
|
|
773
862
|
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
863
|
+
&::before {
|
|
864
|
+
@include clay-css(map-get($_focus, before));
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
&::after {
|
|
868
|
+
@include clay-css(map-get($_focus, after));
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
$_inline-item: map-get($active-class, inline-item);
|
|
875
|
+
|
|
876
|
+
@if ($_inline-item) {
|
|
877
|
+
.inline-item {
|
|
878
|
+
@include clay-css($_inline-item);
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
$_inline-item-before: map-get(
|
|
883
|
+
$active-class,
|
|
884
|
+
inline-item-before
|
|
777
885
|
);
|
|
778
|
-
}
|
|
779
886
|
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
887
|
+
@if ($_inline-item-before) {
|
|
888
|
+
.inline-item-before {
|
|
889
|
+
@include clay-css($_inline-item-before);
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
$_inline-item-middle: map-get(
|
|
894
|
+
$active-class,
|
|
895
|
+
inline-item-middle
|
|
783
896
|
);
|
|
784
|
-
}
|
|
785
|
-
}
|
|
786
897
|
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
898
|
+
@if ($_inline-item-middle) {
|
|
899
|
+
.inline-item-middle {
|
|
900
|
+
@include clay-css($_inline-item-middle);
|
|
901
|
+
}
|
|
902
|
+
}
|
|
790
903
|
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
904
|
+
$_inline-item-after: map-get(
|
|
905
|
+
$active-class,
|
|
906
|
+
inline-item-after
|
|
907
|
+
);
|
|
794
908
|
|
|
795
|
-
|
|
796
|
-
|
|
909
|
+
@if ($_inline-item-after) {
|
|
910
|
+
.inline-item-after {
|
|
911
|
+
@include clay-css($_inline-item-after);
|
|
912
|
+
}
|
|
913
|
+
}
|
|
797
914
|
}
|
|
915
|
+
}
|
|
798
916
|
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
917
|
+
@if (length($disabled) != 0) {
|
|
918
|
+
&:disabled,
|
|
919
|
+
&.disabled {
|
|
920
|
+
@include clay-css($disabled);
|
|
803
921
|
|
|
804
|
-
|
|
922
|
+
$_before: map-get($disabled, before);
|
|
805
923
|
|
|
924
|
+
@if ($_before) {
|
|
806
925
|
&::before {
|
|
807
|
-
@include clay-css(
|
|
808
|
-
map-get($_disabled-focus, before)
|
|
809
|
-
);
|
|
926
|
+
@include clay-css($_before);
|
|
810
927
|
}
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
$_after: map-get($disabled, after);
|
|
811
931
|
|
|
932
|
+
@if ($_after) {
|
|
812
933
|
&::after {
|
|
813
|
-
@include clay-css(
|
|
934
|
+
@include clay-css($_after);
|
|
814
935
|
}
|
|
815
936
|
}
|
|
816
|
-
}
|
|
817
937
|
|
|
818
|
-
|
|
819
|
-
@include clay-css($disabled-active);
|
|
938
|
+
$_focus: map-get($disabled, focus);
|
|
820
939
|
|
|
821
|
-
|
|
822
|
-
@
|
|
940
|
+
@if ($_focus) {
|
|
941
|
+
@at-root {
|
|
942
|
+
#{$focus-visible-selector},
|
|
943
|
+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
944
|
+
@include clay-css($_focus);
|
|
945
|
+
|
|
946
|
+
&::before {
|
|
947
|
+
@include clay-css(map-get($_focus, before));
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
&::after {
|
|
951
|
+
@include clay-css(map-get($_focus, after));
|
|
952
|
+
}
|
|
953
|
+
}
|
|
954
|
+
}
|
|
823
955
|
}
|
|
824
956
|
|
|
825
|
-
|
|
826
|
-
|
|
957
|
+
@if (length($disabled-active) != 0) {
|
|
958
|
+
&:active {
|
|
959
|
+
@include clay-css($disabled-active);
|
|
960
|
+
|
|
961
|
+
&::before {
|
|
962
|
+
@include clay-css(
|
|
963
|
+
map-get($disabled-active, before)
|
|
964
|
+
);
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
&::after {
|
|
968
|
+
@include clay-css(
|
|
969
|
+
map-get($disabled-active, after)
|
|
970
|
+
);
|
|
971
|
+
}
|
|
972
|
+
}
|
|
827
973
|
}
|
|
828
|
-
}
|
|
829
974
|
|
|
830
|
-
|
|
831
|
-
@include clay-css(map-get($disabled, inline-item));
|
|
832
|
-
}
|
|
975
|
+
$_inline-item: map-get($disabled, inline-item);
|
|
833
976
|
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
977
|
+
@if ($_inline-item) {
|
|
978
|
+
.inline-item {
|
|
979
|
+
@include clay-css($_inline-item);
|
|
980
|
+
}
|
|
981
|
+
}
|
|
837
982
|
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
983
|
+
$_inline-item-before: map-get(
|
|
984
|
+
$disabled,
|
|
985
|
+
inline-item-before
|
|
986
|
+
);
|
|
841
987
|
|
|
842
|
-
|
|
843
|
-
|
|
988
|
+
@if ($_inline-item-before) {
|
|
989
|
+
.inline-item-before {
|
|
990
|
+
@include clay-css($_inline-item-before);
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
$_inline-item-middle: map-get(
|
|
995
|
+
$disabled,
|
|
996
|
+
inline-item-middle
|
|
997
|
+
);
|
|
998
|
+
|
|
999
|
+
@if ($_inline-item-middle) {
|
|
1000
|
+
.inline-item-middle {
|
|
1001
|
+
@include clay-css($_inline-item-middle);
|
|
1002
|
+
}
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
$_inline-item-after: map-get($disabled, inline-item-after);
|
|
1006
|
+
|
|
1007
|
+
@if ($_inline-item-after) {
|
|
1008
|
+
.inline-item-after {
|
|
1009
|
+
@include clay-css($_inline-item-after);
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
844
1012
|
}
|
|
845
1013
|
}
|
|
846
1014
|
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
1015
|
+
@if (length($btn-focus) != 0) {
|
|
1016
|
+
&[type] {
|
|
1017
|
+
@at-root {
|
|
1018
|
+
#{$focus-visible-selector},
|
|
1019
|
+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
1020
|
+
@include clay-css($btn-focus);
|
|
1021
|
+
}
|
|
852
1022
|
}
|
|
853
1023
|
}
|
|
854
1024
|
}
|
|
855
1025
|
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
&::before {
|
|
861
|
-
@include clay-css(map-get($show, before));
|
|
862
|
-
}
|
|
1026
|
+
@if (length($show) != 0) {
|
|
1027
|
+
&[aria-expanded='true'],
|
|
1028
|
+
&.show {
|
|
1029
|
+
@include clay-css($show);
|
|
863
1030
|
|
|
864
|
-
|
|
865
|
-
@include clay-css(map-get($show, after));
|
|
866
|
-
}
|
|
1031
|
+
$_before: map-get($show, before);
|
|
867
1032
|
|
|
868
|
-
|
|
869
|
-
|
|
1033
|
+
@if ($_before) {
|
|
1034
|
+
&::before {
|
|
1035
|
+
@include clay-css($_before);
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
870
1038
|
|
|
871
|
-
|
|
1039
|
+
$_after: map-get($show, after);
|
|
872
1040
|
|
|
873
|
-
|
|
874
|
-
|
|
1041
|
+
@if ($_after) {
|
|
1042
|
+
&::after {
|
|
1043
|
+
@include clay-css($_after);
|
|
1044
|
+
}
|
|
875
1045
|
}
|
|
876
1046
|
|
|
877
|
-
|
|
878
|
-
|
|
1047
|
+
$_hover: map-get($show, hover);
|
|
1048
|
+
|
|
1049
|
+
@if ($_hover) {
|
|
1050
|
+
&:hover {
|
|
1051
|
+
@include clay-css($_hover);
|
|
1052
|
+
|
|
1053
|
+
$_before: map-get($_hover, before);
|
|
1054
|
+
|
|
1055
|
+
@if ($_before) {
|
|
1056
|
+
&::before {
|
|
1057
|
+
@include clay-css($_before);
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
$_after: map-get($_hover, after);
|
|
1062
|
+
|
|
1063
|
+
@if ($_after) {
|
|
1064
|
+
&::after {
|
|
1065
|
+
@include clay-css($_after);
|
|
1066
|
+
}
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
879
1069
|
}
|
|
880
|
-
}
|
|
881
1070
|
|
|
882
|
-
|
|
883
|
-
#{$focus-visible-selector},
|
|
884
|
-
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
885
|
-
$_show-focus: setter(map-get($show, focus), ());
|
|
1071
|
+
$_focus: map-get($show, focus);
|
|
886
1072
|
|
|
887
|
-
|
|
1073
|
+
@if ($_focus) {
|
|
1074
|
+
@at-root {
|
|
1075
|
+
#{$focus-visible-selector},
|
|
1076
|
+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
|
|
1077
|
+
@include clay-css($_focus);
|
|
888
1078
|
|
|
889
|
-
|
|
890
|
-
|
|
1079
|
+
$_before: map-get($_focus, before);
|
|
1080
|
+
|
|
1081
|
+
@if ($_before) {
|
|
1082
|
+
&::before {
|
|
1083
|
+
@include clay-css($_before);
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
$_after: map-get($_focus, after);
|
|
1088
|
+
|
|
1089
|
+
@if ($_after) {
|
|
1090
|
+
&::after {
|
|
1091
|
+
@include clay-css($_after);
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
}
|
|
891
1095
|
}
|
|
1096
|
+
}
|
|
892
1097
|
|
|
893
|
-
|
|
894
|
-
|
|
1098
|
+
$_inline-item: map-get($show, inline-item);
|
|
1099
|
+
|
|
1100
|
+
@if ($_inline-item) {
|
|
1101
|
+
.inline-item {
|
|
1102
|
+
@include clay-css($_inline-item);
|
|
895
1103
|
}
|
|
896
1104
|
}
|
|
897
|
-
}
|
|
898
1105
|
|
|
899
|
-
|
|
900
|
-
@include clay-css(map-get($show, inline-item));
|
|
901
|
-
}
|
|
1106
|
+
$_inline-item-before: map-get($show, inline-item-before);
|
|
902
1107
|
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
1108
|
+
@if ($_inline-item-before) {
|
|
1109
|
+
.inline-item-before {
|
|
1110
|
+
@include clay-css($_inline-item-before);
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
906
1113
|
|
|
907
|
-
|
|
908
|
-
@include clay-css(map-get($show, inline-item-middle));
|
|
909
|
-
}
|
|
1114
|
+
$_inline-item-middle: map-get($show, inline-item-middle);
|
|
910
1115
|
|
|
911
|
-
|
|
912
|
-
|
|
1116
|
+
@if ($_inline-item-middle) {
|
|
1117
|
+
.inline-item-middle {
|
|
1118
|
+
@include clay-css($_inline-item-middle);
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
$_inline-item-after: map-get($show, inline-item-after);
|
|
1123
|
+
|
|
1124
|
+
@if ($_inline-item-after) {
|
|
1125
|
+
.inline-item-after {
|
|
1126
|
+
@include clay-css($_inline-item-after);
|
|
1127
|
+
}
|
|
1128
|
+
}
|
|
913
1129
|
}
|
|
914
1130
|
}
|
|
915
1131
|
|
|
916
|
-
|
|
917
|
-
$_collapse-icon: setter(map-get($map, collapse-icon), ());
|
|
1132
|
+
$_collapse-icon: map-get($map, collapse-icon);
|
|
918
1133
|
|
|
919
|
-
|
|
1134
|
+
@if ($_collapse-icon) {
|
|
1135
|
+
&.collapse-icon {
|
|
1136
|
+
@include clay-css($_collapse-icon);
|
|
920
1137
|
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
1138
|
+
$_collapse-icon-closed: map-get(
|
|
1139
|
+
$_collapse-icon,
|
|
1140
|
+
collapse-icon-closed
|
|
924
1141
|
);
|
|
925
|
-
}
|
|
926
1142
|
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
1143
|
+
@if ($_collapse-icon-closed) {
|
|
1144
|
+
.collapse-icon-closed {
|
|
1145
|
+
@include clay-css($_collapse-icon-closed);
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
$_collapse-icon-open: map-get(
|
|
1150
|
+
$_collapse-icon,
|
|
1151
|
+
collapse-icon-open
|
|
930
1152
|
);
|
|
1153
|
+
|
|
1154
|
+
@if ($_collapse-icon-open) {
|
|
1155
|
+
.collapse-icon-open {
|
|
1156
|
+
@include clay-css($_collapse-icon-open);
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
931
1159
|
}
|
|
932
1160
|
}
|
|
933
1161
|
|
|
934
|
-
|
|
935
|
-
$_autofit-row: setter(map-get($map, autofit-row), ());
|
|
1162
|
+
$_autofit-row: map-get($map, autofit-row);
|
|
936
1163
|
|
|
937
|
-
|
|
1164
|
+
@if ($_autofit-row) {
|
|
1165
|
+
.autofit-row {
|
|
1166
|
+
@include clay-css($_autofit-row);
|
|
938
1167
|
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
1168
|
+
$_autofit-col: map-get($_autofit-row, autofit-col);
|
|
1169
|
+
|
|
1170
|
+
@if ($_autofit-col) {
|
|
1171
|
+
.autofit-col {
|
|
1172
|
+
@include clay-css(
|
|
1173
|
+
map-get($_autofit-row, autofit-col)
|
|
1174
|
+
);
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
942
1177
|
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
1178
|
+
$_autofit-col-expand: map-get(
|
|
1179
|
+
$_autofit-row,
|
|
1180
|
+
autofit-col-expand
|
|
946
1181
|
);
|
|
1182
|
+
|
|
1183
|
+
@if ($_autofit-col-expand) {
|
|
1184
|
+
.autofit-col-expand {
|
|
1185
|
+
@include clay-css($_autofit-col-expand);
|
|
1186
|
+
}
|
|
1187
|
+
}
|
|
947
1188
|
}
|
|
948
1189
|
}
|
|
949
1190
|
|
|
@@ -953,34 +1194,53 @@
|
|
|
953
1194
|
}
|
|
954
1195
|
}
|
|
955
1196
|
|
|
956
|
-
|
|
957
|
-
|
|
1197
|
+
$_inline-item: map-get($map, inline-item);
|
|
1198
|
+
|
|
1199
|
+
@if ($_inline-item) {
|
|
1200
|
+
.inline-item {
|
|
1201
|
+
@include clay-css($_inline-item);
|
|
1202
|
+
}
|
|
958
1203
|
}
|
|
959
1204
|
|
|
960
|
-
|
|
961
|
-
|
|
1205
|
+
$_inline-item-before: map-get($map, inline-item-before);
|
|
1206
|
+
|
|
1207
|
+
@if ($_inline-item-before) {
|
|
1208
|
+
.inline-item-before {
|
|
1209
|
+
@include clay-css($_inline-item-before);
|
|
1210
|
+
}
|
|
962
1211
|
}
|
|
963
1212
|
|
|
964
|
-
|
|
965
|
-
@include clay-css(map-get($map, inline-item-middle));
|
|
1213
|
+
$_inline-item-middle: map-get($map, inline-item-middle);
|
|
966
1214
|
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
1215
|
+
@if ($_inline-item-middle) {
|
|
1216
|
+
.inline-item-middle {
|
|
1217
|
+
@include clay-css($_inline-item-middle);
|
|
1218
|
+
|
|
1219
|
+
$_inline-item-middle: map-get(
|
|
1220
|
+
$_inline-item-middle,
|
|
1221
|
+
inline-item-middle
|
|
974
1222
|
);
|
|
1223
|
+
|
|
1224
|
+
@if ($_inline-item-middle) {
|
|
1225
|
+
}
|
|
1226
|
+
+ .inline-item-middle {
|
|
1227
|
+
@include clay-css($_inline-item-middle);
|
|
1228
|
+
}
|
|
975
1229
|
}
|
|
976
1230
|
}
|
|
977
1231
|
|
|
978
|
-
|
|
979
|
-
|
|
1232
|
+
$_inline-item-after: map-get($map, inline-item-after);
|
|
1233
|
+
|
|
1234
|
+
@if ($_inline-item-after) {
|
|
1235
|
+
.inline-item-after {
|
|
1236
|
+
@include clay-css($_inline-item-after);
|
|
1237
|
+
}
|
|
980
1238
|
}
|
|
981
1239
|
|
|
982
|
-
|
|
983
|
-
|
|
1240
|
+
@if (length($lexicon-icon) != 0) {
|
|
1241
|
+
.lexicon-icon {
|
|
1242
|
+
@include clay-css($lexicon-icon);
|
|
1243
|
+
}
|
|
984
1244
|
}
|
|
985
1245
|
|
|
986
1246
|
$c-link-variants: map-get($map, c-link-variants);
|
|
@@ -1029,27 +1289,47 @@
|
|
|
1029
1289
|
$href: setter(map-get($map, href), ());
|
|
1030
1290
|
$href: map-deep-merge($href, $link);
|
|
1031
1291
|
|
|
1032
|
-
@
|
|
1292
|
+
@if (length($map) != 0) {
|
|
1293
|
+
@include clay-css($map);
|
|
1294
|
+
}
|
|
1033
1295
|
|
|
1034
|
-
|
|
1035
|
-
|
|
1296
|
+
$_before: map-get($map, before);
|
|
1297
|
+
|
|
1298
|
+
@if ($_before) {
|
|
1299
|
+
&::before {
|
|
1300
|
+
@include clay-css($_before);
|
|
1301
|
+
}
|
|
1036
1302
|
}
|
|
1037
1303
|
|
|
1038
|
-
|
|
1039
|
-
|
|
1304
|
+
$_after: map-get($map, after);
|
|
1305
|
+
|
|
1306
|
+
@if ($_after) {
|
|
1307
|
+
&::after {
|
|
1308
|
+
@include clay-css($_after);
|
|
1309
|
+
}
|
|
1040
1310
|
}
|
|
1041
1311
|
|
|
1042
|
-
|
|
1043
|
-
|
|
1312
|
+
$_first-child: map-get($map, first-child);
|
|
1313
|
+
|
|
1314
|
+
@if ($_first-child) {
|
|
1315
|
+
&:first-child {
|
|
1316
|
+
@include clay-css($_first-child);
|
|
1317
|
+
}
|
|
1044
1318
|
}
|
|
1045
1319
|
|
|
1046
|
-
|
|
1047
|
-
|
|
1320
|
+
$_last-child: map-get($map, last-child);
|
|
1321
|
+
|
|
1322
|
+
@if ($_last-child) {
|
|
1323
|
+
&:last-child {
|
|
1324
|
+
@include clay-css($_last-child);
|
|
1325
|
+
}
|
|
1048
1326
|
}
|
|
1049
1327
|
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1328
|
+
@if (length($href) != 0) {
|
|
1329
|
+
&[href],
|
|
1330
|
+
a[href] {
|
|
1331
|
+
@include clay-link($href);
|
|
1332
|
+
}
|
|
1053
1333
|
}
|
|
1054
1334
|
}
|
|
1055
1335
|
}
|
|
@@ -1059,5 +1339,7 @@
|
|
|
1059
1339
|
/// @param {Map} $map - A map of `key: value` pairs.
|
|
1060
1340
|
|
|
1061
1341
|
@mixin clay-title($map) {
|
|
1062
|
-
@
|
|
1342
|
+
@if (length($map) != 0) {
|
|
1343
|
+
@include clay-text-typography($map);
|
|
1344
|
+
}
|
|
1063
1345
|
}
|