@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/_cards.scss CHANGED
@@ -297,6 +297,31 @@
297
297
  @if (type-of($map) == 'map') {
298
298
  $enabled: setter(map-get($map, enabled), true);
299
299
 
300
+ $_enable-focus-visible: if(
301
+ variable-exists(enable-focus-visible),
302
+ $enable-focus-visible,
303
+ if(
304
+ variable-exists(cadmin-enable-focus-visible),
305
+ $cadmin-enable-focus-visible,
306
+ true
307
+ )
308
+ );
309
+
310
+ $_c-prefers-focus-selector: if(
311
+ $_enable-focus-visible,
312
+ '.c-prefers-focus &:focus',
313
+ ''
314
+ );
315
+
316
+ @if (variable-exists(cadmin-enable-focus-visible)) and
317
+ ($_enable-focus-visible)
318
+ {
319
+ $_c-prefers-focus-selector: clay-insert-before(
320
+ '.cadmin',
321
+ '.c-prefers-focus '
322
+ );
323
+ }
324
+
300
325
  $base: map-merge(
301
326
  $map,
302
327
  (
@@ -708,28 +733,31 @@
708
733
  }
709
734
  }
710
735
 
711
- &:focus,
712
- &.focus {
713
- @include clay-css($focus);
736
+ @at-root {
737
+ &.focus,
738
+ #{$focus-visible-selector},
739
+ #{$_c-prefers-focus-selector} {
740
+ @include clay-css($focus);
714
741
 
715
- &::after {
716
- @include clay-css(map-get($focus, after));
717
- }
742
+ &::after {
743
+ @include clay-css(map-get($focus, after));
744
+ }
718
745
 
719
- .card-title {
720
- @include clay-link($focus-card-title);
721
- }
746
+ .card-title {
747
+ @include clay-link($focus-card-title);
748
+ }
722
749
 
723
- .card-subtitle {
724
- @include clay-link($focus-card-subtitle);
725
- }
750
+ .card-subtitle {
751
+ @include clay-link($focus-card-subtitle);
752
+ }
726
753
 
727
- .card-text {
728
- @include clay-link($focus-card-text);
729
- }
754
+ .card-text {
755
+ @include clay-link($focus-card-text);
756
+ }
730
757
 
731
- .card-link {
732
- @include clay-link($focus-card-link);
758
+ .card-link {
759
+ @include clay-link($focus-card-link);
760
+ }
733
761
  }
734
762
  }
735
763
 
package/src/scss/mixins/_close.scss CHANGED
@@ -67,6 +67,31 @@
67
67
  @if (type-of($map) == 'map') {
68
68
  $enabled: setter(map-get($map, enabled), true);
69
69
 
70
+ $_enable-focus-visible: if(
71
+ variable-exists(enable-focus-visible),
72
+ $enable-focus-visible,
73
+ if(
74
+ variable-exists(cadmin-enable-focus-visible),
75
+ $cadmin-enable-focus-visible,
76
+ true
77
+ )
78
+ );
79
+
80
+ $_c-prefers-focus-selector: if(
81
+ $_enable-focus-visible,
82
+ '.c-prefers-focus &:focus',
83
+ ''
84
+ );
85
+
86
+ @if (variable-exists(cadmin-enable-focus-visible)) and
87
+ ($_enable-focus-visible)
88
+ {
89
+ $_c-prefers-focus-selector: clay-insert-before(
90
+ '.cadmin',
91
+ '.c-prefers-focus '
92
+ );
93
+ }
94
+
70
95
  $base: map-merge(
71
96
  $map,
72
97
  (
@@ -356,14 +381,19 @@
356
381
 
357
382
  @at-root {
358
383
  button#{&} {
359
- &:focus {
384
+ #{$focus-visible-selector},
385
+ #{$_c-prefers-focus-selector} {
360
386
  @include clay-css($btn-focus);
361
387
  }
362
388
  }
363
389
  }
364
390
 
365
- &:focus {
366
- @include clay-css($focus);
391
+ @at-root {
392
+ &.focus,
393
+ #{$focus-visible-selector},
394
+ #{$_c-prefers-focus-selector} {
395
+ @include clay-css($focus);
396
+ }
367
397
  }
368
398
 
369
399
  &:active {
package/src/scss/mixins/_custom-forms.scss CHANGED
@@ -103,6 +103,31 @@
103
103
  @if (type-of($map) == 'map') {
104
104
  $enabled: setter(map-get($map, enabled), true);
105
105
 
106
+ $_enable-focus-visible: if(
107
+ variable-exists(enable-focus-visible),
108
+ $enable-focus-visible,
109
+ if(
110
+ variable-exists(cadmin-enable-focus-visible),
111
+ $cadmin-enable-focus-visible,
112
+ true
113
+ )
114
+ );
115
+
116
+ $_c-prefers-focus-selector: if(
117
+ $_enable-focus-visible,
118
+ '.c-prefers-focus &:focus',
119
+ ''
120
+ );
121
+
122
+ @if (variable-exists(cadmin-enable-focus-visible)) and
123
+ ($_enable-focus-visible)
124
+ {
125
+ $_c-prefers-focus-selector: clay-insert-before(
126
+ '.cadmin',
127
+ '.c-prefers-focus '
128
+ );
129
+ }
130
+
106
131
  @if ($enabled) {
107
132
  @include clay-css($map);
108
133
 
@@ -140,21 +165,36 @@
140
165
  }
141
166
  }
142
167
 
143
- &:focus {
144
- ~ .custom-control-label::before {
145
- @include clay-css(
146
- map-deep-get($map, focus, custom-control-label, before)
147
- );
148
- }
149
-
150
- ~ .custom-control-label::after {
151
- @include clay-css(
152
- map-deep-get($map, focus, custom-control-label, after)
153
- );
154
- }
155
-
156
- ~ .card {
157
- @include clay-card-variant(map-deep-get($map, focus, card));
168
+ @at-root {
169
+ #{$focus-visible-selector},
170
+ #{$_c-prefers-focus-selector} {
171
+ ~ .custom-control-label::before {
172
+ @include clay-css(
173
+ map-deep-get(
174
+ $map,
175
+ focus,
176
+ custom-control-label,
177
+ before
178
+ )
179
+ );
180
+ }
181
+
182
+ ~ .custom-control-label::after {
183
+ @include clay-css(
184
+ map-deep-get(
185
+ $map,
186
+ focus,
187
+ custom-control-label,
188
+ after
189
+ )
190
+ );
191
+ }
192
+
193
+ ~ .card {
194
+ @include clay-card-variant(
195
+ map-deep-get($map, focus, card)
196
+ );
197
+ }
158
198
  }
159
199
  }
160
200
 
@@ -384,35 +424,40 @@
384
424
  }
385
425
  }
386
426
 
387
- &:checked:focus {
388
- ~ .custom-control-label::before {
389
- @include clay-css(
390
- map-deep-get(
391
- $map,
392
- checked,
393
- focus,
394
- custom-control-label,
395
- before
396
- )
397
- );
398
- }
399
-
400
- ~ .custom-control-label::after {
401
- @include clay-css(
402
- map-deep-get(
403
- $map,
404
- checked,
405
- focus,
406
- custom-control-label,
407
- after
408
- )
409
- );
410
- }
411
-
412
- ~ .card {
413
- @include clay-card-variant(
414
- map-deep-get($map, checked, focus, card)
415
- );
427
+ @at-root {
428
+ &:checked {
429
+ #{$focus-visible-selector},
430
+ #{$_c-prefers-focus-selector} {
431
+ ~ .custom-control-label::before {
432
+ @include clay-css(
433
+ map-deep-get(
434
+ $map,
435
+ checked,
436
+ focus,
437
+ custom-control-label,
438
+ before
439
+ )
440
+ );
441
+ }
442
+
443
+ ~ .custom-control-label::after {
444
+ @include clay-css(
445
+ map-deep-get(
446
+ $map,
447
+ checked,
448
+ focus,
449
+ custom-control-label,
450
+ after
451
+ )
452
+ );
453
+ }
454
+
455
+ ~ .card {
456
+ @include clay-card-variant(
457
+ map-deep-get($map, checked, focus, card)
458
+ );
459
+ }
460
+ }
416
461
  }
417
462
  }
418
463
 
@@ -609,35 +654,40 @@
609
654
  }
610
655
  }
611
656
 
612
- &:indeterminate:focus {
613
- ~ .custom-control-label::before {
614
- @include clay-css(
615
- map-deep-get(
616
- $map,
617
- indeterminate,
618
- focus,
619
- custom-control-label,
620
- before
621
- )
622
- );
623
- }
624
-
625
- ~ .custom-control-label::after {
626
- @include clay-css(
627
- map-deep-get(
628
- $map,
629
- indeterminate,
630
- focus,
631
- custom-control-label,
632
- after
633
- )
634
- );
635
- }
636
-
637
- ~ .card {
638
- @include clay-card-variant(
639
- map-deep-get($map, indeterminate, focus, card)
640
- );
657
+ @at-root {
658
+ &:indeterminate {
659
+ #{$focus-visible-selector},
660
+ #{$_c-prefers-focus-selector} {
661
+ ~ .custom-control-label::before {
662
+ @include clay-css(
663
+ map-deep-get(
664
+ $map,
665
+ indeterminate,
666
+ focus,
667
+ custom-control-label,
668
+ before
669
+ )
670
+ );
671
+ }
672
+
673
+ ~ .custom-control-label::after {
674
+ @include clay-css(
675
+ map-deep-get(
676
+ $map,
677
+ indeterminate,
678
+ focus,
679
+ custom-control-label,
680
+ after
681
+ )
682
+ );
683
+ }
684
+
685
+ ~ .card {
686
+ @include clay-card-variant(
687
+ map-deep-get($map, indeterminate, focus, card)
688
+ );
689
+ }
690
+ }
641
691
  }
642
692
  }
643
693
 
package/src/scss/mixins/_dropdown-menu.scss CHANGED
@@ -354,6 +354,26 @@
354
354
  setter(map-get($map, hover-c-kbd-inline), ())
355
355
  );
356
356
 
357
+ $_enable-focus-visible: if(
358
+ variable-exists(enable-focus-visible),
359
+ $enable-focus-visible,
360
+ if(
361
+ variable-exists(cadmin-enable-focus-visible),
362
+ $cadmin-enable-focus-visible,
363
+ true
364
+ )
365
+ );
366
+ $_focus-selector: if(
367
+ $_enable-focus-visible,
368
+ '&:focus-visible',
369
+ '&:focus'
370
+ );
371
+ $_prefers-focus-selector: if(
372
+ $_enable-focus-visible,
373
+ '.c-prefers-focus &:focus',
374
+ ''
375
+ );
376
+
357
377
  $focus: setter(map-get($map, focus), ());
358
378
  $focus: map-deep-merge(
359
379
  $focus,
@@ -624,20 +644,23 @@
624
644
  }
625
645
  }
626
646
 
627
- &:focus,
628
- &.focus {
629
- @include clay-css($focus);
647
+ @at-root {
648
+ &.focus,
649
+ #{$_focus-selector},
650
+ #{$_prefers-focus-selector} {
651
+ @include clay-css($focus);
630
652
 
631
- &::before {
632
- @include clay-css(map-get($focus, before));
633
- }
653
+ &::before {
654
+ @include clay-css(map-get($focus, before));
655
+ }
634
656
 
635
- &::after {
636
- @include clay-css(map-get($focus, after));
637
- }
657
+ &::after {
658
+ @include clay-css(map-get($focus, after));
659
+ }
638
660
 
639
- .c-kbd-inline {
640
- @include clay-css($focus-c-kbd-inline);
661
+ .c-kbd-inline {
662
+ @include clay-css($focus-c-kbd-inline);
663
+ }
641
664
  }
642
665
  }
643
666
 
@@ -702,10 +725,13 @@
702
725
  // Overwrite Bootstrap's Ensure active button styles are not applied to disabled buttons
703
726
  // https://github.com/twbs/bootstrap/commit/de3973b5e74058e37fd15fecc4cb7b9fd3409def
704
727
 
705
- &.btn:not([disabled]):not(.disabled):active,
706
- &.btn:not([disabled]):not(.disabled).active {
707
- &:focus {
708
- box-shadow: map-get($focus, box-shadow);
728
+ @at-root {
729
+ &.btn:not([disabled]):not(.disabled):active,
730
+ &.btn:not([disabled]):not(.disabled).active {
731
+ #{$_focus-selector},
732
+ #{$_prefers-focus-selector} {
733
+ box-shadow: map-get($focus, box-shadow);
734
+ }
709
735
  }
710
736
  }
711
737