1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-23 02:00:18 +01:00
site/_src/_assets/styles/bigchain/_grid.scss

246 lines
3.8 KiB
SCSS

//
// Grid
// --------------
// bigchain.io
//
// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl
//
//
// More sane box model
//
*,
*:before,
*:after {
box-sizing: border-box;
}
//
// Base
//
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.grid__col {
flex: 1;
// Firefox grid fix for whatever reason
min-height: 0;
min-width: 0;
}
.row {
max-width: 42em;
margin: auto;
padding-left: $gutter-space;
padding-right: $gutter-space;
}
//
// Alignment per row
//
.grid--top {
align-items: flex-start
}
.grid--bottom {
align-items: flex-end
}
.grid--center {
align-items: center
}
.grid--justifycenter {
justify-content: center
}
//
// Alignment per cell
//
.grid__col--top {
align-self: flex-start
}
.grid__col--bottom {
align-self: flex-end
}
.grid__col--center {
align-self: center
}
//
// Gutters
//
.grid--gutters{
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;;
}
}
@media ($screen-sm) {
.grid-small--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
@media ($screen-md) {
.grid-medium--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
@media ($screen-lg) {
.grid-large--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
//
// Columns
//
.grid--fit {
> .grid__col { flex: 1; }
}
.grid--full {
> .grid__col { flex: 0 0 100%; }
}
.grid--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid--2of6,
.grid--third {
> .grid__col { flex: 0 0 33%; }
}
.grid--3of6,
.grid--half {
> .grid__col { flex: 0 0 50%; }
}
.grid--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
@media ($screen-sm) {
.grid-small--fit {
> .grid__col { flex: 1; }
}
.grid-small--full{
> .grid__col { flex: 0 0 100%; }
}
.grid-small--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-small--2of6,
.grid-small--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-small--3of6,
.grid-small--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-small--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-small--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}
@media ($screen-md) {
.grid-medium--fit {
> .grid__col { flex: 1 }
}
.grid-medium--full {
> .grid__col { flex: 0 0 100%; }
}
.grid-medium--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-medium--2of6,
.grid-medium--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-medium--3of6,
.grid-medium--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-medium--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-medium--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}
@media ($screen-lg) {
.grid-large--fit {
> .grid__col { flex: 1; }
}
.grid-large--full {
> .grid__col { flex: 0 0 100%; }
}
.grid-large--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-large--2of6,
.grid-large--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-large--3of6,
.grid-large--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-large--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-large--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}