@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.
Files changed (24) hide show
  1. package/lib/css/atlas.css +207 -48
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +159 -64
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +188 -50
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/atlas/variables/_globals.scss +2 -0
  11. package/src/scss/cadmin/components/_grid.scss +3 -1
  12. package/src/scss/cadmin/variables/_dropdowns.scss +3 -0
  13. package/src/scss/cadmin/variables/_globals.scss +2 -0
  14. package/src/scss/components/_grid.scss +3 -1
  15. package/src/scss/mixins/_alerts.scss +104 -48
  16. package/src/scss/mixins/_badges.scss +75 -33
  17. package/src/scss/mixins/_buttons.scss +503 -225
  18. package/src/scss/mixins/_cards.scss +619 -277
  19. package/src/scss/mixins/_close.scss +42 -24
  20. package/src/scss/mixins/_custom-forms.scss +864 -581
  21. package/src/scss/mixins/_dropdown-menu.scss +466 -223
  22. package/src/scss/mixins/_links.scss +564 -282
  23. package/src/scss/variables/_dropdowns.scss +3 -0
  24. package/src/scss/variables/_globals.scss +2 -0
package/src/scss/mixins/_buttons.scss CHANGED
@@ -594,7 +594,9 @@
594
594
  );
595
595
 
596
596
  @if ($enabled) {
597
- @include clay-css($base);
597
+ @if (length($base) != 0) {
598
+ @include clay-css($base);
599
+ }
598
600
 
599
601
  @if ($breakpoint-down) {
600
602
  @include media-breakpoint-down($breakpoint-down) {
@@ -608,314 +610,567 @@
608
610
  }
609
611
  }
610
612
 
611
- &::before {
612
- @include clay-css(map-get($map, before));
613
- }
614
-
615
- &::after {
616
- @include clay-css(map-get($map, after));
617
- }
618
-
619
- &:link {
620
- $_link: setter(map-get($map, link), ());
621
-
622
- @include clay-css($_link);
613
+ $_before: map-get($map, before);
623
614
 
615
+ @if ($_before) {
624
616
  &::before {
625
- @include clay-css(map-get($_link, before));
617
+ @include clay-css($_before);
626
618
  }
619
+ }
627
620
 
621
+ $_after: map-get($map, after);
622
+
623
+ @if ($_after) {
628
624
  &::after {
629
- @include clay-css(map-get($_link, after));
625
+ @include clay-css($_after);
630
626
  }
627
+ }
631
628
 
632
- .inline-item {
633
- @include clay-css(map-get($_link, inline-item));
634
- }
629
+ $_link: map-get($map, link);
635
630
 
636
- .inline-item-before {
637
- @include clay-css(map-get($_link, inline-item-before));
638
- }
631
+ @if ($_link) {
632
+ &:link {
633
+ @include clay-css($_link);
639
634
 
640
- .inline-item-middle {
641
- @include clay-css(map-get($_link, inline-item-middle));
642
- }
635
+ $_before: map-get($_link, before);
643
636
 
644
- .inline-item-after {
645
- @include clay-css(map-get($_link, inline-item-after));
646
- }
647
- }
637
+ @if ($_before) {
638
+ &::before {
639
+ @include clay-css($_before);
640
+ }
641
+ }
648
642
 
649
- &:visited {
650
- $_visited: setter(map-get($map, visited), ());
643
+ $_after: map-get($_link, after);
651
644
 
652
- @include clay-css($_visited);
645
+ @if ($_after) {
646
+ &::after {
647
+ @include clay-css($_after);
648
+ }
649
+ }
653
650
 
654
- &::before {
655
- @include clay-css(map-get($_visited, before));
656
- }
651
+ $_inline-item: map-get($_link, inline-item);
657
652
 
658
- &::after {
659
- @include clay-css(map-get($_visited, after));
660
- }
653
+ @if ($_inline-item) {
654
+ .inline-item {
655
+ @include clay-css($_inline-item);
656
+ }
657
+ }
661
658
 
662
- .inline-item {
663
- @include clay-css(map-get($_visited, inline-item));
664
- }
659
+ $_inline-item-before: map-get($_link, inline-item-before);
665
660
 
666
- .inline-item-before {
667
- @include clay-css(map-get($_visited, inline-item-before));
668
- }
661
+ @if ($_inline-item-before) {
662
+ .inline-item-before {
663
+ @include clay-css($_inline-item-before);
664
+ }
665
+ }
669
666
 
670
- .inline-item-middle {
671
- @include clay-css(map-get($_visited, inline-item-middle));
672
- }
667
+ $_inline-item-middle: map-get($_link, inline-item-middle);
673
668
 
674
- .inline-item-after {
675
- @include clay-css(map-get($_visited, inline-item-after));
669
+ @if ($_inline-item-middle) {
670
+ .inline-item-middle {
671
+ @include clay-css($_inline-item-middle);
672
+ }
673
+ }
674
+
675
+ $_inline-item-after: map-get($_link, inline-item-after);
676
+
677
+ @if ($_inline-item-after) {
678
+ .inline-item-after {
679
+ @include clay-css($_inline-item-after);
680
+ }
681
+ }
676
682
  }
677
683
  }
678
684
 
679
- &:hover {
680
- @include clay-css($hover);
685
+ $_visited: map-get($map, visited);
681
686
 
682
- &::before {
683
- @include clay-css(map-deep-get($map, hover, before));
684
- }
687
+ @if ($_visited) {
688
+ &:visited {
689
+ @include clay-css($_visited);
685
690
 
686
- &::after {
687
- @include clay-css(map-deep-get($map, hover, after));
688
- }
691
+ $_before: map-get($_visited, before);
689
692
 
690
- .inline-item {
691
- @include clay-css(map-get($hover, inline-item));
692
- }
693
+ @if ($_before) {
694
+ &::before {
695
+ @include clay-css($_before);
696
+ }
697
+ }
693
698
 
694
- .inline-item-before {
695
- @include clay-css(map-get($hover, inline-item-before));
696
- }
699
+ $_after: map-get($_visited, after);
697
700
 
698
- .inline-item-middle {
699
- @include clay-css(map-get($hover, inline-item-middle));
700
- }
701
+ @if ($_after) {
702
+ &::after {
703
+ @include clay-css($_after);
704
+ }
705
+ }
701
706
 
702
- .inline-item-after {
703
- @include clay-css(map-get($hover, inline-item-after));
704
- }
705
- }
707
+ $_inline-item: map-get($_visited, inline-item);
708
+
709
+ @if ($_inline-item) {
710
+ .inline-item {
711
+ @include clay-css($_inline-item);
712
+ }
713
+ }
714
+
715
+ $_inline-item-before: map-get(
716
+ $_visited,
717
+ inline-item-before
718
+ );
706
719
 
707
- @at-root {
708
- &.focus,
709
- #{$focus-visible-selector},
710
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
711
- @include clay-css($focus);
720
+ @if ($_inline-item-before) {
721
+ .inline-item-before {
722
+ @include clay-css($_inline-item-before);
723
+ }
724
+ }
712
725
 
713
- &::before {
714
- @include clay-css(map-deep-get($map, focus, before));
726
+ $_inline-item-middle: map-get(
727
+ $_visited,
728
+ inline-item-middle
729
+ );
730
+
731
+ @if ($_inline-item-middle) {
732
+ .inline-item-middle {
733
+ @include clay-css($_inline-item-middle);
734
+ }
715
735
  }
716
736
 
717
- &::after {
718
- @include clay-css(map-deep-get($map, focus, after));
737
+ $_inline-item-after: map-get($_visited, inline-item-after);
738
+
739
+ @if ($_inline-item-after) {
740
+ .inline-item-after {
741
+ @include clay-css($_inline-item-after);
742
+ }
719
743
  }
744
+ }
745
+ }
720
746
 
721
- &:hover {
722
- @include clay-css(map-deep-get($map, focus, hover));
747
+ @if (length($hover) != 0) {
748
+ &:hover {
749
+ @include clay-css($hover);
723
750
 
751
+ $_before: map-get($hover, before);
752
+
753
+ @if ($_before) {
724
754
  &::before {
725
- @include clay-css(
726
- map-deep-get($map, focus, hover, before)
727
- );
755
+ @include clay-css($_before);
728
756
  }
757
+ }
758
+
759
+ $_after: map-get($hover, after);
729
760
 
761
+ @if ($_after) {
730
762
  &::after {
731
- @include clay-css(
732
- map-deep-get($map, focus, hover, after)
733
- );
763
+ @include clay-css($_after);
734
764
  }
735
765
  }
736
766
 
737
- .inline-item {
738
- @include clay-css(map-get($focus, inline-item));
767
+ $_inline-item: map-get($hover, inline-item);
768
+
769
+ @if ($_inline-item) {
770
+ .inline-item {
771
+ @include clay-css($_inline-item);
772
+ }
739
773
  }
740
774
 
741
- .inline-item-before {
742
- @include clay-css(map-get($focus, inline-item-before));
775
+ $_inline-item-before: map-get($hover, inline-item-before);
776
+
777
+ @if ($_inline-item-before) {
778
+ .inline-item-before {
779
+ @include clay-css($_inline-item-before);
780
+ }
743
781
  }
744
782
 
745
- .inline-item-middle {
746
- @include clay-css(map-get($focus, inline-item-middle));
783
+ $_inline-item-middle: map-get($hover, inline-item-middle);
784
+
785
+ @if ($_inline-item-middle) {
786
+ .inline-item-middle {
787
+ @include clay-css($_inline-item-middle);
788
+ }
747
789
  }
748
790
 
749
- .inline-item-after {
750
- @include clay-css(map-get($focus, inline-item-after));
791
+ $_inline-item-after: map-get($hover, inline-item-after);
792
+
793
+ @if ($_inline-item-after) {
794
+ .inline-item-after {
795
+ @include clay-css($_inline-item-after);
796
+ }
751
797
  }
752
798
  }
753
799
  }
754
800
 
755
- &:active {
756
- @include clay-css($active);
801
+ @if (length($focus) != 0) {
802
+ @at-root {
803
+ &.focus,
804
+ #{$focus-visible-selector},
805
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
806
+ @include clay-css($focus);
757
807
 
758
- &::before {
759
- @include clay-css(map-deep-get($map, active, before));
760
- }
808
+ $_before: map-get($focus, before);
761
809
 
762
- &::after {
763
- @include clay-css(map-deep-get($map, active, after));
810
+ @if ($_before) {
811
+ &::before {
812
+ @include clay-css($_before);
813
+ }
814
+ }
815
+
816
+ $_after: map-get($focus, after);
817
+
818
+ @if ($_after) {
819
+ &::after {
820
+ @include clay-css($_after);
821
+ }
822
+ }
823
+
824
+ $_hover: map-get($focus, hover);
825
+
826
+ @if ($_hover) {
827
+ &:hover {
828
+ @include clay-css($_hover);
829
+
830
+ $_before: map-get($_hover, before);
831
+
832
+ @if ($_before) {
833
+ &::before {
834
+ @include clay-css($_before);
835
+ }
836
+ }
837
+
838
+ $_after: map-get($_hover, after);
839
+
840
+ @if ($_after) {
841
+ &::after {
842
+ @include clay-css($_after);
843
+ }
844
+ }
845
+ }
846
+ }
847
+
848
+ $_inline-item: map-get($focus, inline-item);
849
+
850
+ @if ($_inline-item) {
851
+ .inline-item {
852
+ @include clay-css($_inline-item);
853
+ }
854
+ }
855
+
856
+ $_inline-item-before: map-get(
857
+ $focus,
858
+ inline-item-before
859
+ );
860
+
861
+ @if ($_inline-item-before) {
862
+ .inline-item-before {
863
+ @include clay-css($_inline-item-before);
864
+ }
865
+ }
866
+
867
+ $_inline-item-middle: map-get(
868
+ $focus,
869
+ inline-item-middle
870
+ );
871
+
872
+ @if ($_inline-item-middle) {
873
+ .inline-item-middle {
874
+ @include clay-css($_inline-item-middle);
875
+ }
876
+ }
877
+
878
+ $_inline-item-after: map-get($focus, inline-item-after);
879
+
880
+ @if ($_inline-item-after) {
881
+ .inline-item-after {
882
+ @include clay-css($_inline-item-after);
883
+ }
884
+ }
885
+ }
764
886
  }
887
+ }
765
888
 
766
- @at-root {
767
- #{$focus-visible-selector},
768
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
769
- @include clay-css($active-focus);
889
+ @if (length($active) != 0) {
890
+ &:active {
891
+ @include clay-css($active);
892
+
893
+ $_before: map-get($active, before);
770
894
 
895
+ @if ($_before) {
771
896
  &::before {
772
- @include clay-css(
773
- map-deep-get($map, active, focus, before)
774
- );
897
+ @include clay-css($_before);
775
898
  }
899
+ }
900
+
901
+ $_after: map-get($active, after);
776
902
 
903
+ @if ($_after) {
777
904
  &::after {
778
- @include clay-css(
779
- map-deep-get($map, active, focus, after)
780
- );
905
+ @include clay-css($_after);
781
906
  }
782
907
  }
783
- }
784
908
 
785
- .inline-item {
786
- @include clay-css(map-get($active, inline-item));
787
- }
909
+ $_focus: map-get($active, focus);
788
910
 
789
- .inline-item-before {
790
- @include clay-css(map-get($active, inline-item-before));
791
- }
911
+ @if ($_focus) {
912
+ @at-root {
913
+ #{$focus-visible-selector},
914
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
915
+ @include clay-css($_focus);
792
916
 
793
- .inline-item-middle {
794
- @include clay-css(map-get($active, inline-item-middle));
795
- }
917
+ $_before: map-get($_focus, before);
796
918
 
797
- .inline-item-after {
798
- @include clay-css(map-get($active, inline-item-after));
919
+ @if ($_before) {
920
+ &::before {
921
+ @include clay-css($_before);
922
+ }
923
+ }
924
+
925
+ $_after: map-get($_focus, after);
926
+
927
+ @if ($_after) {
928
+ &::after {
929
+ @include clay-css($_after);
930
+ }
931
+ }
932
+ }
933
+ }
934
+ }
935
+
936
+ $_inline-item: map-get($active, inline-item);
937
+
938
+ @if ($_inline-item) {
939
+ .inline-item {
940
+ @include clay-css($_inline-item);
941
+ }
942
+ }
943
+
944
+ $_inline-item-before: map-get($active, inline-item-before);
945
+
946
+ @if ($_inline-item-before) {
947
+ .inline-item-before {
948
+ @include clay-css($_inline-item-before);
949
+ }
950
+ }
951
+
952
+ $_inline-item-middle: map-get($active, inline-item-middle);
953
+
954
+ @if ($_inline-item-middle) {
955
+ .inline-item-middle {
956
+ @include clay-css($_inline-item-middle);
957
+ }
958
+ }
959
+
960
+ $_inline-item-after: map-get($active, inline-item-after);
961
+
962
+ @if ($_inline-item-after) {
963
+ .inline-item-after {
964
+ @include clay-css($_inline-item-after);
965
+ }
966
+ }
799
967
  }
800
968
  }
801
969
 
802
- &.active {
803
- @include clay-css($active-class);
970
+ @if (length($active-class) != 0) {
971
+ &.active {
972
+ @include clay-css($active-class);
804
973
 
805
- &::before {
806
- @include clay-css(map-deep-get($map, active-class, before));
807
- }
974
+ $_before: map-get($active-class, before);
808
975
 
809
- &::after {
810
- @include clay-css(map-get($map, active-class-after));
811
- }
976
+ @if ($_before) {
977
+ &::before {
978
+ @include clay-css($_before);
979
+ }
980
+ }
812
981
 
813
- @at-root {
814
- #{$focus-visible-selector},
815
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
816
- @include clay-css(
817
- map-deep-get($map, active-class, focus)
818
- );
982
+ $_after: map-get($active-class, after);
983
+
984
+ @if ($_after) {
985
+ &::after {
986
+ @include clay-css($_after);
987
+ }
819
988
  }
820
- }
821
989
 
822
- .inline-item {
823
- @include clay-css(map-get($active-class, inline-item));
824
- }
990
+ $_focus: map-get($active-class, focus);
825
991
 
826
- .inline-item-before {
827
- @include clay-css(
828
- map-get($active-class, inline-item-before)
829
- );
830
- }
992
+ @if ($_focus) {
993
+ @at-root {
994
+ #{$focus-visible-selector},
995
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
996
+ @include clay-css($_focus);
997
+ }
998
+ }
999
+ }
831
1000
 
832
- .inline-item-middle {
833
- @include clay-css(
834
- map-get($active-class, inline-item-middle)
1001
+ $_inline-item: map-get($active-class, inline-item);
1002
+
1003
+ @if ($_inline-item) {
1004
+ .inline-item {
1005
+ @include clay-css($_inline-item);
1006
+ }
1007
+ }
1008
+
1009
+ $_inline-item-before: map-get(
1010
+ $active-class,
1011
+ inline-item-before
835
1012
  );
836
- }
837
1013
 
838
- .inline-item-after {
839
- @include clay-css(
840
- map-get($active-class, inline-item-after)
1014
+ @if ($_inline-item-before) {
1015
+ .inline-item-before {
1016
+ @include clay-css($_inline-item-before);
1017
+ }
1018
+ }
1019
+
1020
+ $_inline-item-middle: map-get(
1021
+ $active-class,
1022
+ inline-item-middle
841
1023
  );
842
- }
843
- }
844
1024
 
845
- &:disabled,
846
- &.disabled {
847
- @include clay-css($disabled);
1025
+ @if ($_inline-item-middle) {
1026
+ .inline-item-middle {
1027
+ @include clay-css($_inline-item-middle);
1028
+ }
1029
+ }
848
1030
 
849
- &::before {
850
- @include clay-css(map-deep-get($map, disabled, before));
851
- }
1031
+ $_inline-item-after: map-get(
1032
+ $active-class,
1033
+ inline-item-after
1034
+ );
852
1035
 
853
- &::after {
854
- @include clay-css(map-deep-get($map, disabled, after));
1036
+ @if ($_inline-item-after) {
1037
+ .inline-item-after {
1038
+ @include clay-css($_inline-item-after);
1039
+ }
1040
+ }
855
1041
  }
1042
+ }
856
1043
 
857
- @at-root {
858
- #{$focus-visible-selector},
859
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
860
- @include clay-css(map-get($disabled, focus));
1044
+ @if (length($disabled) != 0) {
1045
+ &:disabled,
1046
+ &.disabled {
1047
+ @include clay-css($disabled);
1048
+
1049
+ $_before: map-get($disabled, before);
861
1050
 
1051
+ @if ($_before) {
862
1052
  &::before {
863
- @include clay-css(
864
- map-deep-get($map, disabled, focus, before)
865
- );
1053
+ @include clay-css($_before);
866
1054
  }
1055
+ }
1056
+
1057
+ $_after: map-get($disabled, after);
867
1058
 
1059
+ @if ($_after) {
868
1060
  &::after {
869
- @include clay-css(
870
- map-deep-get($map, disabled, focus, after)
871
- );
1061
+ @include clay-css($_after);
872
1062
  }
873
1063
  }
874
- }
875
1064
 
876
- &:active {
877
- @include clay-css($disabled-active);
1065
+ $_focus: map-get($disabled, focus);
878
1066
 
879
- &::before {
880
- @include clay-css(
881
- map-deep-get($map, disabled, active, before)
882
- );
1067
+ @if ($_focus) {
1068
+ @at-root {
1069
+ #{$focus-visible-selector},
1070
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
1071
+ @include clay-css($_focus);
1072
+
1073
+ $_before: map-get($_focus, before);
1074
+
1075
+ @if ($_before) {
1076
+ &::before {
1077
+ @include clay-css($_before);
1078
+ }
1079
+ }
1080
+
1081
+ $_after: map-get($_focus, after);
1082
+
1083
+ @if ($_after) {
1084
+ &::after {
1085
+ @include clay-css($_after);
1086
+ }
1087
+ }
1088
+ }
1089
+ }
883
1090
  }
884
1091
 
885
- &::after {
886
- @include clay-css(
887
- map-deep-get($map, disabled, active, after)
888
- );
1092
+ @if (length($disabled-active) != 0) {
1093
+ &:active {
1094
+ @include clay-css($disabled-active);
1095
+
1096
+ $_before: map-get($disabled-active, before);
1097
+
1098
+ @if ($_before) {
1099
+ &::before {
1100
+ @include clay-css($_before);
1101
+ }
1102
+ }
1103
+
1104
+ $_after: map-get($disabled-active, after);
1105
+
1106
+ @if ($_after) {
1107
+ &::after {
1108
+ @include clay-css($_after);
1109
+ }
1110
+ }
1111
+ }
889
1112
  }
890
- }
891
1113
 
892
- .inline-item {
893
- @include clay-css(map-get($disabled, inline-item));
894
- }
1114
+ $_inline-item: map-get($disabled, inline-item);
895
1115
 
896
- .inline-item-before {
897
- @include clay-css(map-get($disabled, inline-item-before));
898
- }
1116
+ @if ($_inline-item) {
1117
+ .inline-item {
1118
+ @include clay-css($_inline-item);
1119
+ }
1120
+ }
899
1121
 
900
- .inline-item-middle {
901
- @include clay-css(map-get($disabled, inline-item-middle));
902
- }
1122
+ $_inline-item-before: map-get(
1123
+ $disabled,
1124
+ inline-item-before
1125
+ );
903
1126
 
904
- .inline-item-after {
905
- @include clay-css(map-get($disabled, inline-item-after));
1127
+ @if ($_inline-item-before) {
1128
+ .inline-item-before {
1129
+ @include clay-css($_inline-item-before);
1130
+ }
1131
+ }
1132
+
1133
+ $_inline-item-middle: map-get(
1134
+ $disabled,
1135
+ inline-item-middle
1136
+ );
1137
+
1138
+ @if ($_inline-item-middle) {
1139
+ .inline-item-middle {
1140
+ @include clay-css($_inline-item-middle);
1141
+ }
1142
+ }
1143
+
1144
+ $_inline-item-after: map-get($disabled, inline-item-after);
1145
+
1146
+ @if ($_inline-item-after) {
1147
+ .inline-item-after {
1148
+ @include clay-css($_inline-item-after);
1149
+ }
1150
+ }
906
1151
  }
907
1152
  }
908
1153
 
909
- &[aria-expanded='true'],
910
- &.show {
911
- @include clay-css($show);
1154
+ @if (length($show) != 0) {
1155
+ &[aria-expanded='true'],
1156
+ &.show {
1157
+ @include clay-css($show);
912
1158
 
913
- &::before {
914
- @include clay-css(map-deep-get($map, show, before));
915
- }
1159
+ $_before: map-get($show, before);
916
1160
 
917
- &::after {
918
- @include clay-css(map-deep-get($map, show, after));
1161
+ @if ($_before) {
1162
+ &::before {
1163
+ @include clay-css($_before);
1164
+ }
1165
+ }
1166
+
1167
+ $_after: map-get($show, after);
1168
+
1169
+ @if ($_after) {
1170
+ &::after {
1171
+ @include clay-css($_after);
1172
+ }
1173
+ }
919
1174
  }
920
1175
  }
921
1176
 
@@ -925,42 +1180,65 @@
925
1180
  }
926
1181
  }
927
1182
 
928
- .lexicon-icon {
929
- @include clay-css($lexicon-icon);
1183
+ @if (length($lexicon-icon) != 0) {
1184
+ .lexicon-icon {
1185
+ @include clay-css($lexicon-icon);
1186
+ }
930
1187
  }
931
1188
 
932
- .inline-item {
933
- @include clay-css($inline-item);
1189
+ @if (length($inline-item) != 0) {
1190
+ .inline-item {
1191
+ @include clay-css($inline-item);
934
1192
 
935
- .lexicon-icon {
936
- @include clay-css(map-get($inline-item, lexicon-icon));
1193
+ $_lexicon-icon: map-get($inline-item, lexicon-icon);
1194
+
1195
+ @if ($_lexicon-icon) {
1196
+ .lexicon-icon {
1197
+ @include clay-css($_lexicon-icon);
1198
+ }
1199
+ }
937
1200
  }
938
1201
  }
939
1202
 
940
- .inline-item-before {
941
- @include clay-css(map-get($map, inline-item-before));
1203
+ $_inline-item-before: map-get($map, inline-item-before);
1204
+
1205
+ @if ($_inline-item-before) {
1206
+ .inline-item-before {
1207
+ @include clay-css($_inline-item-before);
1208
+ }
942
1209
  }
943
1210
 
944
- .inline-item-middle {
945
- @include clay-css(map-get($map, inline-item-middle));
1211
+ $_inline-item-middle: map-get($map, inline-item-middle);
946
1212
 
947
- + .inline-item-middle {
948
- @include clay-css(
949
- map-deep-get(
950
- $map,
951
- inline-item-middle,
952
- inline-item-middle
953
- )
1213
+ @if ($_inline-item-middle) {
1214
+ .inline-item-middle {
1215
+ @include clay-css($_inline-item-middle);
1216
+
1217
+ $_inline-item-middle: map-get(
1218
+ $_inline-item-middle,
1219
+ inline-item-middle
954
1220
  );
1221
+
1222
+ @if ($_inline-item-middle) {
1223
+ + .inline-item-middle {
1224
+ @include clay-css($_inline-item-middle);
1225
+ }
1226
+ }
955
1227
  }
956
1228
  }
957
1229
 
958
- .inline-item-after {
959
- @include clay-css(map-get($map, inline-item-after));
1230
+ $_inline-item-after: map-get($map, inline-item-after);
1231
+
1232
+ @if ($_inline-item-after) {
1233
+ .inline-item-after {
1234
+ @include clay-css($_inline-item-after);
1235
+ }
960
1236
  }
961
1237
 
962
- .btn-section {
963
- @include clay-css($section);
1238
+ @if (length($section) != 0) {
1239
+ .btn-section {
1240
+ @include clay-css($section);
1241
+ }
964
1242
  }
965
1243
 
966
1244
  .loading-animation {