initial public commit
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user