mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 17:37:36 +01:00
168 lines
3.0 KiB
SCSS
168 lines
3.0 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(--gutter-negative);
|
|
left: var(--gutter-negative);
|
|
}
|
|
|
|
> .sl-l-grid__column {
|
|
padding: {
|
|
right: var(--gutter);
|
|
left: var(--gutter);
|
|
}
|
|
}
|
|
|
|
&-large {
|
|
margin: {
|
|
right: var(--gutter-double-negative);
|
|
left: var(--gutter-double-negative);
|
|
}
|
|
|
|
> .sl-l-grid__column {
|
|
padding: {
|
|
right: var(--gutter-double);
|
|
left: var(--gutter-double);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-small {
|
|
margin: {
|
|
right: var(--gutter-half-negative);
|
|
left: var(--gutter-half-negative);
|
|
}
|
|
|
|
> .sl-l-grid__column {
|
|
padding: {
|
|
right: var(--gutter-half);
|
|
left: var(--gutter-half);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|