Improve the flex-group component.

frjo · Jan 30, 2024 · 8e5f7c5 · 8e5f7c5
1 parent f724500
commit 8e5f7c5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/assets/sass/components/flex-group/_flex-group.scss b/assets/sass/components/flex-group/_flex-group.scss
@@ -8,25 +8,33 @@
 
   & > * {
     flex: 1;
+    flex-basis: 100%;
+    flex-grow: 0;
   }
 
-  &--2 > * {
-    @include flex(2, $gap);
+  &--grow {
+    flex-grow: 1;
   }
 
-  &--3 > * {
-    @include flex(3, $gap);
-  }
+  @include respond-to(s) {
+    &--2 > * {
+      @include flex(2, $gap);
+    }
 
-  &--4 > * {
-    @include flex(4, $gap);
-  }
+    &--3 > * {
+      @include flex(3, $gap);
+    }
 
-  &--5 > * {
-    @include flex(5, $gap);
-  }
+    &--4 > * {
+      @include flex(4, $gap);
+    }
+
+    &--5 > * {
+      @include flex(5, $gap);
+    }
 
-  &--6 > * {
-    @include flex(6, $gap);
+    &--6 > * {
+      @include flex(6, $gap);
+    }
   }
 }
diff --git a/assets/sass/mixins/flex-calc/_flex-calc.scss b/assets/sass/mixins/flex-calc/_flex-calc.scss
@@ -1,4 +1,3 @@
-@mixin flex($c, $x) {
-  flex-basis: calc(100% / #{$c} - #{$x * $base-line-height + 'rem'});
-  flex-grow: 0;
+@mixin flex($col, $gap) {
+  flex-basis: calc(100% / #{$col} - #{$gap * $base-line-height + 'rem'});
 }