@clayui/css 3.127.0 → 3.130.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/lib/css/atlas.css +254 -72
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +205 -94
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +238 -74
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/lib/images/icons/send.svg +9 -0
  9. package/lib/images/icons/speed.svg +10 -0
  10. package/lib/images/icons/voice.svg +9 -0
  11. package/package.json +2 -2
  12. package/src/images/icons/send.svg +9 -0
  13. package/src/images/icons/speed.svg +10 -0
  14. package/src/images/icons/voice.svg +9 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_forms.scss +1 -0
  17. package/src/scss/atlas/variables/_globals.scss +2 -0
  18. package/src/scss/cadmin/components/_dropdowns.scss +10 -0
  19. package/src/scss/cadmin/components/_forms.scss +16 -14
  20. package/src/scss/cadmin/components/_grid.scss +3 -1
  21. package/src/scss/cadmin/components/_input-groups.scss +12 -1
  22. package/src/scss/cadmin/components/_type.scss +5 -1
  23. package/src/scss/cadmin/components/_utilities-functional-important.scss +11 -0
  24. package/src/scss/cadmin/variables/_custom-forms.scss +1 -1
  25. package/src/scss/cadmin/variables/_dropdowns.scss +3 -0
  26. package/src/scss/cadmin/variables/_forms.scss +15 -0
  27. package/src/scss/cadmin/variables/_globals.scss +2 -0
  28. package/src/scss/cadmin/variables/_utilities.scss +16 -0
  29. package/src/scss/components/_dropdowns.scss +10 -0
  30. package/src/scss/components/_forms.scss +16 -14
  31. package/src/scss/components/_grid.scss +3 -1
  32. package/src/scss/components/_input-groups.scss +12 -1
  33. package/src/scss/components/_type.scss +5 -1
  34. package/src/scss/components/_utilities-functional-important.scss +8 -0
  35. package/src/scss/functions/_lx-icons-generated.scss +6 -0
  36. package/src/scss/mixins/_alerts.scss +104 -48
  37. package/src/scss/mixins/_badges.scss +75 -33
  38. package/src/scss/mixins/_buttons.scss +503 -225
  39. package/src/scss/mixins/_cards.scss +619 -277
  40. package/src/scss/mixins/_close.scss +42 -24
  41. package/src/scss/mixins/_custom-forms.scss +864 -581
  42. package/src/scss/mixins/_dropdown-menu.scss +466 -223
  43. package/src/scss/mixins/_forms.scss +0 -13
  44. package/src/scss/mixins/_links.scss +564 -282
  45. package/src/scss/variables/_custom-forms.scss +1 -1
  46. package/src/scss/variables/_dropdowns.scss +3 -0
  47. package/src/scss/variables/_forms.scss +10 -0
  48. package/src/scss/variables/_globals.scss +2 -0
  49. package/src/scss/variables/_utilities.scss +16 -0
@@ -550,400 +550,641 @@
550
550
  );
551
551
 
552
552
  @if ($enabled) {
553
- @include clay-css($base);
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
- &:link {
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(map-get($_link, before));
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
- &:visited {
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(map-get($_visited, after));
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
- &:hover,
624
- &.hover {
625
- @include clay-css($hover);
573
+ $_link: map-get($map, link);
626
574
 
627
- &::before {
628
- @include clay-css(map-get($hover, before));
629
- }
575
+ @if ($_link) {
576
+ &:link {
577
+ @include clay-css($_link);
630
578
 
631
- &::after {
632
- @include clay-css(map-get($hover, after));
633
- }
579
+ &::before {
580
+ @include clay-css(map-get($_link, before));
581
+ }
634
582
 
635
- .inline-item {
636
- @include clay-css(map-get($hover, inline-item));
637
- }
583
+ &::after {
584
+ @include clay-css(map-get($_link, after));
585
+ }
638
586
 
639
- .inline-item-before {
640
- @include clay-css(map-get($hover, inline-item-before));
641
- }
587
+ .inline-item {
588
+ @include clay-css(map-get($_link, inline-item));
589
+ }
642
590
 
643
- .inline-item-middle {
644
- @include clay-css(map-get($hover, inline-item-middle));
645
- }
591
+ .inline-item-before {
592
+ @include clay-css(map-get($_link, inline-item-before));
593
+ }
646
594
 
647
- .inline-item-after {
648
- @include clay-css(map-get($hover, inline-item-after));
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
- @at-root {
653
- &.focus,
654
- #{$focus-visible-selector},
655
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
656
- @include clay-css($focus);
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($focus, before));
612
+ @include clay-css(map-get($_visited, before));
660
613
  }
661
614
 
662
615
  &::after {
663
- @include clay-css(map-get($focus, after));
616
+ @include clay-css(map-get($_visited, after));
664
617
  }
665
618
 
666
619
  .inline-item {
667
- @include clay-css(map-get($focus, inline-item));
620
+ @include clay-css(map-get($_visited, inline-item));
668
621
  }
669
622
 
670
623
  .inline-item-before {
671
- @include clay-css(map-get($focus, inline-item-before));
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(map-get($focus, inline-item-middle));
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(map-get($focus, inline-item-after));
636
+ @include clay-css(
637
+ map-get($_visited, inline-item-after)
638
+ );
680
639
  }
681
640
  }
682
641
  }
683
642
 
684
- &:active {
685
- @include clay-css($active);
643
+ @if (length($hover) != 0) {
644
+ &:hover,
645
+ &.hover {
646
+ @include clay-css($hover);
686
647
 
687
- &::before {
688
- @include clay-css(map-get($active, before));
689
- }
648
+ $_before: map-get($hover, before);
690
649
 
691
- &::after {
692
- @include clay-css(map-get($active, after));
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
- $_active-focus: setter(map-get($active, focus), ());
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
- @include clay-css($_active-focus);
766
+ $_before: map-get($active, before);
701
767
 
768
+ @if ($_before) {
702
769
  &::before {
703
- @include clay-css(map-get($_active-focus, before));
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(map-get($_active-focus, after));
778
+ @include clay-css($_after);
708
779
  }
709
780
  }
710
- }
711
781
 
712
- .inline-item {
713
- @include clay-css(map-get($active, inline-item));
714
- }
782
+ $_focus: map-get($active, focus);
715
783
 
716
- .inline-item-before {
717
- @include clay-css(map-get($active, inline-item-before));
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
- .inline-item-middle {
721
- @include clay-css(map-get($active, inline-item-middle));
722
- }
790
+ &::before {
791
+ @include clay-css(map-get($_focus, before));
792
+ }
723
793
 
724
- .inline-item-after {
725
- @include clay-css(map-get($active, inline-item-after));
726
- }
727
- }
794
+ &::after {
795
+ @include clay-css(map-get($_focus, after));
796
+ }
797
+ }
798
+ }
799
+ }
728
800
 
729
- &.active {
730
- @include clay-css($active-class);
801
+ $_inline-item: map-get($active, inline-item);
731
802
 
732
- &::before {
733
- @include clay-css(map-get($active-class, before));
734
- }
803
+ @if ($_inline-item) {
804
+ .inline-item {
805
+ @include clay-css($_inline-item);
806
+ }
807
+ }
735
808
 
736
- &::after {
737
- @include clay-css(map-get($active-class, after));
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
- @at-root {
741
- #{$focus-visible-selector},
742
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
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
- @include clay-css($_active-class-focus);
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
- .inline-item {
765
- @include clay-css(map-get($active-class, inline-item));
766
- }
855
+ $_focus: map-get($active-class, focus);
767
856
 
768
- .inline-item-before {
769
- @include clay-css(
770
- map-get($active-class, inline-item-before)
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
- .inline-item-middle {
775
- @include clay-css(
776
- map-get($active-class, inline-item-middle)
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
- .inline-item-after {
781
- @include clay-css(
782
- map-get($active-class, inline-item-after)
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
- &:disabled,
788
- &.disabled {
789
- @include clay-css($disabled);
898
+ @if ($_inline-item-middle) {
899
+ .inline-item-middle {
900
+ @include clay-css($_inline-item-middle);
901
+ }
902
+ }
790
903
 
791
- &::before {
792
- @include clay-css(map-get($disabled, before));
793
- }
904
+ $_inline-item-after: map-get(
905
+ $active-class,
906
+ inline-item-after
907
+ );
794
908
 
795
- &::after {
796
- @include clay-css(map-get($disabled, after));
909
+ @if ($_inline-item-after) {
910
+ .inline-item-after {
911
+ @include clay-css($_inline-item-after);
912
+ }
913
+ }
797
914
  }
915
+ }
798
916
 
799
- @at-root {
800
- #{$focus-visible-selector},
801
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
802
- $_disabled-focus: setter(map-get($disabled, focus), ());
917
+ @if (length($disabled) != 0) {
918
+ &:disabled,
919
+ &.disabled {
920
+ @include clay-css($disabled);
803
921
 
804
- @include clay-css($_disabled-focus);
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(map-get($_disabled-focus, after));
934
+ @include clay-css($_after);
814
935
  }
815
936
  }
816
- }
817
937
 
818
- &:active {
819
- @include clay-css($disabled-active);
938
+ $_focus: map-get($disabled, focus);
820
939
 
821
- &::before {
822
- @include clay-css(map-get($disabled-active, before));
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
- &::after {
826
- @include clay-css(map-get($disabled-active, after));
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
- .inline-item {
831
- @include clay-css(map-get($disabled, inline-item));
832
- }
975
+ $_inline-item: map-get($disabled, inline-item);
833
976
 
834
- .inline-item-before {
835
- @include clay-css(map-get($disabled, inline-item-before));
836
- }
977
+ @if ($_inline-item) {
978
+ .inline-item {
979
+ @include clay-css($_inline-item);
980
+ }
981
+ }
837
982
 
838
- .inline-item-middle {
839
- @include clay-css(map-get($disabled, inline-item-middle));
840
- }
983
+ $_inline-item-before: map-get(
984
+ $disabled,
985
+ inline-item-before
986
+ );
841
987
 
842
- .inline-item-after {
843
- @include clay-css(map-get($disabled, inline-item-after));
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
- &[type] {
848
- @at-root {
849
- #{$focus-visible-selector},
850
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
851
- @include clay-css($btn-focus);
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
- &[aria-expanded='true'],
857
- &.show {
858
- @include clay-css($show);
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
- &::after {
865
- @include clay-css(map-get($show, after));
866
- }
1031
+ $_before: map-get($show, before);
867
1032
 
868
- &:hover {
869
- $_show-hover: setter(map-get($show, hover), ());
1033
+ @if ($_before) {
1034
+ &::before {
1035
+ @include clay-css($_before);
1036
+ }
1037
+ }
870
1038
 
871
- @include clay-css($_show-hover);
1039
+ $_after: map-get($show, after);
872
1040
 
873
- &::before {
874
- @include clay-css(map-get($_show-hover, before));
1041
+ @if ($_after) {
1042
+ &::after {
1043
+ @include clay-css($_after);
1044
+ }
875
1045
  }
876
1046
 
877
- &::after {
878
- @include clay-css(map-get($_show-hover, after));
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
- @at-root {
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
- @include clay-css($_show-focus);
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
- &::before {
890
- @include clay-css(map-get($_show-focus, before));
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
- &::after {
894
- @include clay-css(map-get($_show-focus, after));
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
- .inline-item {
900
- @include clay-css(map-get($show, inline-item));
901
- }
1106
+ $_inline-item-before: map-get($show, inline-item-before);
902
1107
 
903
- .inline-item-before {
904
- @include clay-css(map-get($show, inline-item-before));
905
- }
1108
+ @if ($_inline-item-before) {
1109
+ .inline-item-before {
1110
+ @include clay-css($_inline-item-before);
1111
+ }
1112
+ }
906
1113
 
907
- .inline-item-middle {
908
- @include clay-css(map-get($show, inline-item-middle));
909
- }
1114
+ $_inline-item-middle: map-get($show, inline-item-middle);
910
1115
 
911
- .inline-item-after {
912
- @include clay-css(map-get($show, inline-item-after));
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
- &.collapse-icon {
917
- $_collapse-icon: setter(map-get($map, collapse-icon), ());
1132
+ $_collapse-icon: map-get($map, collapse-icon);
918
1133
 
919
- @include clay-css($_collapse-icon);
1134
+ @if ($_collapse-icon) {
1135
+ &.collapse-icon {
1136
+ @include clay-css($_collapse-icon);
920
1137
 
921
- .collapse-icon-closed {
922
- @include clay-css(
923
- map-get($_collapse-icon, collapse-icon-closed)
1138
+ $_collapse-icon-closed: map-get(
1139
+ $_collapse-icon,
1140
+ collapse-icon-closed
924
1141
  );
925
- }
926
1142
 
927
- .collapse-icon-open {
928
- @include clay-css(
929
- map-get($_collapse-icon, collapse-icon-open)
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
- .autofit-row {
935
- $_autofit-row: setter(map-get($map, autofit-row), ());
1162
+ $_autofit-row: map-get($map, autofit-row);
936
1163
 
937
- @include clay-css($_autofit-row);
1164
+ @if ($_autofit-row) {
1165
+ .autofit-row {
1166
+ @include clay-css($_autofit-row);
938
1167
 
939
- .autofit-col {
940
- @include clay-css(map-get($_autofit-row, autofit-col));
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
- .autofit-col-expand {
944
- @include clay-css(
945
- map-get($_autofit-row, autofit-col-expand)
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
- .inline-item {
957
- @include clay-css(map-get($map, inline-item));
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
- .inline-item-before {
961
- @include clay-css(map-get($map, inline-item-before));
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
- .inline-item-middle {
965
- @include clay-css(map-get($map, inline-item-middle));
1213
+ $_inline-item-middle: map-get($map, inline-item-middle);
966
1214
 
967
- + .inline-item-middle {
968
- @include clay-css(
969
- map-deep-get(
970
- $map,
971
- inline-item-middle,
972
- inline-item-middle
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
- .inline-item-after {
979
- @include clay-css(map-get($map, inline-item-after));
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
- .lexicon-icon {
983
- @include clay-css($lexicon-icon);
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
- @include clay-css($map);
1292
+ @if (length($map) != 0) {
1293
+ @include clay-css($map);
1294
+ }
1033
1295
 
1034
- &::before {
1035
- @include clay-css(map-get($map, before));
1296
+ $_before: map-get($map, before);
1297
+
1298
+ @if ($_before) {
1299
+ &::before {
1300
+ @include clay-css($_before);
1301
+ }
1036
1302
  }
1037
1303
 
1038
- &::after {
1039
- @include clay-css(map-get($map, after));
1304
+ $_after: map-get($map, after);
1305
+
1306
+ @if ($_after) {
1307
+ &::after {
1308
+ @include clay-css($_after);
1309
+ }
1040
1310
  }
1041
1311
 
1042
- &:first-child {
1043
- @include clay-css(map-get($map, first-child));
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
- &:last-child {
1047
- @include clay-css(map-get($map, last-child));
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
- &[href],
1051
- a[href] {
1052
- @include clay-link($href);
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
- @include clay-text-typography($map);
1342
+ @if (length($map) != 0) {
1343
+ @include clay-text-typography($map);
1344
+ }
1063
1345
  }