mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
45d8be5525
* Rename breakpoints by shortnames * Replace `tiny` breakpoint for `xs` in spacing loop * Add 2xs, 4xl and 5xl breakpoints
179 lines
4.4 KiB
SCSS
179 lines
4.4 KiB
SCSS
// ==========================================================================
|
|
// Grid helper
|
|
// ==========================================================================
|
|
// Help: https://css-tricks.com/snippets/css/complete-guide-grid/
|
|
//
|
|
/**
|
|
* Usage:
|
|
*
|
|
* ```html
|
|
* <div class="o-grid -col-4 -col-12@from-medium -gutters">
|
|
* <div class="o-grid_item u-gc-1/2 u-gc-3/9@from-medium">
|
|
* <p>Hello</p>
|
|
* </div>
|
|
* <div class="o-grid_item u-gc-3/4 u-gc-9/13@from-medium">
|
|
* <p>Hello</p>
|
|
* </div>
|
|
* </div>
|
|
* ```
|
|
*/
|
|
|
|
.o-grid {
|
|
display: grid;
|
|
width: 100%;
|
|
|
|
&:is(ul, ol) {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Cols
|
|
// ==========================================================================
|
|
|
|
// Responsive grid columns based on `--grid-columns`
|
|
&.-cols {
|
|
grid-template-columns: repeat(var(--grid-columns), 1fr);
|
|
}
|
|
|
|
&.-col-#{$base-column-nb} {
|
|
grid-template-columns: repeat(#{$base-column-nb}, 1fr);
|
|
}
|
|
|
|
&.-col-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
&.-col-#{$base-column-nb}\@from-md {
|
|
@media (min-width: $from-md) {
|
|
grid-template-columns: repeat(#{$base-column-nb}, 1fr);
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Gutters
|
|
// ==========================================================================
|
|
|
|
// Gutters rows and columns
|
|
&.-gutters {
|
|
gap: var(--grid-gutter);
|
|
column-gap: var(--grid-gutter);
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Modifiers
|
|
// ==========================================================================
|
|
&.-full-height {
|
|
height: 100%;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Aligns
|
|
// ==========================================================================
|
|
|
|
// ==========================================================================
|
|
// Items inside cells
|
|
//
|
|
&.-top-items {
|
|
align-items: start;
|
|
}
|
|
&.-right-items {
|
|
justify-items: end;
|
|
}
|
|
&.-bottom-items {
|
|
align-items: end;
|
|
}
|
|
&.-left-items {
|
|
justify-items: start;
|
|
}
|
|
&.-center-items {
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
&.-center-items-x {
|
|
justify-items: center;
|
|
}
|
|
&.-center-items-y {
|
|
align-items: center;
|
|
}
|
|
&.-stretch-items {
|
|
align-items: stretch;
|
|
justify-items: stretch;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Cells
|
|
//
|
|
&.-top-cells {
|
|
align-content: start;
|
|
}
|
|
&.-right-cells {
|
|
justify-content: end;
|
|
}
|
|
&.-bottom-cells {
|
|
align-content: end;
|
|
}
|
|
&.-left-cells {
|
|
justify-content: start;
|
|
}
|
|
&.-center-cells {
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
&.-center-cells-x {
|
|
justify-content: center;
|
|
}
|
|
&.-center-cells-y {
|
|
align-content: center;
|
|
}
|
|
&.-stretch-cells {
|
|
align-content: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
&.-space-around-cells {
|
|
align-content: space-around;
|
|
justify-content: space-around;
|
|
}
|
|
&.-space-around-cells-x {
|
|
justify-content: space-around;
|
|
}
|
|
&.-space-around-cells-y {
|
|
align-content: space-around;
|
|
}
|
|
&.-space-between-cells {
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
}
|
|
&.-space-between-cells-x {
|
|
justify-content: space-between;
|
|
}
|
|
&.-space-between-cells-y {
|
|
align-content: space-between;
|
|
}
|
|
&.-space-evenly-cells {
|
|
justify-content: space-evenly;
|
|
align-content: space-evenly;
|
|
}
|
|
&.-space-evenly-cells-x {
|
|
justify-content: space-evenly;
|
|
}
|
|
&.-space-evenly-cells-y {
|
|
align-content: space-evenly;
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Grid item
|
|
// ==========================================================================
|
|
// By default, a grid item takes full width of its parent.
|
|
//
|
|
.o-grid_item {
|
|
grid-column-start: var(--gc-start, 1);
|
|
grid-column-end: var(--gc-end, -1);
|
|
|
|
&.-align-end {
|
|
align-self: end;
|
|
}
|
|
}
|