mirror of https://github.com/explosion/spaCy.git
56 lines
1.1 KiB
Sass
56 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
|
|
|
|
// Fix overflow issue in old browsers
|
|
|
|
& > *
|
|
flex-shrink: 1
|
|
max-width: 100%
|