80 lines
1.5 KiB
SCSS
80 lines
1.5 KiB
SCSS
@use "sass:math";
|
|
|
|
$gridSizesMap: (
|
|
"sm": 576px,
|
|
"md": 768px,
|
|
"lg": 992px,
|
|
"xl": 1200px,
|
|
"xxl": 1400px,
|
|
);
|
|
|
|
.grid {
|
|
--gridGap: var(--baseSpacing);
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
row-gap: var(--gridGap);
|
|
margin: 0 calc(-0.5 * var(--gridGap));
|
|
&.grid-center {
|
|
align-items: center;
|
|
}
|
|
&.grid-sm {
|
|
--gridGap: var(--smSpacing);
|
|
}
|
|
.form-field {
|
|
margin-bottom: 0;
|
|
}
|
|
> * {
|
|
margin: 0 calc(0.5 * var(--gridGap));
|
|
}
|
|
}
|
|
|
|
%col {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 1px;
|
|
}
|
|
|
|
// grid
|
|
// -------------------------------------------------------------------
|
|
|
|
@mixin colsWidthGenerator($prefix: '') {
|
|
// normalize prefix
|
|
@if $prefix != '' and str-index($prefix, '-') != 1 {
|
|
$prefix: '-#{$prefix}';
|
|
}
|
|
|
|
.col#{$prefix}-auto {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
}
|
|
|
|
@for $i from 12 through 1 {
|
|
.col#{$prefix}-#{$i} {
|
|
width: calc(math.div(100%, math.div(12, $i)) - var(--gridGap));
|
|
}
|
|
}
|
|
}
|
|
|
|
// base screen size cols
|
|
@for $i from 12 through 1 {
|
|
.col-#{$i} {
|
|
@extend %col;
|
|
}
|
|
}
|
|
@include colsWidthGenerator();
|
|
|
|
// screen size specific cols
|
|
@each $name, $size in $gridSizesMap {
|
|
@for $i from 12 through 1 {
|
|
.col-#{$name}-#{$i} {
|
|
@extend %col;
|
|
}
|
|
}
|
|
@media (min-width: #{$size}) {
|
|
@include colsWidthGenerator($name);
|
|
}
|
|
}
|