@nordcode/ui 1.0.1 → 1.0.2

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 (6) hide show
  1. package/out/bundle.css +19 -28
  2. package/out/bundle_configless.css +19 -28
  3. package/out/complete.css +19 -28
  4. package/out/complete_configless.css +19 -28
  5. package/package.json +5 -1
  6. package/src/styles/utils/layouts.css +30 -42
package/out/bundle.css CHANGED
@@ -910,10 +910,6 @@
910
910
  display: flex;
911
911
  }
912
912
 
913
- :where(.nc-stack).-inherit {
914
- gap: var(--stack-gap, var(--spacing-base));
915
- }
916
-
917
913
  :where(.nc-stack).-stretched {
918
914
  inline-size: 100%;
919
915
  }
@@ -975,10 +971,6 @@
975
971
  display: flex;
976
972
  }
977
973
 
978
- :where(.nc-cluster).-inherit {
979
- gap: var(--cluster-gap, var(--spacing-base));
980
- }
981
-
982
974
  :where(.nc-cluster).-centered {
983
975
  align-items: center;
984
976
  }
@@ -1061,49 +1053,48 @@
1061
1053
  grid-area: pile;
1062
1054
  }
1063
1055
 
1064
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
1056
+ :where(.nc-ram-grid) {
1057
+ --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
1058
+ --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
1059
+ --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
1060
+ --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
1061
+ --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
1062
+ gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
1063
+ grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
1064
+ display: grid;
1065
+ }
1066
+
1067
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
1065
1068
  gap: inherit;
1066
1069
  }
1067
1070
 
1068
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
1071
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
1069
1072
  gap: var(--spacing-tiny);
1070
1073
  }
1071
1074
 
1072
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
1075
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
1073
1076
  gap: var(--spacing-nearest);
1074
1077
  }
1075
1078
 
1076
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
1079
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
1077
1080
  gap: var(--spacing-near);
1078
1081
  }
1079
1082
 
1080
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
1083
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
1081
1084
  gap: var(--spacing-base);
1082
1085
  }
1083
1086
 
1084
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
1087
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
1085
1088
  gap: var(--spacing-far);
1086
1089
  }
1087
1090
 
1088
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
1091
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
1089
1092
  gap: var(--spacing-farthest);
1090
1093
  }
1091
1094
 
1092
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
1095
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
1093
1096
  gap: 0;
1094
1097
  }
1095
-
1096
- :where(.nc-ram-grid) {
1097
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
1098
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
1099
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
1100
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
1101
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
1102
- row-gap: var(--_nc-ram-grid-gap-row);
1103
- column-gap: var(--_nc-ram-grid-gap-column);
1104
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
1105
- display: grid;
1106
- }
1107
1098
  }
1108
1099
 
1109
1100
  @layer components, helpers;
package/out/bundle_configless.css CHANGED
@@ -645,10 +645,6 @@
645
645
  display: flex;
646
646
  }
647
647
 
648
- :where(.nc-stack).-inherit {
649
- gap: var(--stack-gap, var(--spacing-base));
650
- }
651
-
652
648
  :where(.nc-stack).-stretched {
653
649
  inline-size: 100%;
654
650
  }
@@ -710,10 +706,6 @@
710
706
  display: flex;
711
707
  }
712
708
 
713
- :where(.nc-cluster).-inherit {
714
- gap: var(--cluster-gap, var(--spacing-base));
715
- }
716
-
717
709
  :where(.nc-cluster).-centered {
718
710
  align-items: center;
719
711
  }
@@ -796,49 +788,48 @@
796
788
  grid-area: pile;
797
789
  }
798
790
 
799
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
791
+ :where(.nc-ram-grid) {
792
+ --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
793
+ --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
794
+ --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
795
+ --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
796
+ --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
797
+ gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
798
+ grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
799
+ display: grid;
800
+ }
801
+
802
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
800
803
  gap: inherit;
801
804
  }
802
805
 
803
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
806
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
804
807
  gap: var(--spacing-tiny);
805
808
  }
806
809
 
807
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
810
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
808
811
  gap: var(--spacing-nearest);
809
812
  }
810
813
 
811
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
814
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
812
815
  gap: var(--spacing-near);
813
816
  }
814
817
 
815
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
818
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
816
819
  gap: var(--spacing-base);
817
820
  }
818
821
 
819
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
822
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
820
823
  gap: var(--spacing-far);
821
824
  }
822
825
 
823
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
826
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
824
827
  gap: var(--spacing-farthest);
825
828
  }
826
829
 
827
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
830
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
828
831
  gap: 0;
829
832
  }
830
-
831
- :where(.nc-ram-grid) {
832
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
833
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
834
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
835
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
836
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
837
- row-gap: var(--_nc-ram-grid-gap-row);
838
- column-gap: var(--_nc-ram-grid-gap-column);
839
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
840
- display: grid;
841
- }
842
833
  }
843
834
 
844
835
  @layer components, helpers;
package/out/complete.css CHANGED
@@ -910,10 +910,6 @@
910
910
  display: flex;
911
911
  }
912
912
 
913
- :where(.nc-stack).-inherit {
914
- gap: var(--stack-gap, var(--spacing-base));
915
- }
916
-
917
913
  :where(.nc-stack).-stretched {
918
914
  inline-size: 100%;
919
915
  }
@@ -975,10 +971,6 @@
975
971
  display: flex;
976
972
  }
977
973
 
978
- :where(.nc-cluster).-inherit {
979
- gap: var(--cluster-gap, var(--spacing-base));
980
- }
981
-
982
974
  :where(.nc-cluster).-centered {
983
975
  align-items: center;
984
976
  }
@@ -1061,49 +1053,48 @@
1061
1053
  grid-area: pile;
1062
1054
  }
1063
1055
 
1064
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
1056
+ :where(.nc-ram-grid) {
1057
+ --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
1058
+ --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
1059
+ --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
1060
+ --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
1061
+ --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
1062
+ gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
1063
+ grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
1064
+ display: grid;
1065
+ }
1066
+
1067
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
1065
1068
  gap: inherit;
1066
1069
  }
1067
1070
 
1068
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
1071
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
1069
1072
  gap: var(--spacing-tiny);
1070
1073
  }
1071
1074
 
1072
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
1075
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
1073
1076
  gap: var(--spacing-nearest);
1074
1077
  }
1075
1078
 
1076
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
1079
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
1077
1080
  gap: var(--spacing-near);
1078
1081
  }
1079
1082
 
1080
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
1083
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
1081
1084
  gap: var(--spacing-base);
1082
1085
  }
1083
1086
 
1084
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
1087
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
1085
1088
  gap: var(--spacing-far);
1086
1089
  }
1087
1090
 
1088
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
1091
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
1089
1092
  gap: var(--spacing-farthest);
1090
1093
  }
1091
1094
 
1092
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
1095
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
1093
1096
  gap: 0;
1094
1097
  }
1095
-
1096
- :where(.nc-ram-grid) {
1097
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
1098
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
1099
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
1100
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
1101
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
1102
- row-gap: var(--_nc-ram-grid-gap-row);
1103
- column-gap: var(--_nc-ram-grid-gap-column);
1104
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
1105
- display: grid;
1106
- }
1107
1098
  }
1108
1099
 
1109
1100
  @layer components, helpers;
package/out/complete_configless.css CHANGED
@@ -645,10 +645,6 @@
645
645
  display: flex;
646
646
  }
647
647
 
648
- :where(.nc-stack).-inherit {
649
- gap: var(--stack-gap, var(--spacing-base));
650
- }
651
-
652
648
  :where(.nc-stack).-stretched {
653
649
  inline-size: 100%;
654
650
  }
@@ -710,10 +706,6 @@
710
706
  display: flex;
711
707
  }
712
708
 
713
- :where(.nc-cluster).-inherit {
714
- gap: var(--cluster-gap, var(--spacing-base));
715
- }
716
-
717
709
  :where(.nc-cluster).-centered {
718
710
  align-items: center;
719
711
  }
@@ -796,49 +788,48 @@
796
788
  grid-area: pile;
797
789
  }
798
790
 
799
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
791
+ :where(.nc-ram-grid) {
792
+ --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
793
+ --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
794
+ --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
795
+ --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
796
+ --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
797
+ gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
798
+ grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
799
+ display: grid;
800
+ }
801
+
802
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
800
803
  gap: inherit;
801
804
  }
802
805
 
803
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
806
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
804
807
  gap: var(--spacing-tiny);
805
808
  }
806
809
 
807
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
810
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
808
811
  gap: var(--spacing-nearest);
809
812
  }
810
813
 
811
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
814
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
812
815
  gap: var(--spacing-near);
813
816
  }
814
817
 
815
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
818
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
816
819
  gap: var(--spacing-base);
817
820
  }
818
821
 
819
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
822
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
820
823
  gap: var(--spacing-far);
821
824
  }
822
825
 
823
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
826
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
824
827
  gap: var(--spacing-farthest);
825
828
  }
826
829
 
827
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
830
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
828
831
  gap: 0;
829
832
  }
830
-
831
- :where(.nc-ram-grid) {
832
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
833
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
834
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
835
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
836
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
837
- row-gap: var(--_nc-ram-grid-gap-row);
838
- column-gap: var(--_nc-ram-grid-gap-column);
839
- grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
840
- display: grid;
841
- }
842
833
  }
843
834
 
844
835
  @layer components, helpers;
package/package.json CHANGED
@@ -8,7 +8,11 @@
8
8
  "Boneless UI"
9
9
  ],
10
10
  "license": "AGPL-3.0-or-later",
11
- "version": "1.0.1",
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
+ },
15
+ "version": "1.0.2",
12
16
  "publishConfig": {
13
17
  "access": "public"
14
18
  },
package/src/styles/utils/layouts.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @layer utils {
2
+
2
3
  /* Layout classes that handle 80% of the layout*/
3
4
  :where(.nc-box) {
4
5
  padding: var(--spacing-base);
@@ -39,46 +40,42 @@
39
40
  gap: var(--spacing-base);
40
41
  align-items: flex-start;
41
42
 
42
- &.-inherit {
43
- gap: var(--stack-gap, var(--spacing-base));
44
- }
45
-
46
43
  &.-stretched {
47
44
  inline-size: 100%;
48
45
 
49
- & > * {
46
+ &>* {
50
47
  inline-size: 100%;
51
48
  }
52
49
  }
53
50
 
54
- &.-contained > * {
51
+ &.-contained>* {
55
52
  max-inline-size: 100%;
56
53
  }
57
54
  }
58
55
 
59
56
  :where(.nc-flow) {
60
- > * + * {
57
+ >*+* {
61
58
  margin-block-start: var(--flow-gap, 0.6lh);
62
59
  }
63
60
 
64
- > * {
61
+ >* {
65
62
  max-inline-size: var(--flow-base-meassure, 72ch);
66
63
  }
67
64
 
68
- > *:is(h1, h2, h3, h4, h5, h6) {
65
+ >*:is(h1, h2, h3, h4, h5, h6) {
69
66
  max-inline-size: var(--flow-headline-meassure, 32ch);
70
67
  --flow-gap: 1.3lh;
71
68
  }
72
69
 
73
- > *:is(h1, h2, h3, h4, h5, h6) + p {
70
+ >*:is(h1, h2, h3, h4, h5, h6)+p {
74
71
  --flow-gap: 0.5lh;
75
72
  }
76
73
 
77
- > p + p {
74
+ >p+p {
78
75
  --flow-gap: 0.8lh;
79
76
  }
80
77
 
81
- > figure {
78
+ >figure {
82
79
  margin-inline: 0;
83
80
  margin-block: 1lh;
84
81
  }
@@ -114,10 +111,6 @@
114
111
  gap: var(--spacing-base);
115
112
  align-items: flex-start;
116
113
 
117
- &.-inherit {
118
- gap: var(--cluster-gap, var(--spacing-base));
119
- }
120
-
121
114
  &.-centered {
122
115
  align-items: center;
123
116
  }
@@ -138,13 +131,13 @@
138
131
  align-items: flex-start;
139
132
  gap: var(--with-sidebar-gap, var(--spacing-far));
140
133
 
141
- & > [data-aside] {
134
+ &>[data-aside] {
142
135
  flex-grow: 1;
143
136
  min-width: min-content;
144
137
  flex-basis: var(--with-sidebar-target-width, 20rem);
145
138
  }
146
139
 
147
- & > [data-grow] {
140
+ &>[data-grow] {
148
141
  flex-basis: 0;
149
142
  flex-grow: 999;
150
143
  min-width: var(--with-sidebar-min-size, 50%);
@@ -177,10 +170,8 @@
177
170
  */
178
171
  :where(.nc-grid) {
179
172
  display: grid;
180
- grid-template-columns: repeat(
181
- var(--grid-placement, auto-fill),
182
- minmax(var(--grid-min-item-size, 16rem), 1fr)
183
- );
173
+ grid-template-columns: repeat(var(--grid-placement, auto-fill),
174
+ minmax(var(--grid-min-item-size, 16rem), 1fr));
184
175
  gap: var(--grid-gap, var(--spacing-base));
185
176
 
186
177
  /* A split 50/50 layout */
@@ -220,7 +211,7 @@
220
211
  gap: var(--switcher-gap, var(--spacing-base));
221
212
  align-items: var(--switcher-vertical-alignment, flex-start);
222
213
 
223
- & > * {
214
+ &>* {
224
215
  flex-grow: 1;
225
216
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
226
217
  }
@@ -228,7 +219,7 @@
228
219
  /* Max 2 items,
229
220
  so anything greater than 2 is ful width */
230
221
 
231
- & > :nth-child(n + 4) {
222
+ &> :nth-child(n + 4) {
232
223
  flex-basis: 100%;
233
224
  }
234
225
  }
@@ -241,12 +232,25 @@
241
232
  place-items: center;
242
233
  grid: [pile] 1fr / [pile] 1fr;
243
234
 
244
- & > * {
235
+ &>* {
245
236
  grid-area: pile;
246
237
  }
247
238
  }
248
239
 
249
- :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher) {
240
+ :where(.nc-ram-grid) {
241
+ --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
242
+ --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
243
+ --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
244
+ --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
245
+ --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
246
+
247
+ display: grid;
248
+ gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
249
+ grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count),
250
+ minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
251
+ }
252
+
253
+ :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid) {
250
254
  &.-inherit {
251
255
  gap: inherit;
252
256
  }
@@ -279,20 +283,4 @@
279
283
  gap: 0;
280
284
  }
281
285
  }
282
-
283
- :where(.nc-ram-grid) {
284
- --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
285
- --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
286
- --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
287
- --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
288
- --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
289
-
290
- display: grid;
291
- row-gap: var(--_nc-ram-grid-gap-row);
292
- column-gap: var(--_nc-ram-grid-gap-column);
293
- grid-template-columns: repeat(
294
- var(--_nc-ram-grid-repeat-count),
295
- minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr)
296
- );
297
- }
298
286
  }