@clayui/css 3.133.0 → 3.135.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 (42) hide show
  1. package/lib/css/atlas.css +92 -32
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +93 -32
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +39 -33
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/flags-en-IE.svg +12 -0
  8. package/lib/images/icons/flags-en-LV.svg +11 -0
  9. package/lib/images/icons/flags-my-MM.svg +13 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/flags-en-IE.svg +12 -0
  13. package/src/images/icons/flags-en-LV.svg +11 -0
  14. package/src/images/icons/flags-my-MM.svg +13 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_labels.scss +1 -0
  17. package/src/scss/atlas/variables/_modals.scss +1 -0
  18. package/src/scss/cadmin/variables/_labels.scss +4 -5
  19. package/src/scss/cadmin/variables/_modals.scss +18 -2
  20. package/src/scss/cadmin/variables/_utilities.scss +7 -0
  21. package/src/scss/functions/_lx-icons-generated.scss +6 -0
  22. package/src/scss/mixins/_forms.scss +690 -432
  23. package/src/scss/mixins/_input-groups.scss +222 -107
  24. package/src/scss/mixins/_labels.scss +100 -48
  25. package/src/scss/mixins/_menubar.scss +131 -60
  26. package/src/scss/mixins/_modals.scss +36 -20
  27. package/src/scss/mixins/_nav.scss +86 -34
  28. package/src/scss/mixins/_navbar.scss +436 -270
  29. package/src/scss/mixins/_pagination.scss +241 -151
  30. package/src/scss/mixins/_panels.scss +86 -51
  31. package/src/scss/mixins/_popovers.scss +82 -32
  32. package/src/scss/mixins/_sheet.scss +19 -7
  33. package/src/scss/mixins/_sidebar.scss +195 -89
  34. package/src/scss/mixins/_slideout.scss +96 -46
  35. package/src/scss/mixins/_stickers.scss +86 -39
  36. package/src/scss/mixins/_tables.scss +527 -308
  37. package/src/scss/mixins/_tbar.scss +165 -87
  38. package/src/scss/mixins/_toggle-switch.scss +705 -380
  39. package/src/scss/mixins/_tooltip.scss +53 -21
  40. package/src/scss/variables/_labels.scss +4 -5
  41. package/src/scss/variables/_modals.scss +18 -2
  42. package/src/scss/variables/_utilities.scss +6 -0
package/src/scss/mixins/_toggle-switch.scss CHANGED
@@ -66,89 +66,149 @@
66
66
  $enabled: setter(map-get($map, enabled), true);
67
67
 
68
68
  @if ($enabled) {
69
- @include clay-css($map);
70
-
71
- &::before {
72
- @include clay-css(map-get($map, before));
73
- }
74
-
75
- &::after {
76
- @include clay-css(map-get($map, after));
69
+ @if (length($map) != 0) {
70
+ @include clay-css($map);
77
71
  }
78
72
 
79
- .toggle-switch-handle {
80
- @include clay-css(map-get($map, toggle-switch-handle));
73
+ $_before: map-get($map, before);
81
74
 
75
+ @if ($_before) {
82
76
  &::before {
83
- @include clay-css(
84
- map-deep-get($map, toggle-switch-handle, before)
85
- );
77
+ @include clay-css($_before);
86
78
  }
79
+ }
80
+
81
+ $_after: map-get($map, after);
87
82
 
83
+ @if ($_after) {
88
84
  &::after {
89
- @include clay-css(
90
- map-deep-get($map, toggle-switch-handle, after)
91
- );
85
+ @include clay-css($_after);
92
86
  }
93
87
  }
94
88
 
95
- .toggle-switch-icon {
96
- @include clay-css(map-get($map, toggle-switch-icon));
89
+ $_toggle-switch-handle: map-get($map, toggle-switch-handle);
97
90
 
98
- .lexicon-icon {
99
- @include clay-css(
100
- map-deep-get($map, toggle-switch-icon, lexicon-icon)
101
- );
91
+ @if ($_toggle-switch-handle) {
92
+ .toggle-switch-handle {
93
+ @include clay-css($_toggle-switch-handle);
94
+
95
+ $_before: map-get($_toggle-switch-handle, before);
96
+
97
+ @if ($_before) {
98
+ &::before {
99
+ @include clay-css($_before);
100
+ }
101
+ }
102
+
103
+ $_after: map-get($_toggle-switch-handle, after);
104
+
105
+ @if ($_after) {
106
+ &::after {
107
+ @include clay-css($_after);
108
+ }
109
+ }
102
110
  }
103
111
  }
104
112
 
105
- .toggle-switch-icon-on {
106
- @include clay-css(map-get($map, toggle-switch-icon-on));
113
+ $_toggle-switch-icon: map-get($map, toggle-switch-icon);
107
114
 
108
- .lexicon-icon {
109
- @include clay-css(
110
- map-deep-get($map, toggle-switch-icon-on, lexicon-icon)
111
- );
115
+ @if ($_toggle-switch-icon) {
116
+ .toggle-switch-icon {
117
+ @include clay-css($_toggle-switch-icon);
118
+
119
+ $_lexicon-icon: map-get($_toggle-switch-icon, lexicon-icon);
120
+
121
+ @if ($_lexicon-icon) {
122
+ .lexicon-icon {
123
+ @include clay-css($_lexicon-icon);
124
+ }
125
+ }
112
126
  }
113
127
  }
114
128
 
115
- .toggle-switch-icon-off {
116
- @include clay-css(map-get($map, toggle-switch-icon-off));
129
+ $_toggle-switch-icon-on: map-get($map, toggle-switch-icon-on);
130
+
131
+ @if ($_toggle-switch-icon-on) {
132
+ .toggle-switch-icon-on {
133
+ @include clay-css($_toggle-switch-icon-on);
117
134
 
118
- .lexicon-icon {
119
- @include clay-css(
120
- map-deep-get($map, toggle-switch-icon-off, lexicon-icon)
135
+ $_lexicon-icon: map-get(
136
+ $_toggle-switch-icon-on,
137
+ lexicon-icon
121
138
  );
139
+
140
+ @if ($_lexicon-icon) {
141
+ .lexicon-icon {
142
+ @include clay-css($_lexicon-icon);
143
+ }
144
+ }
122
145
  }
123
146
  }
124
147
 
125
- .button-icon {
126
- @include clay-css(map-get($map, button-icon));
148
+ $_toggle-switch-icon-off: map-get($map, toggle-switch-icon-off);
127
149
 
128
- .lexicon-icon {
129
- @include clay-css(
130
- map-deep-get($map, button-icon, lexicon-icon)
150
+ @if ($_toggle-switch-icon-off) {
151
+ .toggle-switch-icon-off {
152
+ @include clay-css($_toggle-switch-icon-off);
153
+
154
+ $_lexicon-icon: map-get(
155
+ $_toggle-switch-icon-off,
156
+ lexicon-icon
131
157
  );
158
+
159
+ @if ($_lexicon-icon) {
160
+ .lexicon-icon {
161
+ @include clay-css($_lexicon-icon);
162
+ }
163
+ }
132
164
  }
133
165
  }
134
166
 
135
- .button-icon-on {
136
- @include clay-css(map-get($map, button-icon-on));
167
+ $_button-icon: map-get($map, button-icon);
137
168
 
138
- .lexicon-icon {
139
- @include clay-css(
140
- map-deep-get($map, button-icon-on, lexicon-icon)
141
- );
169
+ @if ($_button-icon) {
170
+ .button-icon {
171
+ @include clay-css($_button-icon);
172
+
173
+ $_lexicon-icon: map-get($_button-icon, lexicon-icon);
174
+
175
+ @if ($_lexicon-icon) {
176
+ .lexicon-icon {
177
+ @include clay-css($_lexicon-icon);
178
+ }
179
+ }
142
180
  }
143
181
  }
144
182
 
145
- .button-icon-off {
146
- @include clay-css(map-get($map, button-icon-off));
183
+ $_button-icon-on: map-get($map, button-icon-on);
147
184
 
148
- .lexicon-icon {
149
- @include clay-css(
150
- map-deep-get($map, button-icon-off, lexicon-icon)
151
- );
185
+ @if ($_button-icon-on) {
186
+ .button-icon-on {
187
+ @include clay-css($_button-icon-on);
188
+
189
+ $_lexicon-icon: map-get($_button-icon-on, lexicon-icon);
190
+
191
+ @if ($_lexicon-icon) {
192
+ .lexicon-icon {
193
+ @include clay-css($_lexicon-icon);
194
+ }
195
+ }
196
+ }
197
+ }
198
+
199
+ $_button-icon-off: map-get($map, button-icon-off);
200
+
201
+ @if ($_button-icon-off) {
202
+ .button-icon-off {
203
+ @include clay-css($_button-icon-off);
204
+
205
+ $_lexicon-icon: map-get($_button-icon-off, lexicon-icon);
206
+
207
+ @if ($_lexicon-icon) {
208
+ .lexicon-icon {
209
+ @include clay-css($_lexicon-icon);
210
+ }
211
+ }
152
212
  }
153
213
  }
154
214
  }
@@ -646,307 +706,488 @@
646
706
  $breakpoint-down: setter(map-get($map, breakpoint-down), sm);
647
707
  $enabled: setter(map-get($map, enabled), true);
648
708
 
649
- @include clay-css($map);
650
-
651
709
  @if ($enabled) {
652
- ~ .toggle-switch-bar {
653
- @include clay-toggle-switch-bar-variant(
654
- map-get($map, toggle-switch-bar)
655
- );
656
- }
657
-
658
- &:hover ~ .toggle-switch-bar {
659
- @include clay-toggle-switch-bar-variant(
660
- map-deep-get($map, hover, toggle-switch-bar)
661
- );
662
- }
663
-
664
- @at-root {
665
- #{$focus-visible-selector},
666
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
667
- ~ .toggle-switch-bar {
668
- @include clay-toggle-switch-bar-variant(
669
- map-deep-get($map, focus, toggle-switch-bar)
670
- );
671
- }
672
- }
673
- }
674
-
675
- &:active ~ .toggle-switch-bar {
676
- @include clay-toggle-switch-bar-variant(
677
- map-deep-get($map, active, toggle-switch-bar)
678
- );
679
- }
680
-
681
- &[disabled] ~ .toggle-switch-bar,
682
- &:disabled ~ .toggle-switch-bar {
683
- @include clay-toggle-switch-bar-variant(
684
- map-deep-get($map, disabled, toggle-switch-bar)
685
- );
686
- }
687
-
688
- &:checked ~ .toggle-switch-bar {
689
- @include clay-toggle-switch-bar-variant(
690
- map-deep-get($map, checked, toggle-switch-bar)
691
- );
692
- }
693
-
694
- &:checked:hover ~ .toggle-switch-bar {
695
- @include clay-toggle-switch-bar-variant(
696
- map-deep-get($map, checked, hover, toggle-switch-bar)
697
- );
698
- }
699
-
700
- @at-root {
701
- &:checked {
702
- #{$focus-visible-selector},
703
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
704
- ~ .toggle-switch-bar {
705
- @include clay-toggle-switch-bar-variant(
706
- map-deep-get(
707
- $map,
708
- checked,
709
- focus,
710
- toggle-switch-bar
711
- )
712
- );
713
- }
714
- }
715
- }
716
- }
717
-
718
- &:checked:active ~ .toggle-switch-bar {
719
- @include clay-toggle-switch-bar-variant(
720
- map-deep-get($map, checked, active, toggle-switch-bar)
721
- );
722
- }
723
-
724
- &:checked[disabled] ~ .toggle-switch-bar,
725
- &:checked:disabled ~ .toggle-switch-bar {
726
- @include clay-toggle-switch-bar-variant(
727
- map-deep-get($map, checked, disabled, toggle-switch-bar)
728
- );
729
- }
730
-
731
- &:indeterminate ~ .toggle-switch-bar {
732
- @include clay-toggle-switch-bar-variant(
733
- map-deep-get($map, indeterminate, toggle-switch-bar)
734
- );
735
- }
736
-
737
- &:indeterminate:hover ~ .toggle-switch-bar {
738
- @include clay-toggle-switch-bar-variant(
739
- map-deep-get($map, indeterminate, hover, toggle-switch-bar)
740
- );
741
- }
742
-
743
- @at-root {
744
- &:indeterminate {
745
- #{$focus-visible-selector},
746
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
747
- ~ .toggle-switch-bar {
748
- @include clay-toggle-switch-bar-variant(
749
- map-deep-get(
750
- $map,
751
- indeterminate,
752
- focus,
753
- toggle-switch-bar
754
- )
755
- );
756
- }
757
- }
758
- }
710
+ @if (length($map) != 0) {
711
+ @include clay-css($map);
759
712
  }
760
713
 
761
- &:indeterminate:active ~ .toggle-switch-bar {
762
- @include clay-toggle-switch-bar-variant(
763
- map-deep-get($map, indeterminate, active, toggle-switch-bar)
764
- );
765
- }
766
-
767
- &:indeterminate[disabled] ~ .toggle-switch-bar,
768
- &:indeterminate:disabled ~ .toggle-switch-bar {
769
- @include clay-toggle-switch-bar-variant(
770
- map-deep-get(
771
- $map,
772
- indeterminate,
773
- disabled,
774
- toggle-switch-bar
775
- )
776
- );
777
- }
778
-
779
- @include media-breakpoint-down($breakpoint-down) {
780
- @include clay-css(map-get($map, mobile));
714
+ $_toggle-switch-bar: map-get($map, toggle-switch-bar);
781
715
 
716
+ @if ($_toggle-switch-bar) {
782
717
  ~ .toggle-switch-bar {
783
718
  @include clay-toggle-switch-bar-variant(
784
- map-deep-get($map, mobile, toggle-switch-bar)
719
+ $_toggle-switch-bar
785
720
  );
786
721
  }
722
+ }
723
+
724
+ $_hover-toggle-switch-bar: map-deep-get(
725
+ $map,
726
+ hover,
727
+ toggle-switch-bar
728
+ );
787
729
 
730
+ @if ($_hover-toggle-switch-bar) {
788
731
  &:hover ~ .toggle-switch-bar {
789
732
  @include clay-toggle-switch-bar-variant(
790
- map-deep-get($map, mobile, hover, toggle-switch-bar)
733
+ $_hover-toggle-switch-bar
791
734
  );
792
735
  }
736
+ }
737
+
738
+ $_focus-toggle-switch-bar: map-deep-get(
739
+ $map,
740
+ focus,
741
+ toggle-switch-bar
742
+ );
793
743
 
744
+ @if ($_focus-toggle-switch-bar) {
794
745
  @at-root {
795
746
  #{$focus-visible-selector},
796
747
  #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
797
748
  ~ .toggle-switch-bar {
798
749
  @include clay-toggle-switch-bar-variant(
799
- map-deep-get(
800
- $map,
801
- mobile,
802
- focus,
803
- toggle-switch-bar
804
- )
750
+ $_focus-toggle-switch-bar
805
751
  );
806
752
  }
807
753
  }
808
754
  }
755
+ }
756
+
757
+ $_active-toggle-switch-bar: map-deep-get(
758
+ $map,
759
+ active,
760
+ toggle-switch-bar
761
+ );
809
762
 
763
+ @if ($_active-toggle-switch-bar) {
810
764
  &:active ~ .toggle-switch-bar {
811
765
  @include clay-toggle-switch-bar-variant(
812
- map-deep-get($map, mobile, active, toggle-switch-bar)
766
+ $_active-toggle-switch-bar
813
767
  );
814
768
  }
769
+ }
770
+
771
+ $_disabled-toggle-switch-bar: map-deep-get(
772
+ $map,
773
+ disabled,
774
+ toggle-switch-bar
775
+ );
815
776
 
777
+ @if ($_disabled-toggle-switch-bar) {
816
778
  &[disabled] ~ .toggle-switch-bar,
817
779
  &:disabled ~ .toggle-switch-bar {
818
780
  @include clay-toggle-switch-bar-variant(
819
- map-deep-get($map, mobile, disabled, toggle-switch-bar)
781
+ $_disabled-toggle-switch-bar
820
782
  );
821
783
  }
784
+ }
785
+
786
+ $_checked-toggle-switch-bar: map-deep-get(
787
+ $map,
788
+ checked,
789
+ toggle-switch-bar
790
+ );
822
791
 
792
+ @if ($_checked-toggle-switch-bar) {
823
793
  &:checked ~ .toggle-switch-bar {
824
794
  @include clay-toggle-switch-bar-variant(
825
- map-deep-get($map, mobile, checked, toggle-switch-bar)
795
+ $_checked-toggle-switch-bar
826
796
  );
827
797
  }
798
+ }
799
+
800
+ $_checked-hover-toggle-switch-bar: map-deep-get(
801
+ $map,
802
+ checked,
803
+ hover,
804
+ toggle-switch-bar
805
+ );
828
806
 
807
+ @if ($_checked-hover-toggle-switch-bar) {
829
808
  &:checked:hover ~ .toggle-switch-bar {
830
809
  @include clay-toggle-switch-bar-variant(
831
- map-deep-get(
832
- $map,
833
- mobile,
834
- checked,
835
- hover,
836
- toggle-switch-bar
837
- )
810
+ $_checked-hover-toggle-switch-bar
838
811
  );
839
812
  }
813
+ }
840
814
 
815
+ $_checked-focus-toggle-switch-bar: map-deep-get(
816
+ $map,
817
+ checked,
818
+ focus,
819
+ toggle-switch-bar
820
+ );
821
+
822
+ @if ($_checked-focus-toggle-switch-bar) {
841
823
  @at-root {
842
824
  &:checked {
843
825
  #{$focus-visible-selector},
844
826
  #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
845
827
  ~ .toggle-switch-bar {
846
828
  @include clay-toggle-switch-bar-variant(
847
- map-deep-get(
848
- $map,
849
- mobile,
850
- checked,
851
- focus,
852
- toggle-switch-bar
853
- )
829
+ $_checked-focus-toggle-switch-bar
854
830
  );
855
831
  }
856
832
  }
857
833
  }
858
834
  }
835
+ }
859
836
 
837
+ $_checked-active-toggle-switch-bar: map-deep-get(
838
+ $map,
839
+ checked,
840
+ active,
841
+ toggle-switch-bar
842
+ );
843
+
844
+ @if ($_checked-active-toggle-switch-bar) {
860
845
  &:checked:active ~ .toggle-switch-bar {
861
846
  @include clay-toggle-switch-bar-variant(
862
- map-deep-get(
863
- $map,
864
- mobile,
865
- checked,
866
- active,
867
- toggle-switch-bar
868
- )
847
+ $_checked-active-toggle-switch-bar
869
848
  );
870
849
  }
850
+ }
871
851
 
852
+ $_checked-disabled-toggle-switch-bar: map-deep-get(
853
+ $map,
854
+ checked,
855
+ disabled,
856
+ toggle-switch-bar
857
+ );
858
+
859
+ @if ($_checked-disabled-toggle-switch-bar) {
872
860
  &:checked[disabled] ~ .toggle-switch-bar,
873
861
  &:checked:disabled ~ .toggle-switch-bar {
874
862
  @include clay-toggle-switch-bar-variant(
875
- map-deep-get(
876
- $map,
877
- mobile,
878
- checked,
879
- disabled,
880
- toggle-switch-bar
881
- )
863
+ $_checked-disabled-toggle-switch-bar
882
864
  );
883
865
  }
866
+ }
884
867
 
868
+ $_indeterminate-toggle-switch-bar: map-deep-get(
869
+ $map,
870
+ indeterminate,
871
+ toggle-switch-bar
872
+ );
873
+
874
+ @if ($_indeterminate-toggle-switch-bar) {
885
875
  &:indeterminate ~ .toggle-switch-bar {
886
876
  @include clay-toggle-switch-bar-variant(
887
- map-deep-get(
888
- $map,
889
- mobile,
890
- indeterminate,
891
- toggle-switch-bar
892
- )
877
+ $_indeterminate-toggle-switch-bar
893
878
  );
894
879
  }
880
+ }
895
881
 
882
+ $_indeterminate-hover-toggle-switch-bar: map-deep-get(
883
+ $map,
884
+ indeterminate,
885
+ hover,
886
+ toggle-switch-bar
887
+ );
888
+
889
+ @if ($_indeterminate-hover-toggle-switch-bar) {
896
890
  &:indeterminate:hover ~ .toggle-switch-bar {
897
891
  @include clay-toggle-switch-bar-variant(
898
- map-deep-get(
899
- $map,
900
- mobile,
901
- indeterminate,
902
- hover,
903
- toggle-switch-bar
904
- )
892
+ $_indeterminate-hover-toggle-switch-bar
905
893
  );
906
894
  }
895
+ }
907
896
 
897
+ $_indeterminate-focus-toggle-switch-bar: map-deep-get(
898
+ $map,
899
+ indeterminate,
900
+ focus,
901
+ toggle-switch-bar
902
+ );
903
+
904
+ @if ($_indeterminate-focus-toggle-switch-bar) {
908
905
  @at-root {
909
906
  &:indeterminate {
910
907
  #{$focus-visible-selector},
911
908
  #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
912
909
  ~ .toggle-switch-bar {
913
910
  @include clay-toggle-switch-bar-variant(
914
- map-deep-get(
915
- $map,
916
- mobile,
917
- indeterminate,
918
- focus,
919
- toggle-switch-bar
920
- )
911
+ $_indeterminate-focus-toggle-switch-bar
921
912
  );
922
913
  }
923
914
  }
924
915
  }
925
916
  }
917
+ }
926
918
 
919
+ $_indeterminate-active-toggle-switch-bar: map-deep-get(
920
+ $map,
921
+ indeterminate,
922
+ active,
923
+ toggle-switch-bar
924
+ );
925
+
926
+ @if ($_indeterminate-active-toggle-switch-bar) {
927
927
  &:indeterminate:active ~ .toggle-switch-bar {
928
928
  @include clay-toggle-switch-bar-variant(
929
- map-deep-get(
930
- $map,
931
- mobile,
932
- indeterminate,
933
- active,
934
- toggle-switch-bar
935
- )
929
+ $_indeterminate-active-toggle-switch-bar
936
930
  );
937
931
  }
932
+ }
938
933
 
934
+ $_indeterminate-disabled-toggle-switch-bar: map-deep-get(
935
+ $map,
936
+ indeterminate,
937
+ disabled,
938
+ toggle-switch-bar
939
+ );
940
+
941
+ @if ($_indeterminate-disabled-toggle-switch-bar) {
939
942
  &:indeterminate[disabled] ~ .toggle-switch-bar,
940
943
  &:indeterminate:disabled ~ .toggle-switch-bar {
941
944
  @include clay-toggle-switch-bar-variant(
942
- map-deep-get(
943
- $map,
944
- mobile,
945
- indeterminate,
946
- disabled,
947
- toggle-switch-bar
948
- )
945
+ $_indeterminate-disabled-toggle-switch-bar
946
+ );
947
+ }
948
+ }
949
+
950
+ @include media-breakpoint-down($breakpoint-down) {
951
+ $_mobile: map-get($map, mobile);
952
+
953
+ @if ($_mobile) {
954
+ @include clay-css($_mobile);
955
+
956
+ $_toggle-switch-bar: map-get($_mobile, toggle-switch-bar);
957
+
958
+ @if ($_toggle-switch-bar) {
959
+ ~ .toggle-switch-bar {
960
+ @include clay-toggle-switch-bar-variant(
961
+ $_toggle-switch-bar
962
+ );
963
+ }
964
+ }
965
+
966
+ $_hover-toggle-switch-bar: map-deep-get(
967
+ $_mobile,
968
+ hover,
969
+ toggle-switch-bar
970
+ );
971
+
972
+ @if ($_hover-toggle-switch-bar) {
973
+ &:hover ~ .toggle-switch-bar {
974
+ @include clay-toggle-switch-bar-variant(
975
+ $_hover-toggle-switch-bar
976
+ );
977
+ }
978
+ }
979
+
980
+ $_focus-toggle-switch-bar: map-deep-get(
981
+ $_mobile,
982
+ focus,
983
+ toggle-switch-bar
984
+ );
985
+
986
+ @if ($_focus-toggle-switch-bar) {
987
+ @at-root {
988
+ #{$focus-visible-selector},
989
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
990
+ ~ .toggle-switch-bar {
991
+ @include clay-toggle-switch-bar-variant(
992
+ $_focus-toggle-switch-bar
993
+ );
994
+ }
995
+ }
996
+ }
997
+ }
998
+
999
+ $_active-toggle-switch-bar: map-deep-get(
1000
+ $_mobile,
1001
+ active,
1002
+ toggle-switch-bar
1003
+ );
1004
+
1005
+ @if ($_active-toggle-switch-bar) {
1006
+ &:active ~ .toggle-switch-bar {
1007
+ @include clay-toggle-switch-bar-variant(
1008
+ $_active-toggle-switch-bar
1009
+ );
1010
+ }
1011
+ }
1012
+
1013
+ $_disabled-toggle-switch-bar: map-deep-get(
1014
+ $_mobile,
1015
+ disabled,
1016
+ toggle-switch-bar
1017
+ );
1018
+
1019
+ @if ($_disabled-toggle-switch-bar) {
1020
+ &[disabled] ~ .toggle-switch-bar,
1021
+ &:disabled ~ .toggle-switch-bar {
1022
+ @include clay-toggle-switch-bar-variant(
1023
+ $_disabled-toggle-switch-bar
1024
+ );
1025
+ }
1026
+ }
1027
+
1028
+ $_checked-toggle-switch-bar: map-deep-get(
1029
+ $_mobile,
1030
+ checked,
1031
+ toggle-switch-bar
1032
+ );
1033
+
1034
+ @if ($_checked-toggle-switch-bar) {
1035
+ &:checked ~ .toggle-switch-bar {
1036
+ @include clay-toggle-switch-bar-variant(
1037
+ $_checked-toggle-switch-bar
1038
+ );
1039
+ }
1040
+ }
1041
+
1042
+ $_checked-hover-toggle-switch-bar: map-deep-get(
1043
+ $_mobile,
1044
+ checked,
1045
+ hover,
1046
+ toggle-switch-bar
1047
+ );
1048
+
1049
+ @if ($_checked-hover-toggle-switch-bar) {
1050
+ &:checked:hover ~ .toggle-switch-bar {
1051
+ @include clay-toggle-switch-bar-variant(
1052
+ $_checked-hover-toggle-switch-bar
1053
+ );
1054
+ }
1055
+ }
1056
+
1057
+ $_checked-focus-toggle-switch-bar: map-deep-get(
1058
+ $_mobile,
1059
+ checked,
1060
+ focus,
1061
+ toggle-switch-bar
949
1062
  );
1063
+
1064
+ @if ($_checked-focus-toggle-switch-bar) {
1065
+ @at-root {
1066
+ &:checked {
1067
+ #{$focus-visible-selector},
1068
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
1069
+ ~ .toggle-switch-bar {
1070
+ @include clay-toggle-switch-bar-variant(
1071
+ $_checked-focus-toggle-switch-bar
1072
+ );
1073
+ }
1074
+ }
1075
+ }
1076
+ }
1077
+ }
1078
+
1079
+ $_checked-active-toggle-switch-bar: map-deep-get(
1080
+ $_mobile,
1081
+ checked,
1082
+ active,
1083
+ toggle-switch-bar
1084
+ );
1085
+
1086
+ @if ($_checked-active-toggle-switch-bar) {
1087
+ &:checked:active ~ .toggle-switch-bar {
1088
+ @include clay-toggle-switch-bar-variant(
1089
+ $_checked-active-toggle-switch-bar
1090
+ );
1091
+ }
1092
+ }
1093
+
1094
+ $_checked-disabled-toggle-switch-bar: map-deep-get(
1095
+ $_mobile,
1096
+ checked,
1097
+ disabled,
1098
+ toggle-switch-bar
1099
+ );
1100
+
1101
+ @if ($_checked-disabled-toggle-switch-bar) {
1102
+ &:checked[disabled] ~ .toggle-switch-bar,
1103
+ &:checked:disabled ~ .toggle-switch-bar {
1104
+ @include clay-toggle-switch-bar-variant(
1105
+ $_checked-disabled-toggle-switch-bar
1106
+ );
1107
+ }
1108
+ }
1109
+
1110
+ $_indeterminate-toggle-switch-bar: map-deep-get(
1111
+ $_mobile,
1112
+ indeterminate,
1113
+ toggle-switch-bar
1114
+ );
1115
+
1116
+ @if ($_indeterminate-toggle-switch-bar) {
1117
+ &:indeterminate ~ .toggle-switch-bar {
1118
+ @include clay-toggle-switch-bar-variant(
1119
+ $_indeterminate-toggle-switch-bar
1120
+ );
1121
+ }
1122
+ }
1123
+
1124
+ $_indeterminate-hover-toggle-switch-bar: map-deep-get(
1125
+ $_mobile,
1126
+ indeterminate,
1127
+ hover,
1128
+ toggle-switch-bar
1129
+ );
1130
+
1131
+ @if ($_indeterminate-hover-toggle-switch-bar) {
1132
+ &:indeterminate:hover ~ .toggle-switch-bar {
1133
+ @include clay-toggle-switch-bar-variant(
1134
+ $_indeterminate-hover-toggle-switch-bar
1135
+ );
1136
+ }
1137
+ }
1138
+
1139
+ $_indeterminate-focus-toggle-switch-bar: map-deep-get(
1140
+ $_mobile,
1141
+ indeterminate,
1142
+ focus,
1143
+ toggle-switch-bar
1144
+ );
1145
+
1146
+ @if ($_indeterminate-focus-toggle-switch-bar) {
1147
+ @at-root {
1148
+ &:indeterminate {
1149
+ #{$focus-visible-selector},
1150
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
1151
+ ~ .toggle-switch-bar {
1152
+ @include clay-toggle-switch-bar-variant(
1153
+ $_indeterminate-focus-toggle-switch-bar
1154
+ );
1155
+ }
1156
+ }
1157
+ }
1158
+ }
1159
+ }
1160
+
1161
+ $_indeterminate-active-toggle-switch-bar: map-deep-get(
1162
+ $_mobile,
1163
+ indeterminate,
1164
+ active,
1165
+ toggle-switch-bar
1166
+ );
1167
+
1168
+ @if ($_indeterminate-active-toggle-switch-bar) {
1169
+ &:indeterminate:active ~ .toggle-switch-bar {
1170
+ @include clay-toggle-switch-bar-variant(
1171
+ $_indeterminate-active-toggle-switch-bar
1172
+ );
1173
+ }
1174
+ }
1175
+
1176
+ $_indeterminate-disabled-toggle-switch-bar: map-deep-get(
1177
+ $_mobile,
1178
+ indeterminate,
1179
+ disabled,
1180
+ toggle-switch-bar
1181
+ );
1182
+
1183
+ @if ($_indeterminate-disabled-toggle-switch-bar) {
1184
+ &:indeterminate[disabled] ~ .toggle-switch-bar,
1185
+ &:indeterminate:disabled ~ .toggle-switch-bar {
1186
+ @include clay-toggle-switch-bar-variant(
1187
+ $_indeterminate-disabled-toggle-switch-bar
1188
+ );
1189
+ }
1190
+ }
950
1191
  }
951
1192
  }
952
1193
  }
@@ -1024,182 +1265,266 @@
1024
1265
  $breakpoint-down: setter(map-get($map, breakpoint-down), sm);
1025
1266
  $enabled: setter(map-get($map, enabled), true);
1026
1267
 
1027
- @include clay-css($map);
1028
-
1029
- .simple-toggle-switch,
1030
- &.simple-toggle-switch {
1031
- @include clay-toggle-switch-variant(
1032
- map-get($map, simple-toggle-switch)
1033
- );
1268
+ @if (length($map) != 0) {
1269
+ @include clay-css($map);
1034
1270
  }
1035
1271
 
1036
- .toggle-switch-check-bar {
1037
- @include clay-css(map-get($map, toggle-switch-check-bar));
1038
-
1039
- &::before {
1040
- @include clay-css(
1041
- map-deep-get($map, toggle-switch-check-bar, before)
1042
- );
1043
- }
1272
+ $_simple-toggle-switch: map-get($map, simple-toggle-switch);
1044
1273
 
1045
- &::after {
1046
- @include clay-css(
1047
- map-deep-get($map, toggle-switch-check-bar, after)
1048
- );
1274
+ @if ($_simple-toggle-switch) {
1275
+ .simple-toggle-switch,
1276
+ &.simple-toggle-switch {
1277
+ @include clay-toggle-switch-variant($_simple-toggle-switch);
1049
1278
  }
1050
1279
  }
1051
1280
 
1052
- .toggle-switch-check {
1053
- @include clay-toggle-switch-check-variant(
1054
- map-get($map, toggle-switch-check)
1055
- );
1056
- }
1281
+ $_toggle-switch-check-bar: map-get($map, toggle-switch-check-bar);
1057
1282
 
1058
- .toggle-switch-label {
1059
- @include clay-css(map-get($map, toggle-switch-label));
1060
- }
1283
+ @if ($_toggle-switch-check-bar) {
1284
+ .toggle-switch-check-bar {
1285
+ @include clay-css($_toggle-switch-check-bar);
1061
1286
 
1062
- .toggle-switch-text {
1063
- @include clay-css(map-get($map, toggle-switch-text));
1064
- }
1287
+ $_before: map-get($_toggle-switch-check-bar, before);
1288
+
1289
+ @if ($_before) {
1290
+ &::before {
1291
+ @include clay-css($_before);
1292
+ }
1293
+ }
1294
+
1295
+ $_after: map-get($_toggle-switch-check-bar, after);
1065
1296
 
1066
- .toggle-switch-text-left {
1067
- @include clay-css(map-get($map, toggle-switch-text-left));
1297
+ @if ($_after) {
1298
+ &::after {
1299
+ @include clay-css($_after);
1300
+ }
1301
+ }
1302
+ }
1068
1303
  }
1069
1304
 
1070
- .toggle-switch-text-right {
1071
- @include clay-css(map-get($map, toggle-switch-text-right));
1305
+ $_toggle-switch-check: map-get($map, toggle-switch-check);
1306
+
1307
+ @if ($_toggle-switch-check) {
1308
+ .toggle-switch-check {
1309
+ @include clay-toggle-switch-check-variant(
1310
+ $_toggle-switch-check
1311
+ );
1312
+ }
1072
1313
  }
1073
1314
 
1074
- &.disabled {
1075
- @include clay-css(map-get($map, disabled));
1315
+ $_toggle-switch-label: map-get($map, toggle-switch-label);
1076
1316
 
1317
+ @if ($_toggle-switch-label) {
1077
1318
  .toggle-switch-label {
1078
- @include clay-css(
1079
- map-deep-get($map, disabled, toggle-switch-label)
1080
- );
1319
+ @include clay-css($_toggle-switch-label);
1081
1320
  }
1321
+ }
1322
+
1323
+ $_toggle-switch-text: map-get($map, toggle-switch-text);
1082
1324
 
1325
+ @if ($_toggle-switch-text) {
1083
1326
  .toggle-switch-text {
1084
- @include clay-css(
1085
- map-deep-get($map, disabled, toggle-switch-text)
1086
- );
1327
+ @include clay-css($_toggle-switch-text);
1087
1328
  }
1329
+ }
1330
+
1331
+ $_toggle-switch-text-left: map-get($map, toggle-switch-text-left);
1088
1332
 
1333
+ @if ($_toggle-switch-text-left) {
1089
1334
  .toggle-switch-text-left {
1090
- @include clay-css(
1091
- map-deep-get($map, disabled, toggle-switch-text-left)
1092
- );
1335
+ @include clay-css($_toggle-switch-text-left);
1093
1336
  }
1337
+ }
1338
+
1339
+ $_toggle-switch-text-right: map-get($map, toggle-switch-text-right);
1094
1340
 
1341
+ @if ($_toggle-switch-text-right) {
1095
1342
  .toggle-switch-text-right {
1096
- @include clay-css(
1097
- map-deep-get($map, disabled, toggle-switch-text-right)
1098
- );
1343
+ @include clay-css($_toggle-switch-text-right);
1099
1344
  }
1100
1345
  }
1101
1346
 
1102
- @include media-breakpoint-down($breakpoint-down) {
1103
- @include clay-css(map-get($map, mobile));
1347
+ $_disabled: map-get($map, disabled);
1104
1348
 
1105
- .toggle-switch-check-bar {
1106
- @include clay-css(
1107
- map-deep-get($map, mobile, toggle-switch-check-bar)
1108
- );
1349
+ @if ($_disabled) {
1350
+ &.disabled {
1351
+ @include clay-css($_disabled);
1109
1352
 
1110
- &::before {
1111
- @include clay-css(
1112
- map-deep-get(
1113
- $map,
1114
- mobile,
1115
- toggle-switch-check-bar,
1116
- before
1117
- )
1118
- );
1353
+ $_toggle-switch-label: map-get($_disabled, toggle-switch-label);
1354
+
1355
+ @if ($_toggle-switch-label) {
1356
+ .toggle-switch-label {
1357
+ @include clay-css($_toggle-switch-label);
1358
+ }
1119
1359
  }
1120
1360
 
1121
- &::after {
1122
- @include clay-css(
1123
- map-deep-get(
1124
- $map,
1125
- mobile,
1126
- toggle-switch-check-bar,
1127
- after
1128
- )
1129
- );
1361
+ $_toggle-switch-text: map-get($_disabled, toggle-switch-text);
1362
+
1363
+ @if ($_toggle-switch-text) {
1364
+ .toggle-switch-text {
1365
+ @include clay-css($_toggle-switch-text);
1366
+ }
1130
1367
  }
1131
- }
1132
1368
 
1133
- .toggle-switch-check {
1134
- @include clay-toggle-switch-check-variant(
1135
- map-deep-get($map, mobile, toggle-switch-check)
1369
+ $_toggle-switch-text-left: map-get(
1370
+ $_disabled,
1371
+ toggle-switch-text-left
1136
1372
  );
1137
- }
1138
1373
 
1139
- .toggle-switch-label {
1140
- @include clay-css(
1141
- map-deep-get($map, mobile, toggle-switch-label)
1142
- );
1143
- }
1374
+ @if ($_toggle-switch-text-left) {
1375
+ .toggle-switch-text-left {
1376
+ @include clay-css($_toggle-switch-text-left);
1377
+ }
1378
+ }
1144
1379
 
1145
- .toggle-switch-text {
1146
- @include clay-css(
1147
- map-deep-get($map, mobile, toggle-switch-text)
1380
+ $_toggle-switch-text-right: map-get(
1381
+ $_disabled,
1382
+ toggle-switch-text-right
1148
1383
  );
1149
- }
1150
1384
 
1151
- .toggle-switch-text-left {
1152
- @include clay-css(
1153
- map-deep-get($map, mobile, toggle-switch-text-left)
1154
- );
1385
+ @if ($_toggle-switch-text-right) {
1386
+ .toggle-switch-text-right {
1387
+ @include clay-css($_toggle-switch-text-right);
1388
+ }
1389
+ }
1155
1390
  }
1391
+ }
1156
1392
 
1157
- .toggle-switch-text-right {
1158
- @include clay-css(
1159
- map-deep-get($map, mobile, toggle-switch-text-right)
1393
+ @include media-breakpoint-down($breakpoint-down) {
1394
+ $_mobile: map-get($map, mobile);
1395
+
1396
+ @if ($_mobile) {
1397
+ @include clay-css($_mobile);
1398
+
1399
+ $_toggle-switch-check-bar: map-get(
1400
+ $_mobile,
1401
+ toggle-switch-check-bar
1160
1402
  );
1161
- }
1162
1403
 
1163
- &.disabled {
1164
- @include clay-css(map-deep-get($map, mobile, disabled));
1165
-
1166
- .toggle-switch-label {
1167
- @include clay-css(
1168
- map-deep-get(
1169
- $map,
1170
- mobile,
1171
- disabled,
1172
- toggle-switch-label
1173
- )
1174
- );
1404
+ @if ($_toggle-switch-check-bar) {
1405
+ .toggle-switch-check-bar {
1406
+ @include clay-css($_toggle-switch-check-bar);
1407
+
1408
+ $_before: map-get($_toggle-switch-check-bar, before);
1409
+
1410
+ @if ($_before) {
1411
+ &::before {
1412
+ @include clay-css($_before);
1413
+ }
1414
+ }
1415
+
1416
+ $_after: map-get($_toggle-switch-check-bar, after);
1417
+
1418
+ @if ($_after) {
1419
+ &::after {
1420
+ @include clay-css($_after);
1421
+ }
1422
+ }
1423
+ }
1175
1424
  }
1176
1425
 
1177
- .toggle-switch-text {
1178
- @include clay-css(
1179
- map-deep-get($map, mobile, disabled, toggle-switch-text)
1180
- );
1426
+ $_toggle-switch-check: map-get($_mobile, toggle-switch-check);
1427
+
1428
+ @if ($_toggle-switch-check) {
1429
+ .toggle-switch-check {
1430
+ @include clay-toggle-switch-check-variant(
1431
+ $_toggle-switch-check
1432
+ );
1433
+ }
1181
1434
  }
1182
1435
 
1183
- .toggle-switch-text-left {
1184
- @include clay-css(
1185
- map-deep-get(
1186
- $map,
1187
- mobile,
1188
- disabled,
1189
- toggle-switch-text-left
1190
- )
1191
- );
1436
+ $_toggle-switch-label: map-get($_mobile, toggle-switch-label);
1437
+
1438
+ @if ($_toggle-switch-label) {
1439
+ .toggle-switch-label {
1440
+ @include clay-css($_toggle-switch-label);
1441
+ }
1192
1442
  }
1193
1443
 
1194
- .toggle-switch-text-right {
1195
- @include clay-css(
1196
- map-deep-get(
1197
- $map,
1198
- mobile,
1199
- disabled,
1200
- toggle-switch-text-right
1201
- )
1202
- );
1444
+ $_toggle-switch-text: map-get($_mobile, toggle-switch-text);
1445
+
1446
+ @if ($_toggle-switch-text) {
1447
+ .toggle-switch-text {
1448
+ @include clay-css($_toggle-switch-text);
1449
+ }
1450
+ }
1451
+
1452
+ $_toggle-switch-text-left: map-get(
1453
+ $_mobile,
1454
+ toggle-switch-text-left
1455
+ );
1456
+
1457
+ @if ($_toggle-switch-text-left) {
1458
+ .toggle-switch-text-left {
1459
+ @include clay-css($_toggle-switch-text-left);
1460
+ }
1461
+ }
1462
+
1463
+ $_toggle-switch-text-right: map-get(
1464
+ $_mobile,
1465
+ toggle-switch-text-right
1466
+ );
1467
+
1468
+ @if ($_toggle-switch-text-right) {
1469
+ .toggle-switch-text-right {
1470
+ @include clay-css($_toggle-switch-text-right);
1471
+ }
1472
+ }
1473
+
1474
+ $_disabled: map-get($_mobile, disabled);
1475
+
1476
+ @if ($_disabled) {
1477
+ &.disabled {
1478
+ @include clay-css($_disabled);
1479
+
1480
+ $_toggle-switch-label: map-get(
1481
+ $_disabled,
1482
+ toggle-switch-label
1483
+ );
1484
+
1485
+ @if ($_toggle-switch-label) {
1486
+ .toggle-switch-label {
1487
+ @include clay-css($_toggle-switch-label);
1488
+ }
1489
+
1490
+ $_toggle-switch-text: map-get(
1491
+ $_disabled,
1492
+ toggle-switch-text
1493
+ );
1494
+
1495
+ @if ($_toggle-switch-text) {
1496
+ .toggle-switch-text {
1497
+ @include clay-css($_toggle-switch-text);
1498
+ }
1499
+ }
1500
+
1501
+ $_toggle-switch-text-left: map-get(
1502
+ $_disabled,
1503
+ toggle-switch-text-left
1504
+ );
1505
+
1506
+ @if ($_toggle-switch-text-left) {
1507
+ .toggle-switch-text-left {
1508
+ @include clay-css(
1509
+ $_toggle-switch-text-left
1510
+ );
1511
+ }
1512
+ }
1513
+
1514
+ $_toggle-switch-text-right: map-get(
1515
+ $_disabled,
1516
+ toggle-switch-text-right
1517
+ );
1518
+
1519
+ @if ($_toggle-switch-text-right) {
1520
+ .toggle-switch-text-right {
1521
+ @include clay-css(
1522
+ $_toggle-switch-text-right
1523
+ );
1524
+ }
1525
+ }
1526
+ }
1527
+ }
1203
1528
  }
1204
1529
  }
1205
1530
  }