@clayui/css 3.76.0 → 3.78.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 (12) hide show
  1. package/lib/css/atlas.css +121 -484
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +105 -449
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +76 -1376
  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/_license-text.scss +1 -1
  10. package/src/scss/cadmin/variables/_management-bar.scss +529 -0
  11. package/src/scss/cadmin/variables/_navigation-bar.scss +246 -2
  12. package/src/scss/mixins/_navbar.scss +256 -247
package/src/scss/mixins/_navbar.scss CHANGED
@@ -654,223 +654,227 @@
654
654
  &#{$infix} {
655
655
  // .navbar-expand, sm, md, lg, xl
656
656
  @if not($infix == '') {
657
- // .navbar-expand-sm, md, lg, xl
658
- @include media-breakpoint-down($breakpoint) {
659
- min-height: $min-height-mobile;
657
+ @if not(map-get($map, media-breakpoint-down)) {
658
+ // .navbar-expand-sm, md, lg, xl
659
+ @include media-breakpoint-down($breakpoint) {
660
+ min-height: $min-height-mobile;
660
661
 
661
- &.navbar-collapse-absolute {
662
- .navbar-collapse {
663
- border-color: transparent;
664
- border-style: solid;
665
- border-width: 0 $border-right-width
666
- $border-bottom-width
667
- $border-left-width;
668
-
669
- @include box-shadow($box-shadow);
670
-
671
- left: -$border-left-width;
672
- margin-top: $border-bottom-width;
673
- padding-bottom: $padding-y;
674
- padding-left: $padding-x;
675
- padding-right: $padding-x;
676
- padding-top: $padding-y;
677
- right: -$border-right-width;
662
+ &.navbar-collapse-absolute {
663
+ .navbar-collapse {
664
+ border-color: transparent;
665
+ border-style: solid;
666
+ border-width: 0 $border-right-width
667
+ $border-bottom-width
668
+ $border-left-width;
669
+
670
+ @include box-shadow($box-shadow);
671
+
672
+ left: -$border-left-width;
673
+ margin-top: $border-bottom-width;
674
+ padding-bottom: $padding-y;
675
+ padding-left: $padding-x;
676
+ padding-right: $padding-x;
677
+ padding-top: $padding-y;
678
+ right: -$border-right-width;
679
+ }
678
680
  }
679
- }
680
681
 
681
- .navbar-collapse {
682
- .navbar-nav {
683
- .dropdown-divider {
684
- margin-left: -$padding-x;
685
- margin-right: -$padding-x;
686
- }
682
+ .navbar-collapse {
683
+ .navbar-nav {
684
+ .dropdown-divider {
685
+ margin-left: -$padding-x;
686
+ margin-right: -$padding-x;
687
+ }
687
688
 
688
- .dropdown-item {
689
- padding-bottom: $collapse-dropdown-item-padding-y-mobile;
690
- padding-left: $collapse-dropdown-item-padding-x-mobile;
691
- padding-right: $collapse-dropdown-item-padding-x-mobile;
692
- padding-top: $collapse-dropdown-item-padding-y-mobile;
689
+ .dropdown-item {
690
+ padding-bottom: $collapse-dropdown-item-padding-y-mobile;
691
+ padding-left: $collapse-dropdown-item-padding-x-mobile;
692
+ padding-right: $collapse-dropdown-item-padding-x-mobile;
693
+ padding-top: $collapse-dropdown-item-padding-y-mobile;
694
+ }
693
695
  }
694
696
  }
695
- }
696
697
 
697
- .navbar-form {
698
- height: calc(
699
- #{$height-mobile} - #{$border-bottom-width} -
700
- #{$border-top-width}
701
- );
702
- padding-bottom: $link-padding-y-mobile;
703
- padding-left: $link-padding-x-mobile;
704
- padding-right: $link-padding-x-mobile;
705
- padding-top: $link-padding-y-mobile;
706
-
707
- .form-control {
708
- height: $form-control-height-mobile;
709
- padding-bottom: 0;
710
- padding-top: 0;
698
+ .navbar-form {
699
+ height: calc(
700
+ #{$height-mobile} - #{$border-bottom-width} -
701
+ #{$border-top-width}
702
+ );
703
+ padding-bottom: $link-padding-y-mobile;
704
+ padding-left: $link-padding-x-mobile;
705
+ padding-right: $link-padding-x-mobile;
706
+ padding-top: $link-padding-y-mobile;
707
+
708
+ .form-control {
709
+ height: $form-control-height-mobile;
710
+ padding-bottom: 0;
711
+ padding-top: 0;
712
+ }
711
713
  }
712
714
  }
713
715
  }
714
- }
715
716
 
716
- @include media-breakpoint-up($next) {
717
- .container,
718
- .container-fluid {
719
- @if ($scaling-navbar) {
720
- padding-left: $container-padding-x;
721
- padding-right: $container-padding-x;
722
- }
723
- }
717
+ @if not(map-get($map, media-breakpoint-up)) {
718
+ @include media-breakpoint-up($next) {
719
+ .container,
720
+ .container-fluid {
721
+ @if ($scaling-navbar) {
722
+ padding-left: $container-padding-x;
723
+ padding-right: $container-padding-x;
724
+ }
725
+ }
724
726
 
725
- .navbar-brand {
726
- @if ($scaling-navbar) {
727
- font-size: $brand-font-size;
728
- margin-right: $brand-margin-right;
729
- padding-bottom: $brand-padding-y;
730
- padding-left: $brand-padding-x;
731
- padding-right: $brand-padding-x;
732
- padding-top: $brand-padding-y;
733
-
734
- @if ($enable-c-inner) {
735
- .c-inner {
736
- margin-bottom: math-sign(
737
- $brand-padding-y
738
- );
739
- margin-left: math-sign(
740
- $brand-padding-x
741
- );
742
- margin-right: math-sign(
743
- $brand-padding-x
744
- );
745
- margin-top: math-sign(
746
- $brand-padding-y
747
- );
727
+ .navbar-brand {
728
+ @if ($scaling-navbar) {
729
+ font-size: $brand-font-size;
730
+ margin-right: $brand-margin-right;
731
+ padding-bottom: $brand-padding-y;
732
+ padding-left: $brand-padding-x;
733
+ padding-right: $brand-padding-x;
734
+ padding-top: $brand-padding-y;
735
+
736
+ @if ($enable-c-inner) {
737
+ .c-inner {
738
+ margin-bottom: math-sign(
739
+ $brand-padding-y
740
+ );
741
+ margin-left: math-sign(
742
+ $brand-padding-x
743
+ );
744
+ margin-right: math-sign(
745
+ $brand-padding-x
746
+ );
747
+ margin-top: math-sign(
748
+ $brand-padding-y
749
+ );
750
+ }
751
+ }
748
752
  }
749
753
  }
750
- }
751
- }
752
754
 
753
- .navbar-form {
754
- @if ($scaling-navbar) {
755
- height: calc(
756
- #{$height} -
757
- #{$border-bottom-width} -
758
- #{$border-top-width}
759
- );
760
- padding-left: $link-padding-x;
761
- padding-right: $link-padding-x;
755
+ .navbar-form {
756
+ @if ($scaling-navbar) {
757
+ height: calc(
758
+ #{$height} -
759
+ #{$border-bottom-width} -
760
+ #{$border-top-width}
761
+ );
762
+ padding-left: $link-padding-x;
763
+ padding-right: $link-padding-x;
762
764
 
763
- > .container,
764
- > .container-fluid {
765
- padding-left: 0;
766
- padding-right: 0;
767
- }
765
+ > .container,
766
+ > .container-fluid {
767
+ padding-left: 0;
768
+ padding-right: 0;
769
+ }
768
770
 
769
- .form-control {
770
- height: $form-control-height;
771
+ .form-control {
772
+ height: $form-control-height;
773
+ }
774
+ }
771
775
  }
772
- }
773
- }
774
776
 
775
- .nav-btn {
776
- @if ($scaling-navbar) {
777
- font-size: $btn-font-size;
778
- height: $btn-monospaced-size;
779
- margin-bottom: $btn-margin-y;
780
- margin-left: $btn-margin-x;
781
- margin-right: $btn-margin-x;
782
- margin-top: $btn-margin-y;
783
- padding-bottom: $btn-padding-y;
784
- padding-left: $btn-padding-x;
785
- padding-right: $btn-padding-x;
786
- padding-top: $btn-padding-y;
787
- min-width: $btn-monospaced-size;
788
-
789
- @if ($enable-c-inner) {
790
- .c-inner {
791
- margin-bottom: math-sign(
792
- $btn-padding-y
793
- );
794
- margin-left: math-sign(
795
- $btn-padding-x
796
- );
797
- margin-right: math-sign(
798
- $btn-padding-x
799
- );
800
- margin-top: math-sign(
801
- $btn-padding-y
802
- );
777
+ .nav-btn {
778
+ @if ($scaling-navbar) {
779
+ font-size: $btn-font-size;
780
+ height: $btn-monospaced-size;
781
+ margin-bottom: $btn-margin-y;
782
+ margin-left: $btn-margin-x;
783
+ margin-right: $btn-margin-x;
784
+ margin-top: $btn-margin-y;
785
+ padding-bottom: $btn-padding-y;
786
+ padding-left: $btn-padding-x;
787
+ padding-right: $btn-padding-x;
788
+ padding-top: $btn-padding-y;
789
+ min-width: $btn-monospaced-size;
790
+
791
+ @if ($enable-c-inner) {
792
+ .c-inner {
793
+ margin-bottom: math-sign(
794
+ $btn-padding-y
795
+ );
796
+ margin-left: math-sign(
797
+ $btn-padding-x
798
+ );
799
+ margin-right: math-sign(
800
+ $btn-padding-x
801
+ );
802
+ margin-top: math-sign(
803
+ $btn-padding-y
804
+ );
805
+ }
806
+ }
803
807
  }
804
808
  }
805
- }
806
- }
807
809
 
808
- .nav-btn-monospaced {
809
- @if ($scaling-navbar) {
810
- font-size: $btn-monospaced-font-size;
811
- padding: 0;
810
+ .nav-btn-monospaced {
811
+ @if ($scaling-navbar) {
812
+ font-size: $btn-monospaced-font-size;
813
+ padding: 0;
812
814
 
813
- @if ($enable-c-inner) {
814
- .c-inner {
815
- margin: 0;
815
+ @if ($enable-c-inner) {
816
+ .c-inner {
817
+ margin: 0;
818
+ }
819
+ }
816
820
  }
817
821
  }
818
- }
819
- }
820
822
 
821
- .nav-item {
822
- > .custom-control,
823
- > .form-check {
824
- @if ($scaling-navbar) {
825
- margin-left: $btn-margin-x;
826
- margin-right: $btn-margin-x;
823
+ .nav-item {
824
+ > .custom-control,
825
+ > .form-check {
826
+ @if ($scaling-navbar) {
827
+ margin-left: $btn-margin-x;
828
+ margin-right: $btn-margin-x;
829
+ }
830
+ }
827
831
  }
828
- }
829
- }
830
832
 
831
- .nav-link,
832
- .navbar-text {
833
- @if ($scaling-navbar) {
834
- margin-bottom: $link-margin-y;
835
- margin-left: $link-margin-x;
836
- margin-right: $link-margin-x;
837
- margin-top: $link-margin-y;
838
- padding-bottom: $link-padding-y;
839
- padding-left: $link-padding-x;
840
- padding-right: $link-padding-x;
841
- padding-top: $link-padding-y;
842
-
843
- @if ($enable-c-inner) {
844
- .c-inner {
845
- margin-bottom: math-sign(
846
- $link-padding-y
847
- );
848
- margin-left: math-sign(
849
- $link-padding-x
850
- );
851
- margin-right: math-sign(
852
- $link-padding-x
853
- );
854
- margin-top: math-sign(
855
- $link-padding-y
856
- );
833
+ .nav-link,
834
+ .navbar-text {
835
+ @if ($scaling-navbar) {
836
+ margin-bottom: $link-margin-y;
837
+ margin-left: $link-margin-x;
838
+ margin-right: $link-margin-x;
839
+ margin-top: $link-margin-y;
840
+ padding-bottom: $link-padding-y;
841
+ padding-left: $link-padding-x;
842
+ padding-right: $link-padding-x;
843
+ padding-top: $link-padding-y;
844
+
845
+ @if ($enable-c-inner) {
846
+ .c-inner {
847
+ margin-bottom: math-sign(
848
+ $link-padding-y
849
+ );
850
+ margin-left: math-sign(
851
+ $link-padding-x
852
+ );
853
+ margin-right: math-sign(
854
+ $link-padding-x
855
+ );
856
+ margin-top: math-sign(
857
+ $link-padding-y
858
+ );
859
+ }
860
+ }
857
861
  }
858
862
  }
859
- }
860
- }
861
863
 
862
- .nav-link-monospaced {
863
- @if ($scaling-navbar) {
864
- font-size: $btn-monospaced-font-size;
865
- margin-bottom: $btn-margin-y;
866
- margin-left: $btn-margin-x;
867
- margin-right: $btn-margin-x;
868
- margin-top: $btn-margin-y;
869
- padding: 0;
870
-
871
- @if ($enable-c-inner) {
872
- .c-inner {
873
- margin: 0;
864
+ .nav-link-monospaced {
865
+ @if ($scaling-navbar) {
866
+ font-size: $btn-monospaced-font-size;
867
+ margin-bottom: $btn-margin-y;
868
+ margin-left: $btn-margin-x;
869
+ margin-right: $btn-margin-x;
870
+ margin-top: $btn-margin-y;
871
+ padding: 0;
872
+
873
+ @if ($enable-c-inner) {
874
+ .c-inner {
875
+ margin: 0;
876
+ }
877
+ }
874
878
  }
875
879
  }
876
880
  }
@@ -880,72 +884,80 @@
880
884
  }
881
885
  }
882
886
 
883
- // Navbar Overlay Styles for `.navbar-overlay-xs-down`,
884
- // `.navbar-overlay-sm-down`, `.navbar-overlay-md-down`,
885
- // `.navbar-overlay-lg-down`, `.navbar-overlay-up`
887
+ // if media-breakpoint-up doesn't exist output styles .navbar-expand-{sm|md|lg|xl|??}
886
888
 
887
- @each $breakpoint in map-keys($breakpoints) {
888
- $index: index(map-keys($breakpoints), $breakpoint);
889
- $length: length(map-keys($breakpoints));
890
- $infix: '.navbar-overlay-#{$breakpoint}-down';
889
+ @if not(map-get($map, media-breakpoint-down)) {
890
+ // Navbar Overlay Styles for `.navbar-overlay-xs-down`,
891
+ // `.navbar-overlay-sm-down`, `.navbar-overlay-md-down`,
892
+ // `.navbar-overlay-lg-down`, `.navbar-overlay-up`
891
893
 
892
- @if ($index == $length) {
893
- $infix: '.navbar-overlay-up';
894
- }
894
+ @each $breakpoint in map-keys($breakpoints) {
895
+ $index: index(map-keys($breakpoints), $breakpoint);
896
+ $length: length(map-keys($breakpoints));
897
+ $infix: '.navbar-overlay-#{$breakpoint}-down';
898
+
899
+ @if ($index == $length) {
900
+ $infix: '.navbar-overlay-up';
901
+ }
895
902
 
896
- #{$infix} {
897
- @include media-breakpoint-down($breakpoint) {
898
- @include border-radius(
899
- if(
900
- variable-exists(navbar-border-radius),
901
- $navbar-border-radius,
903
+ #{$infix} {
904
+ @include media-breakpoint-down($breakpoint) {
905
+ @include border-radius(
902
906
  if(
903
- variable-exists(
904
- cadmin-navbar-border-radius
905
- ),
906
- $cadmin-navbar-border-radius,
907
- null
907
+ variable-exists(navbar-border-radius),
908
+ $navbar-border-radius,
909
+ if(
910
+ variable-exists(
911
+ cadmin-navbar-border-radius
912
+ ),
913
+ $cadmin-navbar-border-radius,
914
+ null
915
+ )
908
916
  )
909
- )
910
- );
917
+ );
911
918
 
912
- padding-bottom: $padding-y;
913
- padding-left: $padding-x;
914
- padding-right: $padding-x;
915
- padding-top: $padding-y;
919
+ padding-bottom: $padding-y;
920
+ padding-left: $padding-x;
921
+ padding-right: $padding-x;
922
+ padding-top: $padding-y;
923
+ }
916
924
  }
917
925
  }
918
- }
919
926
 
920
- // Navbar Underline
927
+ // Navbar Underline
921
928
 
922
- &.navbar-underline {
923
- .navbar-toggler-link {
924
- &:after {
925
- bottom: $active-border-offset-bottom-mobile;
926
- height: $active-border-bottom-width;
927
- left: $active-border-offset-x;
928
- right: $active-border-offset-x;
929
- top: $active-border-offset-top;
929
+ &.navbar-underline {
930
+ .navbar-toggler-link {
931
+ &:after {
932
+ bottom: $active-border-offset-bottom-mobile;
933
+ height: $active-border-bottom-width;
934
+ left: $active-border-offset-x;
935
+ right: $active-border-offset-x;
936
+ top: $active-border-offset-top;
937
+ }
930
938
  }
931
939
  }
932
- }
933
-
934
- &.navbar-underline.navbar-expand {
935
- @each $breakpoint in map-keys($breakpoints) {
936
- $next: breakpoint-next($breakpoint, $breakpoints);
937
- $infix: breakpoint-infix($next, $breakpoints);
938
940
 
939
- &#{$infix} {
940
- // .navbar-expand, sm, md, lg, xl
941
- @include media-breakpoint-up($next) {
942
- .navbar-nav .nav-link {
943
- &.active:after {
944
- bottom: $active-border-offset-bottom;
945
- height: $active-border-bottom-width;
946
- left: $active-border-offset-x;
947
- right: $active-border-offset-x;
948
- top: $active-border-offset-top;
941
+ // if media-breakpoint-up doesn't exist output styles .navbar-expand-{sm|md|lg|xl|??}
942
+
943
+ @if not(map-get($map, media-breakpoint-up)) {
944
+ &.navbar-underline.navbar-expand {
945
+ @each $breakpoint in map-keys($breakpoints) {
946
+ $next: breakpoint-next($breakpoint, $breakpoints);
947
+ $infix: breakpoint-infix($next, $breakpoints);
948
+
949
+ &#{$infix} {
950
+ // .navbar-expand, sm, md, lg, xl
951
+ @include media-breakpoint-up($next) {
952
+ .navbar-nav .nav-link {
953
+ &.active:after {
954
+ bottom: $active-border-offset-bottom;
955
+ height: $active-border-bottom-width;
956
+ left: $active-border-offset-x;
957
+ right: $active-border-offset-x;
958
+ top: $active-border-offset-top;
959
+ }
960
+ }
949
961
  }
950
962
  }
951
963
  }
@@ -971,8 +983,7 @@
971
983
  map-deep-get($map, navbar-underline, navbar-nav)
972
984
  );
973
985
 
974
- .nav-link,
975
- .btn-unstyled {
986
+ .nav-link {
976
987
  @include clay-link(
977
988
  map-deep-get(
978
989
  $map,
@@ -1080,8 +1091,7 @@
1080
1091
  }
1081
1092
 
1082
1093
  .navbar-nav {
1083
- .nav-link,
1084
- .btn-unstyled {
1094
+ .nav-link {
1085
1095
  @include clay-link(
1086
1096
  map-deep-get($map, navbar-nav, nav-link)
1087
1097
  );
@@ -1474,8 +1484,7 @@
1474
1484
  }
1475
1485
 
1476
1486
  .navbar-nav {
1477
- .nav-link,
1478
- .btn-unstyled {
1487
+ .nav-link {
1479
1488
  @include clay-link($nav-link);
1480
1489
  }
1481
1490
 
@@ -1704,7 +1713,7 @@
1704
1713
  }
1705
1714
 
1706
1715
  // if media-breakpoint-down doesn't exist output styles .navbar-expand-{sm|md|lg|xl|??}
1707
- // deprecated use `media-breakpoint-down` key instead
1716
+ // deprecated use the key `media-breakpoint-down` instead
1708
1717
 
1709
1718
  @if not(map-get($map, media-breakpoint-down)) {
1710
1719
  &.navbar-expand {
@@ -1781,7 +1790,7 @@
1781
1790
  }
1782
1791
 
1783
1792
  // if media-breakpoint-up doesn't exist output styles .navbar-expand through .navbar-expand-{sm|md|lg|xl|??}
1784
- // deprecated use `media-breakpoint-up` key instead
1793
+ // deprecated use the key `media-breakpoint-up` instead
1785
1794
 
1786
1795
  @if not(map-get($map, media-breakpoint-up)) {
1787
1796
  &.navbar-expand {