sumedia-webdesign/scss-framework
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

fix

Browse source
This commit is contained in:
Sven Ullmann 2025-07-20 03:14:41 +02:00
parent 554c1cc1df
commit d221819e31
5 changed files with 119 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

120
mixin/_layout.scss
View file

@ -3,12 +3,20 @@
/*
@include layout(column, [
("m" "full" ((0 0) (0 0) (1 1) (0 0)))
]);
("m" "full" (
((0 0) (0 0) (1 1) (0 0)) (0 50%)
),
(0 "m" (
((0 0)) (100% 100%)
)
], (1rem 1rem));
@include layout($flex-direction, [
($bpMinWidth $bpMaxWidth ((flex:), ...)))
]);
($bpMinWidth $bpMaxWidth (
((flex:), ...))
((minmax:))
)
], (gapRow gapColumn);
*/
@mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
display: flex;
@ -27,62 +35,84 @@
row-gap: $rowGap;
& > * {
flex: 1 0 auto;
flex: 0 0 auto;
}
@if list.length($bpColumns) > 0 {
@for $bpIndex from 1 through list.length($bpColumns) {
$bp: list.nth($bpColumns, $bpIndex);
@include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
$columns: list.nth($bp, 3);
@for $i from 1 through list.length($columns) {
$minmax: list.nth($columns, $i);
$min: list.nth($minmax, 1);
$max: $min;
@if list.length($minmax) == 2 {
@if list.length($bp) >= 3 {
$flex: list.nth($bp, 3);
@for $i from 1 through list.length($flex) {
$flexGrowShrink: list.nth($flex, $i);
$grow: 0;
$shrink: 0;
@if list.length($flexGrowShrink) >= 1 {
$grow: list.nth($flexGrowShrink, 1);
}
@if list.length($flexGrowShrink) == 2 {
$shrink: list.nth($flexGrowShrink, 2);
}
$length: list.length($flex);
$childs: $length + 'n+' + $i;
& > *:nth-child(#{$childs}) {
flex: $grow $shrink auto;
}
}
}
@if list.length($bp) == 4 {
$columns: list.nth($bp, 4);
@for $i from 1 through list.length($columns) {
$minmax: list.nth($columns, $i);
$min: list.nth($minmax, 1);
$max: $min;
@if list.length($minmax) == 2 {
$max: list.nth($minmax, 2);
}
$length: list.length($columns);
$childs: $length + 'n+' + $i;
}
$length: list.length($columns);
$childs: $length + 'n+' + $i;
@if math.unit($min) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$min: calc(#{$min} - #{math.div($rowGap, list.length($columns) - 1)});
@if math.unit($min) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$min: calc(#{$min} - (#{$rowGap} / #{$length}));
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$min: calc(#{$min} - (#{$columnGap} / #{$length}));
}
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)});
}
}
}
@if math.unit($max) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)});
@if math.unit($max) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$max: calc(#{$max} - (#{$rowGap} / #{$length}));
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$max: calc(#{$max} - (#{$columnGap} / #{$length}));
}
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)});
}
}
}
& > *:nth-child(#{$childs}) {
flex: $max $min auto;
@if $direction == 'row' and $min != 0 {
min-width: $min;
} @else if $min > 0 {
min-height: $min;
}
@if $direction == 'row' and $max != 0 {
max-width: $max;
} @else if $max > 0 {
max-height: $max;
& > *:nth-child(#{$childs}) {
@if $direction == 'row' and $min != 0 {
min-width: $min;
} @else if $min > 0 {
min-height: $min;
}
@if $direction == 'row' and $max != 0 {
max-width: $max;
} @else if $max > 0 {
max-height: $max;
}
}
}
}