122 lines
3.2 KiB
SCSS
122 lines
3.2 KiB
SCSS
@use 'sass:list';
|
|
@use 'sass:math';
|
|
|
|
/*
|
|
@include layout(column, [
|
|
("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:), ...))
|
|
((minmax:))
|
|
)
|
|
], (gapRow gapColumn);
|
|
*/
|
|
@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;
|
|
|
|
$columnGap: list.nth($gap, 1);
|
|
$rowGap: 0;
|
|
@if list.length($gap) == 2 {
|
|
$rowGap: list.nth($gap, 2);
|
|
}
|
|
column-gap: $columnGap;
|
|
row-gap: $rowGap;
|
|
|
|
& > * {
|
|
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)) {
|
|
|
|
@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;
|
|
|
|
@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 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}));
|
|
}
|
|
}
|
|
}
|
|
|
|
& > *: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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|