@clayui/css 3.40.1 → 3.41.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 (27) hide show
  1. package/lib/css/atlas.css +232 -164
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +196 -98
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +215 -152
  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/atlas/variables/_forms.scss +33 -1
  10. package/src/scss/atlas/variables/_globals.scss +13 -0
  11. package/src/scss/cadmin/components/_form-validation.scss +10 -237
  12. package/src/scss/cadmin/components/_reboot.scss +1 -8
  13. package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
  14. package/src/scss/cadmin/variables/_forms.scss +353 -2
  15. package/src/scss/cadmin/variables/_globals.scss +14 -0
  16. package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
  17. package/src/scss/components/_form-validation.scss +8 -237
  18. package/src/scss/components/_reboot.scss +1 -8
  19. package/src/scss/components/_toggle-switch.scss +36 -351
  20. package/src/scss/functions/_global-functions.scss +18 -0
  21. package/src/scss/mixins/_forms.scss +419 -4
  22. package/src/scss/mixins/_globals.scss +7 -0
  23. package/src/scss/mixins/_links.scss +248 -63
  24. package/src/scss/mixins/_toggle-switch.scss +1076 -14
  25. package/src/scss/variables/_forms.scss +295 -1
  26. package/src/scss/variables/_globals.scss +13 -0
  27. package/src/scss/variables/_toggle-switch.scss +404 -5
package/src/scss/variables/_forms.scss CHANGED
@@ -504,19 +504,70 @@ $form-check-inline-margin-x: 0.75rem !default;
504
504
 
505
505
  $form-check-inline-input-margin-x: auto !default;
506
506
 
507
- // Form Feedback
507
+ // .form-feedback-group
508
+
509
+ $form-feedback-group: () !default;
510
+ $form-feedback-group: map-merge(
511
+ (
512
+ width: 100%,
513
+ word-wrap: break-word,
514
+ ),
515
+ $form-feedback-group
516
+ );
517
+
518
+ // .form-text
508
519
 
509
520
  $form-text-color: $gray-600 !default;
510
521
  $form-text-font-size: 0.875rem !default; // 14px
511
522
  $form-text-font-weight: null !default;
512
523
  $form-text-margin-top: 0.25rem !default;
513
524
 
525
+ $form-text: () !default;
526
+ $form-text: map-merge(
527
+ (
528
+ color: $form-text-color,
529
+ display: block,
530
+ font-size: $form-text-font-size,
531
+ font-weight: $form-text-font-weight,
532
+ margin-top: $form-text-margin-top,
533
+ word-wrap: break-word,
534
+ ),
535
+ $form-text
536
+ );
537
+
538
+ // .form-feedback-item
539
+
514
540
  $form-feedback-font-size: $small-font-size !default;
515
541
  $form-feedback-font-weight: null !default;
516
542
  $form-feedback-margin-top: 0.25rem !default;
517
543
 
544
+ $form-feedback-item: () !default;
545
+ $form-feedback-item: map-merge(
546
+ (
547
+ font-size: $form-feedback-font-size,
548
+ font-weight: $form-feedback-font-weight,
549
+ margin-top: $form-feedback-margin-top,
550
+ word-wrap: break-word,
551
+ ),
552
+ $form-feedback-item
553
+ );
554
+
555
+ // .form-feedback-indicator
556
+
518
557
  $form-feedback-indicator-margin-x: 0.125rem !default;
519
558
 
559
+ $form-feedback-indicator: () !default;
560
+ $form-feedback-indicator: map-deep-merge(
561
+ (
562
+ margin-left: $form-feedback-indicator-margin-x,
563
+ margin-right: $form-feedback-indicator-margin-x,
564
+ first-child: (
565
+ margin-left: 0,
566
+ ),
567
+ ),
568
+ $form-feedback-indicator
569
+ );
570
+
520
571
  $form-feedback-valid-color: $success !default;
521
572
 
522
573
  $form-feedback-warning-color: $warning !default;
@@ -630,6 +681,87 @@ $input-danger-select-multiple: map-deep-merge(
630
681
  $input-danger-select-multiple
631
682
  );
632
683
 
684
+ // .has-error
685
+
686
+ $has-error: () !default;
687
+ $has-error: map-deep-merge(
688
+ (
689
+ label: (
690
+ color: $input-danger-label-color,
691
+ ),
692
+ custom-control-label: (
693
+ color: $input-danger-checkbox-label-color,
694
+ ),
695
+ form-control:
696
+ map-deep-merge(
697
+ (
698
+ readonly: $input-danger-readonly,
699
+ ),
700
+ $input-danger
701
+ ),
702
+ form-feedback-item: (
703
+ color: $form-feedback-invalid-color,
704
+ ),
705
+ select: (
706
+ form-control:
707
+ map-deep-merge(
708
+ (
709
+ multiple: $input-danger-select-multiple,
710
+ size: $input-danger-select-size,
711
+ ),
712
+ $input-danger-select
713
+ ),
714
+ ),
715
+ input-group-item: (
716
+ focus: (
717
+ box-shadow:
718
+ setter(
719
+ $input-danger-focus-box-shadow,
720
+ $input-danger-box-shadow
721
+ ),
722
+ input-group-inset: (
723
+ background-color:
724
+ setter($input-danger-focus-bg, $input-danger-bg),
725
+ border-color:
726
+ setter(
727
+ $input-danger-focus-border-color,
728
+ $input-danger-border-color
729
+ ),
730
+ input-group-inset-item: (
731
+ background-color:
732
+ setter($input-danger-focus-bg, $input-danger-bg),
733
+ border-color:
734
+ setter(
735
+ $input-danger-focus-border-color,
736
+ $input-danger-border-color
737
+ ),
738
+ ),
739
+ ),
740
+ ),
741
+ input-group-inset: (
742
+ input-group-inset-item: (
743
+ background-color: $input-danger-bg,
744
+ border-color: $input-danger-border-color,
745
+ box-shadow: $input-danger-box-shadow,
746
+ ),
747
+ focus: (
748
+ box-shadow: none,
749
+ input-group-inset-item: (
750
+ background-color:
751
+ setter($input-danger-focus-bg, $input-danger-bg),
752
+ border-color:
753
+ setter(
754
+ $input-danger-focus-border-color,
755
+ $input-danger-border-color
756
+ ),
757
+ ),
758
+ ),
759
+ ),
760
+ ),
761
+ ),
762
+ $has-error
763
+ );
764
+
633
765
  // .has-warning .form-control
634
766
 
635
767
  $input-warning-bg: null !default;
@@ -702,6 +834,87 @@ $input-warning-select-multiple: map-deep-merge(
702
834
  $input-warning-select-multiple
703
835
  );
704
836
 
837
+ // .has-warning
838
+
839
+ $has-warning: () !default;
840
+ $has-warning: map-deep-merge(
841
+ (
842
+ label: (
843
+ color: $input-warning-label-color,
844
+ ),
845
+ custom-control-label: (
846
+ color: $input-warning-checkbox-label-color,
847
+ ),
848
+ form-control:
849
+ map-deep-merge(
850
+ (
851
+ readonly: $input-warning-readonly,
852
+ ),
853
+ $input-warning
854
+ ),
855
+ form-feedback-item: (
856
+ color: $form-feedback-warning-color,
857
+ ),
858
+ select: (
859
+ form-control:
860
+ map-deep-merge(
861
+ (
862
+ multiple: $input-warning-select-multiple,
863
+ size: $input-warning-select-size,
864
+ ),
865
+ $input-warning-select
866
+ ),
867
+ ),
868
+ input-group-item: (
869
+ focus: (
870
+ box-shadow:
871
+ setter(
872
+ $input-warning-focus-box-shadow,
873
+ $input-warning-box-shadow
874
+ ),
875
+ input-group-inset: (
876
+ background-color:
877
+ setter($input-warning-focus-bg, $input-warning-bg),
878
+ border-color:
879
+ setter(
880
+ $input-warning-focus-border-color,
881
+ $input-warning-border-color
882
+ ),
883
+ input-group-inset-item: (
884
+ background-color:
885
+ setter($input-warning-focus-bg, $input-warning-bg),
886
+ border-color:
887
+ setter(
888
+ $input-warning-focus-border-color,
889
+ $input-warning-border-color
890
+ ),
891
+ ),
892
+ ),
893
+ ),
894
+ input-group-inset: (
895
+ input-group-inset-item: (
896
+ background-color: $input-warning-bg,
897
+ border-color: $input-warning-border-color,
898
+ box-shadow: $input-warning-box-shadow,
899
+ ),
900
+ focus: (
901
+ box-shadow: none,
902
+ input-group-inset-item: (
903
+ background-color:
904
+ setter($input-warning-focus-bg, $input-warning-bg),
905
+ border-color:
906
+ setter(
907
+ $input-warning-focus-border-color,
908
+ $input-warning-border-color
909
+ ),
910
+ ),
911
+ ),
912
+ ),
913
+ ),
914
+ ),
915
+ $has-warning
916
+ );
917
+
705
918
  // .has-success .form-control
706
919
 
707
920
  $input-success-bg: null !default;
@@ -774,6 +987,87 @@ $input-success-select-multiple: map-deep-merge(
774
987
  $input-success-select-multiple
775
988
  );
776
989
 
990
+ // .has-success
991
+
992
+ $has-success: () !default;
993
+ $has-success: map-deep-merge(
994
+ (
995
+ label: (
996
+ color: $input-success-label-color,
997
+ ),
998
+ custom-control-label: (
999
+ color: $input-success-checkbox-label-color,
1000
+ ),
1001
+ form-control:
1002
+ map-deep-merge(
1003
+ (
1004
+ readonly: $input-success-readonly,
1005
+ ),
1006
+ $input-success
1007
+ ),
1008
+ form-feedback-item: (
1009
+ color: $form-feedback-valid-color,
1010
+ ),
1011
+ select: (
1012
+ form-control:
1013
+ map-deep-merge(
1014
+ (
1015
+ multiple: $input-success-select-multiple,
1016
+ size: $input-success-select-size,
1017
+ ),
1018
+ $input-success-select
1019
+ ),
1020
+ ),
1021
+ input-group-item: (
1022
+ focus: (
1023
+ box-shadow:
1024
+ setter(
1025
+ $input-success-focus-box-shadow,
1026
+ $input-success-box-shadow
1027
+ ),
1028
+ input-group-inset: (
1029
+ background-color:
1030
+ setter($input-success-focus-bg, $input-success-bg),
1031
+ border-color:
1032
+ setter(
1033
+ $input-success-focus-border-color,
1034
+ $input-success-border-color
1035
+ ),
1036
+ input-group-inset-item: (
1037
+ background-color:
1038
+ setter($input-success-focus-bg, $input-success-bg),
1039
+ border-color:
1040
+ setter(
1041
+ $input-success-focus-border-color,
1042
+ $input-success-border-color
1043
+ ),
1044
+ ),
1045
+ ),
1046
+ ),
1047
+ input-group-inset: (
1048
+ input-group-inset-item: (
1049
+ background-color: $input-success-bg,
1050
+ border-color: $input-success-border-color,
1051
+ box-shadow: $input-success-box-shadow,
1052
+ ),
1053
+ focus: (
1054
+ box-shadow: none,
1055
+ input-group-inset-item: (
1056
+ background-color:
1057
+ setter($input-success-focus-bg, $input-success-bg),
1058
+ border-color:
1059
+ setter(
1060
+ $input-success-focus-border-color,
1061
+ $input-success-border-color
1062
+ ),
1063
+ ),
1064
+ ),
1065
+ ),
1066
+ ),
1067
+ ),
1068
+ $has-success
1069
+ );
1070
+
777
1071
  // Select Element
778
1072
 
779
1073
  $input-select-bg: null !default;
package/src/scss/variables/_globals.scss CHANGED
@@ -432,6 +432,19 @@ $link-decoration: none !default;
432
432
  $link-hover-color: clay-darken($link-color, 15%) !default;
433
433
  $link-hover-decoration: underline !default;
434
434
 
435
+ $link: () !default;
436
+ $link: map-deep-merge(
437
+ (
438
+ color: $link-color,
439
+ text-decoration: $link-decoration,
440
+ hover: (
441
+ color: $link-hover-color,
442
+ text-decoration: $link-hover-decoration,
443
+ ),
444
+ ),
445
+ $link
446
+ );
447
+
435
448
  /// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
436
449
  /// @deprecated as of v3.x with no replacement, fixed percentages do not propagate well for all colors; manually define them for each theme color in `$text-theme-colors`.
437
450