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'}); }