spaCy/website/assets/css/_base/_grid.sass

59 lines
1.1 KiB
Sass

//- 💫 CSS > BASE > GRID
//- Grid container
.o-grid
display: flex
flex-wrap: wrap
@include breakpoint(min, sm)
flex-direction: row
align-items: stretch
justify-content: space-between
&.o-grid--center
align-items: center
justify-content: center
&.o-grid--vcenter
align-items: center
&.o-grid--space
justify-content: space-between
&.o-grid--nowrap
flex-wrap: nowrap
//- Grid column
.o-grid__col
$grid-gutter: 2rem
margin-top: $grid-gutter
@include breakpoint(min, lg)
display: flex
flex: 0 0 100%
flex-direction: column
flex-wrap: wrap
@each $mode, $count in $grid
&.o-grid__col--#{$mode}
$percentage: calc(#{100% / $count} - #{$grid-gutter})
flex: 0 0 $percentage
max-width: $percentage
@include breakpoint(max, md)
flex: 0 0 100%
flex-flow: column wrap
&.o-grid__col--no-gutter
margin-top: 0
// Fix overflow issue in old browsers
& > *
flex-shrink: 1
max-width: 100%