spaCy/website/assets/css/_base/_grid.sass
2016-11-01 00:16:42 +01:00

44 lines
874 B
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
//- Grid column
.o-grid__col
$grid-gutter: 2rem
margin-top: $grid-gutter
overflow: hidden
@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
// Fix overflow issue in old browsers
& > *
flex-shrink: 1
max-width: 100%