sass-site/source/assets/sass/layout/_grid-system.scss
2023-02-21 13:51:32 -06:00

169 lines
3.1 KiB
SCSS

@use 'sass:math';
@use '../breakpoints';
@use '../functions';
.sl-l-grid {
&,
&--flex-columns > .sl-l-grid__column {
display: flex;
}
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
&__column {
flex: 1;
}
}
@each $breakpoint, $size in breakpoints.$sl-breakpoints {
$prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');
@include breakpoints.sl-breakpoint-set($breakpoint, $size) {
.sl-l-#{$prefix}grid {
&--top {
align-items: flex-start;
}
&--center {
align-items: center;
}
&--bottom {
align-items: flex-end;
}
&--stretch {
align-items: stretch;
}
&--baseline {
align-items: baseline;
}
&--justify {
&-left {
justify-content: flex-start;
}
&-center {
justify-content: center;
}
&-right {
justify-content: flex-end;
}
&-space {
&-between {
justify-content: space-between;
}
&-around {
justify-content: space-around;
}
&-evenly {
justify-content: space-evenly;
}
}
}
&--fit > .sl-l-grid__column {
flex: 1;
}
&--full > .sl-l-grid__column {
flex: 0 0 100%;
}
@for $i from 2 through 12 {
&--divide-by-#{$i} > .sl-l-grid__column {
flex: 0 0 math.div(100, $i) * 1%;
}
}
&__column {
&--top {
align-self: flex-start !important;
}
&--center {
align-self: center !important;
}
&--bottom {
align-self: flex-end !important;
}
&--baseline {
align-self: baseline !important;
}
&--stretch {
align-self: stretch !important;
}
&--auto-size {
flex: none !important;
}
@for $i from 1 through 11 {
&--#{$i}-of-12 {
width: math.div(100%, 12) * $i !important;
}
}
&--full {
width: 100% !important;
}
}
&--gutters {
margin: {
right: var(--sl-gutter--negative);
left: var(--sl-gutter--negative);
}
> .sl-l-grid__column {
padding: {
right: var(--sl-gutter);
left: var(--sl-gutter);
}
}
&-large {
margin: {
right: var(--sl-gutter--double-negative);
left: var(--sl-gutter--double-negative);
}
> .sl-l-grid__column {
padding: {
right: var(--sl-gutter--double);
left: var(--sl-gutter--double);
}
}
}
&-small {
margin: {
right: var(--sl-gutter--half-negative);
left: var(--sl-gutter--half-negative);
}
> .sl-l-grid__column {
padding: {
right: var(--sl-gutter--half);
left: var(--sl-gutter--half);
}
}
}
}
}
}
}