mirror of https://github.com/mashirozx/sakura.git
38 lines
1.1 KiB
SCSS
38 lines
1.1 KiB
SCSS
@use 'sass:math';
|
|
@mixin _flex-gap($gap, $row: true) {
|
|
$margin: math.div($gap, 2);
|
|
$transform: -$margin;
|
|
@if $row {
|
|
margin-left: $transform;
|
|
margin-right: $transform;
|
|
} @else {
|
|
margin-top: $transform;
|
|
margin-bottom: $transform;
|
|
}
|
|
> * {
|
|
@if $row {
|
|
margin-left: $margin;
|
|
margin-right: $margin;
|
|
} @else {
|
|
margin-top: $margin;
|
|
margin-bottom: $margin;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
|
|
@if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
|
|
@include _flex-gap($gap, true);
|
|
} @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
|
|
@include _flex-gap($gap, false);
|
|
} @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
|
|
@include _flex-gap($gap, true);
|
|
@include _flex-gap($gap, false);
|
|
} @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
|
|
@include _flex-gap($gap, true);
|
|
@include _flex-gap($gap, false);
|
|
} @else {
|
|
@error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
|
|
}
|
|
}
|