@clayui/css 3.99.0 → 3.101.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 (37) hide show
  1. package/lib/css/atlas.css +263 -206
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +164 -126
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +394 -193
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/flags-es-AR.svg +1 -1
  8. package/lib/images/icons/flags-es-CO.svg +1 -1
  9. package/lib/images/icons/flags-es-MX.svg +1 -1
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/flags-es-AR.svg +1 -1
  13. package/src/images/icons/flags-es-CO.svg +1 -1
  14. package/src/images/icons/flags-es-MX.svg +1 -1
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_custom-forms.scss +1 -2
  17. package/src/scss/atlas/variables/_globals.scss +9 -1
  18. package/src/scss/cadmin/components/_modals.scss +11 -3
  19. package/src/scss/cadmin/variables/_custom-forms.scss +1 -3
  20. package/src/scss/cadmin/variables/_globals.scss +9 -0
  21. package/src/scss/cadmin/variables/_slideout.scss +1 -0
  22. package/src/scss/components/_modals.scss +4 -0
  23. package/src/scss/functions/_lx-icons-generated.scss +3 -3
  24. package/src/scss/mixins/_buttons.scss +95 -56
  25. package/src/scss/mixins/_cards.scss +45 -17
  26. package/src/scss/mixins/_close.scss +33 -3
  27. package/src/scss/mixins/_custom-forms.scss +123 -73
  28. package/src/scss/mixins/_dropdown-menu.scss +41 -15
  29. package/src/scss/mixins/_forms.scss +166 -76
  30. package/src/scss/mixins/_links.scss +106 -59
  31. package/src/scss/mixins/_modals.scss +35 -4
  32. package/src/scss/mixins/_sidebar.scss +37 -7
  33. package/src/scss/mixins/_slideout.scss +32 -2
  34. package/src/scss/mixins/_toggle-switch.scss +114 -36
  35. package/src/scss/variables/_badges.scss +6 -1
  36. package/src/scss/variables/_buttons.scss +17 -3
  37. package/src/scss/variables/_globals.scss +8 -0
package/src/scss/mixins/_slideout.scss CHANGED
@@ -20,6 +20,31 @@
20
20
  @if (type-of($map) == 'map') {
21
21
  $enabled: setter(map-get($map, enabled), true);
22
22
 
23
+ $_enable-focus-visible: if(
24
+ variable-exists(enable-focus-visible),
25
+ $enable-focus-visible,
26
+ if(
27
+ variable-exists(cadmin-enable-focus-visible),
28
+ $cadmin-enable-focus-visible,
29
+ true
30
+ )
31
+ );
32
+
33
+ $_c-prefers-focus-selector: if(
34
+ $_enable-focus-visible,
35
+ '.c-prefers-focus &:focus',
36
+ ''
37
+ );
38
+
39
+ @if (variable-exists(cadmin-enable-focus-visible)) and
40
+ ($_enable-focus-visible)
41
+ {
42
+ $_c-prefers-focus-selector: clay-insert-before(
43
+ '.cadmin',
44
+ '.c-prefers-focus '
45
+ );
46
+ }
47
+
23
48
  @if ($enabled) {
24
49
  @include clay-css($map);
25
50
 
@@ -87,8 +112,13 @@
87
112
  @include clay-css(map-get($_c-horizontal-resizer, hover));
88
113
  }
89
114
 
90
- &:focus {
91
- @include clay-css(map-get($_c-horizontal-resizer, focus));
115
+ @at-root {
116
+ #{$focus-visible-selector},
117
+ #{$_c-prefers-focus-selector} {
118
+ @include clay-css(
119
+ map-get($_c-horizontal-resizer, focus)
120
+ );
121
+ }
92
122
  }
93
123
  }
94
124
  }
package/src/scss/mixins/_toggle-switch.scss CHANGED
@@ -646,6 +646,31 @@
646
646
  $breakpoint-down: setter(map-get($map, breakpoint-down), sm);
647
647
  $enabled: setter(map-get($map, enabled), true);
648
648
 
649
+ $_enable-focus-visible: if(
650
+ variable-exists(enable-focus-visible),
651
+ $enable-focus-visible,
652
+ if(
653
+ variable-exists(cadmin-enable-focus-visible),
654
+ $cadmin-enable-focus-visible,
655
+ true
656
+ )
657
+ );
658
+
659
+ $_c-prefers-focus-selector: if(
660
+ $_enable-focus-visible,
661
+ '.c-prefers-focus &:focus',
662
+ ''
663
+ );
664
+
665
+ @if (variable-exists(cadmin-enable-focus-visible)) and
666
+ ($_enable-focus-visible)
667
+ {
668
+ $_c-prefers-focus-selector: clay-insert-before(
669
+ '.cadmin',
670
+ '.c-prefers-focus '
671
+ );
672
+ }
673
+
649
674
  @include clay-css($map);
650
675
 
651
676
  @if ($enabled) {
@@ -661,10 +686,15 @@
661
686
  );
662
687
  }
663
688
 
664
- &:focus ~ .toggle-switch-bar {
665
- @include clay-toggle-switch-bar-variant(
666
- map-deep-get($map, focus, toggle-switch-bar)
667
- );
689
+ @at-root {
690
+ #{$focus-visible-selector},
691
+ #{$_c-prefers-focus-selector} {
692
+ ~ .toggle-switch-bar {
693
+ @include clay-toggle-switch-bar-variant(
694
+ map-deep-get($map, focus, toggle-switch-bar)
695
+ );
696
+ }
697
+ }
668
698
  }
669
699
 
670
700
  &:active ~ .toggle-switch-bar {
@@ -692,10 +722,22 @@
692
722
  );
693
723
  }
694
724
 
695
- &:checked:focus ~ .toggle-switch-bar {
696
- @include clay-toggle-switch-bar-variant(
697
- map-deep-get($map, checked, focus, toggle-switch-bar)
698
- );
725
+ @at-root {
726
+ &:checked {
727
+ #{$focus-visible-selector},
728
+ #{$_c-prefers-focus-selector} {
729
+ ~ .toggle-switch-bar {
730
+ @include clay-toggle-switch-bar-variant(
731
+ map-deep-get(
732
+ $map,
733
+ checked,
734
+ focus,
735
+ toggle-switch-bar
736
+ )
737
+ );
738
+ }
739
+ }
740
+ }
699
741
  }
700
742
 
701
743
  &:checked:active ~ .toggle-switch-bar {
@@ -723,10 +765,22 @@
723
765
  );
724
766
  }
725
767
 
726
- &:indeterminate:focus ~ .toggle-switch-bar {
727
- @include clay-toggle-switch-bar-variant(
728
- map-deep-get($map, indeterminate, focus, toggle-switch-bar)
729
- );
768
+ @at-root {
769
+ &:indeterminate {
770
+ #{$focus-visible-selector},
771
+ #{$_c-prefers-focus-selector} {
772
+ ~ .toggle-switch-bar {
773
+ @include clay-toggle-switch-bar-variant(
774
+ map-deep-get(
775
+ $map,
776
+ indeterminate,
777
+ focus,
778
+ toggle-switch-bar
779
+ )
780
+ );
781
+ }
782
+ }
783
+ }
730
784
  }
731
785
 
732
786
  &:indeterminate:active ~ .toggle-switch-bar {
@@ -762,10 +816,20 @@
762
816
  );
763
817
  }
764
818
 
765
- &:focus ~ .toggle-switch-bar {
766
- @include clay-toggle-switch-bar-variant(
767
- map-deep-get($map, mobile, focus, toggle-switch-bar)
768
- );
819
+ @at-root {
820
+ #{$focus-visible-selector},
821
+ #{$_c-prefers-focus-selector} {
822
+ ~ .toggle-switch-bar {
823
+ @include clay-toggle-switch-bar-variant(
824
+ map-deep-get(
825
+ $map,
826
+ mobile,
827
+ focus,
828
+ toggle-switch-bar
829
+ )
830
+ );
831
+ }
832
+ }
769
833
  }
770
834
 
771
835
  &:active ~ .toggle-switch-bar {
@@ -799,16 +863,23 @@
799
863
  );
800
864
  }
801
865
 
802
- &:checked:focus ~ .toggle-switch-bar {
803
- @include clay-toggle-switch-bar-variant(
804
- map-deep-get(
805
- $map,
806
- mobile,
807
- checked,
808
- focus,
809
- toggle-switch-bar
810
- )
811
- );
866
+ @at-root {
867
+ &:checked {
868
+ #{$focus-visible-selector},
869
+ #{$_c-prefers-focus-selector} {
870
+ ~ .toggle-switch-bar {
871
+ @include clay-toggle-switch-bar-variant(
872
+ map-deep-get(
873
+ $map,
874
+ mobile,
875
+ checked,
876
+ focus,
877
+ toggle-switch-bar
878
+ )
879
+ );
880
+ }
881
+ }
882
+ }
812
883
  }
813
884
 
814
885
  &:checked:active ~ .toggle-switch-bar {
@@ -859,16 +930,23 @@
859
930
  );
860
931
  }
861
932
 
862
- &:indeterminate:focus ~ .toggle-switch-bar {
863
- @include clay-toggle-switch-bar-variant(
864
- map-deep-get(
865
- $map,
866
- mobile,
867
- indeterminate,
868
- focus,
869
- toggle-switch-bar
870
- )
871
- );
933
+ @at-root {
934
+ &:indeterminate {
935
+ #{$focus-visible-selector},
936
+ #{$_c-prefers-focus-selector} {
937
+ ~ .toggle-switch-bar {
938
+ @include clay-toggle-switch-bar-variant(
939
+ map-deep-get(
940
+ $map,
941
+ mobile,
942
+ indeterminate,
943
+ focus,
944
+ toggle-switch-bar
945
+ )
946
+ );
947
+ }
948
+ }
949
+ }
872
950
  }
873
951
 
874
952
  &:indeterminate:active ~ .toggle-switch-bar {
package/src/scss/variables/_badges.scss CHANGED
@@ -495,10 +495,15 @@ $badge-palette: map-deep-merge(
495
495
  light: $badge-light,
496
496
  dark: $badge-dark,
497
497
  badge-beta: (
498
- background-color: $light-l1,
498
+ background-color: rgba($info-d1, 0.04),
499
499
  color: $info-d1,
500
500
  text-transform: uppercase,
501
501
  ),
502
+ badge-beta-dark: (
503
+ background-color: rgba($info-l2, 0.04),
504
+ color: $info-l1,
505
+ text-transform: uppercase,
506
+ ),
502
507
  ),
503
508
  $badge-palette
504
509
  );
package/src/scss/variables/_buttons.scss CHANGED
@@ -895,18 +895,32 @@ $btn-palette: map-deep-merge(
895
895
  dark: $btn-dark,
896
896
  link: $btn-link,
897
897
  btn-beta: (
898
- background-color: $light-l1,
898
+ background-color: rgba($info-d1, 0.04),
899
899
  color: $info-d1,
900
900
  text-transform: uppercase,
901
901
  hover: (
902
- background-color: $light,
902
+ background-color: rgba($info-d1, 0.06),
903
903
  color: $info-d1,
904
904
  ),
905
905
  focus: (
906
- background-color: $light,
906
+ background-color: rgba($info-d1, 0.06),
907
907
  color: $info-d1,
908
908
  ),
909
909
  ),
910
+ btn-beta-dark: (
911
+ background-color: rgba($info-l2, 0.04),
912
+ border-color: transparent,
913
+ color: $info-l1,
914
+ text-transform: uppercase,
915
+ hover: (
916
+ background-color: rgba($info-l2, 0.06),
917
+ color: $info-l1,
918
+ ),
919
+ focus: (
920
+ background-color: rgba($info-l2, 0.06),
921
+ color: $info-l1,
922
+ ),
923
+ ),
910
924
  ),
911
925
  $btn-palette
912
926
  );
package/src/scss/variables/_globals.scss CHANGED
@@ -16,6 +16,14 @@ $clay-unset-placeholder: clay-unset-placeholder !default;
16
16
 
17
17
  $enable-bs4-deprecated: true !default;
18
18
  $enable-c-inner: true !default;
19
+ $enable-focus-visible: true !default;
20
+
21
+ $focus-visible-selector: if(
22
+ $enable-focus-visible,
23
+ '&:focus-visible',
24
+ '&:focus'
25
+ ) !default;
26
+
19
27
  $enable-lexicon-flat-colors: false !default;
20
28
  $enable-scaling-components: false !default;
21
29
  $scaling-breakpoint-down: sm !default;