From 8e5f7c54c7a5cea4a4e1fea1d7b73dc174c1c7a6 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 30 Jan 2024 19:36:44 +0100
Subject: [PATCH] Improve the flex-group component.

---
 .../components/flex-group/_flex-group.scss    | 34 ++++++++++++-------
 assets/sass/mixins/flex-calc/_flex-calc.scss  |  5 ++-
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/assets/sass/components/flex-group/_flex-group.scss b/assets/sass/components/flex-group/_flex-group.scss
index b95efcbd..30cc1d7c 100644
--- 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
index 72b574be..6c634a2e 100644
--- 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'});
 }