@studio-helga/once-ui-core 1.7.8

package/dist/styles/grid.scss

@@ -0,0 +1,293 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.display-grid {
+  display: grid;
+}
+
+.columns-1 {
+  grid-template-columns: 1fr;
+}
+
+.columns-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.columns-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.columns-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.columns-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.columns-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.columns-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.columns-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.columns-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.columns-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.columns-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.columns-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.grid-hide {
+  display: none;
+}
+
+.grid-show {
+  display: grid;
+}
+
+@include breakpoints.l {
+  .l-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .l-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .l-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .l-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .l-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .l-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .l-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .l-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .l-columns-9 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .l-columns-10 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .l-columns-11 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .l-columns-12 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+
+  .l-grid-hide {
+    display: none;
+  }
+
+  .l-grid-show {
+    display: grid;
+  }
+}
+
+@include breakpoints.m {
+  .m-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .m-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .m-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .m-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .m-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .m-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .m-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .m-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .m-columns-9 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .m-columns-10 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .m-columns-11 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .m-columns-12 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+
+  .m-grid-hide {
+    display: none;
+  }
+
+  .m-grid-show {
+    display: grid;
+  }
+}
+
+@include breakpoints.s {
+  .s-columns-1 {
+      grid-template-columns: 1fr;
+  }
+
+  .s-columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+  }
+
+  .s-columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+  }
+
+  .s-columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+  }
+
+  .s-columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+  }
+
+  .s-columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+  }
+
+  .s-columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+  }
+
+  .s-columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+  }
+
+  .s-columns-9 {
+      grid-template-columns: repeat(9, 1fr);
+  }
+
+  .s-columns-10 {
+      grid-template-columns: repeat(10, 1fr);
+  }
+
+  .s-columns-11 {
+      grid-template-columns: repeat(11, 1fr);
+  }
+
+  .s-columns-12 {
+      grid-template-columns: repeat(12, 1fr);
+  }
+
+  .s-grid-hide {
+    display: none;
+  }
+
+  .s-grid-show {
+    display: grid;
+  }
+}
+
+@include breakpoints.xs {
+    .xs-columns-1 {
+        grid-template-columns: 1fr;
+    }
+
+    .xs-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .xs-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .xs-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .xs-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+
+    .xs-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+    .xs-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .xs-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+    }
+
+    .xs-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+    }
+
+    .xs-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+    }
+
+    .xs-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+    }
+
+    .xs-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    .xs-grid-hide {
+        display: none;
+    }
+
+    .xs-grid-show {
+        display: grid;
+    }
+}

package/dist/styles/index.scss

@@ -0,0 +1,14 @@
+@use "./breakpoints.scss";
+@use "./spacing.scss";
+@use "./border.scss";
+@use "./color.scss";
+@use "./background.scss";
+@use "./typography.scss";
+@use "./global.scss";
+@use "./shadow.scss";
+@use "./size.scss";
+@use "./display.scss";
+@use "./position.scss";
+@use "./grid.scss";
+@use "./flex.scss";
+@use "./utilities.scss";