@clayui/css 3.106.1 → 3.108.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 (36) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/README.md +1 -1
  3. package/lib/css/atlas.css +431 -130
  4. package/lib/css/atlas.css.map +1 -1
  5. package/lib/css/base.css +428 -115
  6. package/lib/css/base.css.map +1 -1
  7. package/lib/css/cadmin.css +446 -124
  8. package/lib/css/cadmin.css.map +1 -1
  9. package/lib/images/icons/flags-en-CA.svg +13 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/lib/images/icons/twitter-x.svg +9 -0
  12. package/package.json +2 -2
  13. package/src/images/icons/flags-en-CA.svg +13 -0
  14. package/src/images/icons/twitter-x.svg +9 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_tables.scss +37 -18
  17. package/src/scss/cadmin/components/_badges.scss +1 -6
  18. package/src/scss/cadmin/components/_modals.scss +11 -0
  19. package/src/scss/cadmin/components/_tables.scss +82 -25
  20. package/src/scss/cadmin/variables/_alerts.scss +2 -16
  21. package/src/scss/cadmin/variables/_badges.scss +78 -3
  22. package/src/scss/cadmin/variables/_buttons.scss +204 -0
  23. package/src/scss/cadmin/variables/_dropdowns.scss +1 -1
  24. package/src/scss/cadmin/variables/_modals.scss +21 -1
  25. package/src/scss/cadmin/variables/_tables.scss +144 -99
  26. package/src/scss/cadmin/variables/_utilities.scss +2 -1
  27. package/src/scss/components/_modals.scss +8 -0
  28. package/src/scss/components/_tables.scss +87 -28
  29. package/src/scss/functions/_lx-icons-generated.scss +4 -0
  30. package/src/scss/mixins/_grid.scss +8 -0
  31. package/src/scss/mixins/_tables.scss +21 -2
  32. package/src/scss/variables/_badges.scss +74 -4
  33. package/src/scss/variables/_buttons.scss +198 -4
  34. package/src/scss/variables/_modals.scss +21 -1
  35. package/src/scss/variables/_tables.scss +131 -91
  36. package/src/scss/variables/_utilities.scss +1 -1
package/src/scss/cadmin/variables/_badges.scss CHANGED
@@ -466,10 +466,85 @@ $cadmin-badge-palette: map-deep-merge(
466
466
  danger: $cadmin-badge-danger,
467
467
  light: $cadmin-badge-light,
468
468
  dark: $cadmin-badge-dark,
469
- badge-beta: (
470
- background-color: $cadmin-light-l1,
469
+ '.badge-translucent.badge-primary': (
470
+ background-color: rgba($cadmin-primary-d1, 0.04),
471
+ border-color: transparent,
472
+ color: $cadmin-primary-d1,
473
+ ),
474
+ '.badge-translucent.badge-info, .badge-beta': (
475
+ background-color: rgba($cadmin-info-d1, 0.04),
476
+ border-color: transparent,
471
477
  color: $cadmin-info-d1,
472
- text-transform: uppercase,
478
+ ),
479
+ '.badge-translucent.badge-success': (
480
+ background-color: rgba($cadmin-success-d1, 0.04),
481
+ border-color: transparent,
482
+ color: $cadmin-success-d1,
483
+ ),
484
+ '.badge-translucent.badge-warning': (
485
+ background-color: rgba($cadmin-warning-d1, 0.04),
486
+ border-color: transparent,
487
+ color: $cadmin-warning-d1,
488
+ ),
489
+ '.badge-translucent.badge-danger': (
490
+ background-color: rgba($cadmin-danger-d1, 0.04),
491
+ border-color: transparent,
492
+ color: $cadmin-danger-d1,
493
+ ),
494
+ '%clay-dark-badge-translucent-primary': (
495
+ background-color: rgba($cadmin-primary-l2, 0.04),
496
+ border-color: transparent,
497
+ color: $cadmin-primary-l1,
498
+ ),
499
+ '.clay-dark .badge-translucent.badge-primary': (
500
+ extend: '%clay-dark-badge-translucent-primary',
501
+ ),
502
+ '.clay-dark.badge-translucent.badge-primary': (
503
+ extend: '%clay-dark-badge-translucent-primary',
504
+ ),
505
+ '%clay-dark-badge-translucent-info': (
506
+ background-color: rgba($cadmin-info-l2, 0.04),
507
+ border-color: transparent,
508
+ color: $cadmin-info-l1,
509
+ ),
510
+ '.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (
511
+ extend: '%clay-dark-badge-translucent-info',
512
+ ),
513
+ '.clay-dark.badge-translucent.badge-info': (
514
+ extend: '%clay-dark-badge-translucent-info',
515
+ ),
516
+ '%clay-dark-badge-translucent-success': (
517
+ background-color: rgba($cadmin-success-l2, 0.04),
518
+ border-color: transparent,
519
+ color: $cadmin-success-l1,
520
+ ),
521
+ '.clay-dark .badge-translucent.badge-success': (
522
+ extend: '%clay-dark-badge-translucent-success',
523
+ ),
524
+ '.clay-dark.badge-translucent.badge-success': (
525
+ extend: '%clay-dark-badge-translucent-success',
526
+ ),
527
+ '%clay-dark-badge-translucent-warning': (
528
+ background-color: rgba($cadmin-warning-l2, 0.04),
529
+ border-color: transparent,
530
+ color: $cadmin-warning-l1,
531
+ ),
532
+ '.clay-dark .badge-translucent.badge-warning': (
533
+ extend: '%clay-dark-badge-translucent-warning',
534
+ ),
535
+ '.clay-dark.badge-translucent.badge-warning': (
536
+ extend: '%clay-dark-badge-translucent-warning',
537
+ ),
538
+ '%clay-dark-badge-translucent-danger': (
539
+ background-color: rgba($cadmin-danger-l2, 0.04),
540
+ border-color: transparent,
541
+ color: $cadmin-danger-l1,
542
+ ),
543
+ '.clay-dark .badge-translucent.badge-danger': (
544
+ extend: '%clay-dark-badge-translucent-danger',
545
+ ),
546
+ '.clay-dark.badge-translucent.badge-danger': (
547
+ extend: '%clay-dark-badge-translucent-danger',
473
548
  ),
474
549
  ),
475
550
  $cadmin-badge-palette
package/src/scss/cadmin/variables/_buttons.scss CHANGED
@@ -725,6 +725,210 @@ $cadmin-btn-palette: map-deep-merge(
725
725
  color: $cadmin-info-d1,
726
726
  ),
727
727
  ),
728
+ '.btn-translucent': (
729
+ extend: '%clay-btn-xs',
730
+ border-radius: clay-enable-rounded($cadmin-rounded-pill),
731
+ ),
732
+ '.btn-translucent.btn-primary': (
733
+ background-color: rgba($cadmin-primary-d1, 0.04),
734
+ border-color: transparent,
735
+ color: $cadmin-primary-d1,
736
+ hover: (
737
+ background-color: rgba($cadmin-primary-d1, 0.06),
738
+ color: $cadmin-primary-d1,
739
+ ),
740
+ focus: (
741
+ background-color: rgba($cadmin-primary-d1, 0.06),
742
+ color: $cadmin-primary-d1,
743
+ ),
744
+ active: (
745
+ background-color: rgba($cadmin-primary-d1, 0.08),
746
+ color: $cadmin-primary-d1,
747
+ ),
748
+ ),
749
+ '.btn-translucent.btn-info, .btn-beta': (
750
+ background-color: rgba($cadmin-info-d1, 0.04),
751
+ border-color: transparent,
752
+ color: $cadmin-info-d1,
753
+ hover: (
754
+ background-color: rgba($cadmin-info-d1, 0.06),
755
+ color: $cadmin-info-d1,
756
+ ),
757
+ focus: (
758
+ background-color: rgba($cadmin-info-d1, 0.06),
759
+ color: $cadmin-info-d1,
760
+ ),
761
+ active: (
762
+ background-color: rgba($cadmin-info-d1, 0.08),
763
+ color: $cadmin-info-d1,
764
+ ),
765
+ ),
766
+ '.btn-translucent.btn-success': (
767
+ background-color: rgba($cadmin-success-d1, 0.04),
768
+ border-color: transparent,
769
+ color: $cadmin-success-d1,
770
+ hover: (
771
+ background-color: rgba($cadmin-success-d1, 0.06),
772
+ color: $cadmin-success-d1,
773
+ ),
774
+ focus: (
775
+ background-color: rgba($cadmin-success-d1, 0.06),
776
+ color: $cadmin-success-d1,
777
+ ),
778
+ active: (
779
+ background-color: rgba($cadmin-success-d1, 0.08),
780
+ color: $cadmin-success-d1,
781
+ ),
782
+ ),
783
+ '.btn-translucent.btn-warning': (
784
+ background-color: rgba($cadmin-warning-d1, 0.04),
785
+ border-color: transparent,
786
+ color: $cadmin-warning-d1,
787
+ hover: (
788
+ background-color: rgba($cadmin-warning-d1, 0.06),
789
+ color: $cadmin-warning-d1,
790
+ ),
791
+ focus: (
792
+ background-color: rgba($cadmin-warning-d1, 0.06),
793
+ color: $cadmin-warning-d1,
794
+ ),
795
+ active: (
796
+ background-color: rgba($cadmin-warning-d1, 0.08),
797
+ color: $cadmin-warning-d1,
798
+ ),
799
+ ),
800
+ '.btn-translucent.btn-danger': (
801
+ background-color: rgba($cadmin-danger-d1, 0.04),
802
+ border-color: transparent,
803
+ color: $cadmin-danger-d1,
804
+ hover: (
805
+ background-color: rgba($cadmin-danger-d1, 0.06),
806
+ color: $cadmin-danger-d1,
807
+ ),
808
+ focus: (
809
+ background-color: rgba($cadmin-danger-d1, 0.06),
810
+ color: $cadmin-danger-d1,
811
+ ),
812
+ active: (
813
+ background-color: rgba($cadmin-danger-d1, 0.08),
814
+ color: $cadmin-danger-d1,
815
+ ),
816
+ ),
817
+ '%clay-dark-btn-translucent-primary': (
818
+ background-color: rgba($cadmin-primary-l2, 0.04),
819
+ border-color: transparent,
820
+ color: $cadmin-primary-l1,
821
+ hover: (
822
+ background-color: rgba($cadmin-primary-l2, 0.06),
823
+ color: $cadmin-primary-l1,
824
+ ),
825
+ focus: (
826
+ background-color: rgba($cadmin-primary-l2, 0.06),
827
+ color: $cadmin-primary-l1,
828
+ ),
829
+ active: (
830
+ background-color: rgba($cadmin-primary-l2, 0.08),
831
+ color: $cadmin-primary-l1,
832
+ ),
833
+ ),
834
+ '.clay-dark .btn-translucent.btn-primary': (
835
+ extend: '%clay-dark-btn-translucent-primary',
836
+ ),
837
+ '.clay-dark.btn-translucent.btn-primary': (
838
+ extend: '%clay-dark-btn-translucent-primary',
839
+ ),
840
+ '%clay-dark-btn-translucent-info': (
841
+ background-color: rgba($cadmin-info-l2, 0.04),
842
+ border-color: transparent,
843
+ color: $cadmin-info-l1,
844
+ hover: (
845
+ background-color: rgba($cadmin-info-l2, 0.06),
846
+ color: $cadmin-info-l1,
847
+ ),
848
+ focus: (
849
+ background-color: rgba($cadmin-info-l2, 0.06),
850
+ color: $cadmin-info-l1,
851
+ ),
852
+ active: (
853
+ background-color: rgba($cadmin-info-l2, 0.08),
854
+ color: $cadmin-info-l1,
855
+ ),
856
+ ),
857
+ '.clay-dark .btn-translucent.btn-info, .btn-beta-dark': (
858
+ extend: '%clay-dark-btn-translucent-info',
859
+ ),
860
+ '.clay-dark.btn-translucent.btn-info': (
861
+ extend: '%clay-dark-btn-translucent-info',
862
+ ),
863
+ '%clay-dark-btn-translucent-success': (
864
+ background-color: rgba($cadmin-success-l2, 0.04),
865
+ border-color: transparent,
866
+ color: $cadmin-success-l1,
867
+ hover: (
868
+ background-color: rgba($cadmin-success-l2, 0.06),
869
+ color: $cadmin-success-l1,
870
+ ),
871
+ focus: (
872
+ background-color: rgba($cadmin-success-l2, 0.06),
873
+ color: $cadmin-success-l1,
874
+ ),
875
+ active: (
876
+ background-color: rgba($cadmin-success-l2, 0.08),
877
+ color: $cadmin-success-l1,
878
+ ),
879
+ ),
880
+ '.clay-dark .btn-translucent.btn-success': (
881
+ extend: '%clay-dark-btn-translucent-success',
882
+ ),
883
+ '.clay-dark.btn-translucent.btn-success': (
884
+ extend: '%clay-dark-btn-translucent-success',
885
+ ),
886
+ '%clay-dark-btn-translucent-warning': (
887
+ background-color: rgba($cadmin-warning-l2, 0.04),
888
+ border-color: transparent,
889
+ color: $cadmin-warning-l1,
890
+ hover: (
891
+ background-color: rgba($cadmin-warning-l2, 0.06),
892
+ color: $cadmin-warning-l1,
893
+ ),
894
+ focus: (
895
+ background-color: rgba($cadmin-warning-l2, 0.06),
896
+ color: $cadmin-warning-l1,
897
+ ),
898
+ active: (
899
+ background-color: rgba($cadmin-warning-l2, 0.08),
900
+ color: $cadmin-warning-l1,
901
+ ),
902
+ ),
903
+ '.clay-dark .btn-translucent.btn-warning': (
904
+ extend: '%clay-dark-btn-translucent-warning',
905
+ ),
906
+ '.clay-dark.btn-translucent.btn-warning': (
907
+ extend: '%clay-dark-btn-translucent-warning',
908
+ ),
909
+ '%clay-dark-btn-translucent-danger': (
910
+ background-color: rgba($cadmin-danger-l2, 0.04),
911
+ border-color: transparent,
912
+ color: $cadmin-danger-l1,
913
+ hover: (
914
+ background-color: rgba($cadmin-danger-l2, 0.06),
915
+ color: $cadmin-danger-l1,
916
+ ),
917
+ focus: (
918
+ background-color: rgba($cadmin-danger-l2, 0.06),
919
+ color: $cadmin-danger-l1,
920
+ ),
921
+ active: (
922
+ background-color: rgba($cadmin-danger-l2, 0.08),
923
+ color: $cadmin-danger-l1,
924
+ ),
925
+ ),
926
+ '.clay-dark .btn-translucent.btn-danger': (
927
+ extend: '%clay-dark-btn-translucent-danger',
928
+ ),
929
+ '.clay-dark.btn-translucent.btn-danger': (
930
+ extend: '%clay-dark-btn-translucent-danger',
931
+ ),
728
932
  ),
729
933
  $cadmin-btn-palette
730
934
  );
package/src/scss/cadmin/variables/_dropdowns.scss CHANGED
@@ -79,7 +79,7 @@ $cadmin-dropdown-item-padding-y: 8px !default;
79
79
  $cadmin-dropdown-item-disabled-cursor: $cadmin-disabled-cursor !default;
80
80
 
81
81
  $cadmin-dropdown-item-indicator-size: 16px !default;
82
- $cadmin-dropdown-item-indicator-spacer-x: 16px !default;
82
+ $cadmin-dropdown-item-indicator-spacer-x: 12px !default;
83
83
 
84
84
  $cadmin-dropdown-link-color: $cadmin-gray-600 !default;
85
85
  $cadmin-dropdown-link-font-weight: $cadmin-font-weight-normal !default;
package/src/scss/cadmin/variables/_modals.scss CHANGED
@@ -346,7 +346,7 @@ $cadmin-modal: map-deep-merge(
346
346
  padding-right: $cadmin-modal-footer-padding-x,
347
347
  padding-top: $cadmin-modal-footer-padding-y,
348
348
  '> *': (
349
- margin: calc(#{$cadmin-modal-footer-margin-between} * 0.5),
349
+ margin: 0 calc(#{$cadmin-modal-footer-margin-between} * 0.5),
350
350
  ),
351
351
  ),
352
352
  modal-title: (
@@ -367,6 +367,26 @@ $cadmin-modal: map-deep-merge(
367
367
  margin-top: -0.2em,
368
368
  vertical-align: middle,
369
369
  ),
370
+ media-breakpoint-down: (
371
+ sm: (
372
+ close: (
373
+ margin-right: -8px,
374
+ ),
375
+ modal-header: (
376
+ height: 48px,
377
+ padding: 8px 16px,
378
+ ),
379
+ modal-title: (
380
+ font-size: 18px,
381
+ ),
382
+ modal-body: (
383
+ padding: 8px 16px,
384
+ ),
385
+ modal-footer: (
386
+ padding: 8px,
387
+ ),
388
+ ),
389
+ ),
370
390
  ),
371
391
  $cadmin-modal
372
392
  );