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 02:08:48 +02:00
parent 552fd6d097
commit 554c1cc1df
1 changed files with 36 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

82
mixin/_layout.scss
View file

@ -17,8 +17,14 @@
align-items: stretch;
align-content: stretch;
flex-wrap: wrap;
column-gap: list.nth($gap, 1);
row-gap: list.nth($gap, 2);
$columnGap: list.nth($gap, 1);
$rowGap: 0;
@if list.length($gap) == 2 {
$rowGap: list.nth($gap, 2);
}
column-gap: $columnGap;
row-gap: $rowGap;
& > * {
flex: 1 0 auto;
@ -40,59 +46,43 @@
$length: list.length($columns);
$childs: $length + 'n+' + $i;
& > *:nth-child(#{$i}) {
@if math.unit($min) == "" and math.unit($max) == "" {
flex: $max $min min-content;
} @else if math.unit($min) == "" {
flex: 1 $min auto;
} @else if math.unit($max) == "" {
flex: $max 0 auto;
} @else {
flex: 1 0 auto;
}
@if math.unit($min) != "" {
@if $direction == 'row' {
min-width: $min;
} @else {
min-height: $min;
@if math.unit($min) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$min: calc(#{$min} - #{math.div($rowGap, list.length($columns) - 1)});
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)});
}
}
}
@if math.unit($max) != "" {
@if $direction == 'row' {
max-width: $max;
} @else {
max-height: $max;
@if math.unit($max) != "" {
@if $direction == 'row' {
@if $rowGap > 0 {
$max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)});
}
}
@if $direction == 'column' {
@if $columnGap > 0 {
$max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)});
}
}
}
& > *:nth-child(#{$childs}) {
@if math.unit($min) == "" and math.unit($max) == "" {
flex: $max $min min-content;
} @else if math.unit($min) == "" {
flex: 1 $min auto;
} @else if math.unit($max) == "" {
flex: $max 0 auto;
} @else {
flex: 1 0 auto;
flex: $max $min auto;
@if $direction == 'row' and $min != 0 {
min-width: $min;
} @else if $min > 0 {
min-height: $min;
}
@if math.unit($min) != "" {
@if $direction == 'row' {
min-width: $min;
} @else {
min-height: $min;
}
}
@if math.unit($max) != "" {
@if $direction == 'row' {
max-width: $max;
} @else {
max-height: $max;
}
@if $direction == 'row' and $max != 0 {
max-width: $max;
} @else if $max > 0 {
max-height: $max;
}
}
}