80 lines
1.4 KiB
SCSS
80 lines
1.4 KiB
SCSS
/**
|
|
* Grid
|
|
*/
|
|
|
|
$column-padding: 1rem;
|
|
$margin-bottom: 1rem;
|
|
|
|
// The rows have a negative margin which are offset by the padding on the columns.
|
|
%column-padding {
|
|
@include padding-left($column-padding);
|
|
@include padding-right($column-padding);
|
|
}
|
|
|
|
%row-margin {
|
|
@include margin-left(-$column-padding);
|
|
@include margin-right(-$column-padding);
|
|
}
|
|
|
|
// Flex row
|
|
.row {
|
|
@extend %row-margin;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.grid-small,
|
|
.grid-large {
|
|
@extend %column-padding;
|
|
flex-basis: 100%;
|
|
margin-bottom: $margin-bottom;
|
|
}
|
|
|
|
/* Small screen breakpoint */
|
|
|
|
@include media-query($from: mobile) {
|
|
.grid-small {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
&.half {
|
|
flex: 0 0 calc(1 / 2 * 100%);
|
|
}
|
|
&.one-fourth {
|
|
flex: 0 0 calc(1 / 4 * 100%);
|
|
}
|
|
&.three-fourths {
|
|
flex: 0 0 calc(3 / 4 * 100%);
|
|
}
|
|
&.one-third {
|
|
flex: 0 0 calc(1 / 3 * 100%);
|
|
}
|
|
&.two-thirds {
|
|
flex: 0 0 calc(2 / 3 * 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Large screen breakpoint */
|
|
@include media-query($from: desktop) {
|
|
.grid-large {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
&.half {
|
|
flex: 0 0 calc(1 / 2 * 100%);
|
|
}
|
|
&.one-fourth {
|
|
flex: 0 0 calc(1 / 4 * 100%);
|
|
}
|
|
&.three-fourths {
|
|
flex: 0 0 calc(3 / 4 * 100%);
|
|
}
|
|
&.one-third {
|
|
flex: 0 0 calc(1 / 3 * 100%);
|
|
}
|
|
&.two-thirds {
|
|
flex: 0 0 calc(2 / 3 * 100%);
|
|
}
|
|
}
|
|
}
|