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-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);
}
&--6 > * {
@include flex(6, $gap);
&--5 > * {
@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) {
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'});
}