ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the flex-group component.

Browse source
This commit is contained in:
Fredrik Jonsson 2024-01-30 19:36:44 +01:00
commit 8e5f7c54c7
2 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

34
assets/sass/components/flex-group/_flex-group.scss
View file

@ -8,25 +8,33 @@
& > * { & > * {
flex: 1; flex: 1;
flex-basis: 100%;
flex-grow: 0;
} }
&--2 > * { &--grow {
@include flex(2, $gap); flex-grow: 1;
} }
&--3 > * { @include respond-to(s) {
@include flex(3, $gap); &--2 > * {
} @include flex(2, $gap);
}
&--4 > * { &--3 > * {
@include flex(4, $gap); @include flex(3, $gap);
} }
&--5 > * { &--4 > * {
@include flex(5, $gap); @include flex(4, $gap);
} }
&--6 > * { &--5 > * {
@include flex(6, $gap); @include flex(5, $gap);
}
&--6 > * {
@include flex(6, $gap);
}
} }
} }

5
assets/sass/mixins/flex-calc/_flex-calc.scss
View file

@ -1,4 +1,3 @@
@mixin flex($c, $x) { @mixin flex($col, $gap) {
flex-basis: calc(100% / #{$c} - #{$x * $base-line-height + 'rem'}); flex-basis: calc(100% / #{$col} - #{$gap * $base-line-height + 'rem'});
flex-grow: 0;
} }