You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.6 KiB
58 lines
1.6 KiB
@use 'sass:list';
|
|
@use 'sass:math';
|
|
|
|
@mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: $direction;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
flex-wrap: wrap;
|
|
column-gap: list.nth($gap, 1);
|
|
row-gap: list.nth($gap, 2);
|
|
|
|
@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: list.nth($minmax, 2);
|
|
& > *: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($max) != "" {
|
|
@if $direction == 'row' {
|
|
max-width: $max;
|
|
} @else {
|
|
max-height: $max;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} @else {
|
|
& > * {
|
|
flex: 1 0 auto;
|
|
}
|
|
}
|
|
}
|