feat: More work on portal

1 files changed, 56 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/components/auto-sized-grid.scss b/apps/web-shared/src/styles/components/auto-sized-grid.scss
new file mode 100644
index 0000000..a3b1be5
--- /dev/null
+++ b/apps/web-shared/src/styles/components/auto-sized-grid.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_auto-sized-grid
+Title: Auto Sized Grid
+Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
+  display: grid;
+  gap: var(--gap-y, 0px) var(--gap-x, 0px);
+  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols
+}
+
+.grid-auto-xs {
+  --col-min-width: 8rem;
+}
+
+.grid-auto-sm {
+  --col-min-width: 10rem;
+}
+
+.grid-auto-md {
+  --col-min-width: 15rem;
+}
+
+.grid-auto-lg {
+  --col-min-width: 20rem;
+}
+
+.grid-auto-xl {
+  --col-min-width: 25rem;
+}
+
+@each $breakpoint, $value in $breakpoints {
+  @include breakpoint(#{$breakpoint}) {
+    .grid-auto-xs\@#{$breakpoint} {
+      --col-min-width: 8rem;
+    }
+    .grid-auto-sm\@#{$breakpoint} {
+      --col-min-width: 10rem;
+    }
+    .grid-auto-md\@#{$breakpoint} {
+      --col-min-width: 15rem;
+    }
+    .grid-auto-lg\@#{$breakpoint} {
+      --col-min-width: 20rem;
+    }
+    .grid-auto-xl\@#{$breakpoint} {
+      --col-min-width: 25rem;
+    }
+  }
+}