spaCy/website/assets/css/_base/_grid.sass
2016-04-01 01:24:48 +11:00

132 lines
2.9 KiB
Sass

// Grid - Variables
// ============================================================================
$grid-cols : $columns
$grid-padding : 2.25rem
$grid-margin : 1rem
// Grid - Style
// ============================================================================
// Blocks
p,
.block
@extend .has-aside
margin-bottom: 5rem
.no-block.no-block
margin-bottom: 0
// Responsive containers
.responsive-container
max-width: 100%
overflow: auto
width: 100%
// Flexbox grid container
// .grid--wrap - wraps chrildren if bigger than the container
// .grid--space-between - aligns children horizontally, adds space between them
// .grid--space-around - aligns children horizontally, adds space around them
// .grid--align-center - aligns children horizonally and centered
// .grid--align-right - aligns children horizontally on the right
// .grid--valign-bottom - aligns children vertically at the bottom
// .grid-padding - adds padding to children
// .grid--margin-right - adds right margin to children
// .grid--margin-left - adds left margin to children
// .grid--block - extends block style
.grid,
.grid-col
align-items: flex-start
display: flex
flex-wrap: wrap
&.grid--nowrap,
&.grid-col--nowrap
flex-wrap: nowrap
&.grid--space-between,
&.grid-col--space-between
justify-content: space-between
&.grid--space-around,
&.grid-col--space-around
justify-content: space-around
&.grid--align-center,
&.grid-col--align-center
justify-content: center
&.grid--align-right,
&.grid-col--align-right
justify-content: flex-end
&.grid--valign-center,
&.grid-col--valign-center
align-items: center
&.grid--valign-bottom,
&.grid-col--valign-bottom
align-items: flex-end
&.grid--valign-space-between,
&.grid-col--valign-space-between
align-items: space-between
&.grid--text-center,
&.grid-col--text-center
text-align: center
&.grid--block,
&.grid-col--block
@extend .block
.grid
&--padding > *
padding: $grid-padding
&--margin-right > *
margin-right: $grid-margin
&--margin-left > *
margin-left: $grid-margin
.grid-col
overflow: hidden
& > *
flex-shrink: 1
max-width: 100%
// Responsive grid elements
// adapted from Gridly, https://github.com/IonicaBizau/gridly
@media (min-width: #{$screen-size-medium})
.grid
flex-direction: row
align-items: stretch
.grid-col
display: flex
flex: 0 0 100%
flex-direction: column
@each $grid-mode, $grid-percentage in $grid-cols
&--#{$grid-mode}
flex: 0 0 $grid-percentage
max-width: $grid-percentage
@media(max-width: #{$screen-size-medium})
.grid-col.grid-col
flex: 0 0 100%
flex-flow: column wrap