2013-12-07 20:52:51 -08:00
|
|
|
// Row
|
|
|
|
//
|
2019-07-27 08:30:39 +02:00
|
|
|
// Rows contain your columns.
|
2013-12-07 20:52:51 -08:00
|
|
|
|
2015-08-23 22:13:58 -07:00
|
|
|
@if $enable-grid-classes {
|
|
|
|
.row {
|
|
|
|
@include make-row();
|
2019-09-28 16:13:36 +02:00
|
|
|
|
|
|
|
> * {
|
|
|
|
@include make-col-ready();
|
|
|
|
}
|
2015-08-23 22:13:58 -07:00
|
|
|
}
|
2019-09-28 16:13:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Gutters
|
|
|
|
//
|
|
|
|
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
|
|
|
|
|
|
|
|
@if $enable-grid-classes {
|
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
|
|
|
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
|
|
|
|
|
|
|
@each $key, $value in $gutters {
|
|
|
|
.g#{$infix}-#{$key},
|
|
|
|
.gx#{$infix}-#{$key} {
|
|
|
|
margin-right: -$value / 2;
|
|
|
|
margin-left: -$value / 2;
|
|
|
|
|
|
|
|
> * {
|
|
|
|
padding-right: $value / 2;
|
|
|
|
padding-left: $value / 2;
|
|
|
|
}
|
|
|
|
}
|
2016-11-26 12:13:15 -08:00
|
|
|
|
2019-09-28 16:13:36 +02:00
|
|
|
.g#{$infix}-#{$key},
|
|
|
|
.gy#{$infix}-#{$key} {
|
|
|
|
margin-top: -$value;
|
2016-11-26 12:13:15 -08:00
|
|
|
|
2019-09-28 16:13:36 +02:00
|
|
|
> * {
|
|
|
|
margin-top: $value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-11-26 12:13:15 -08:00
|
|
|
}
|
|
|
|
}
|
2013-01-15 17:55:14 -08:00
|
|
|
}
|
2013-04-26 23:59:51 -07:00
|
|
|
|
2013-12-07 20:52:51 -08:00
|
|
|
// Columns
|
|
|
|
//
|
2013-04-26 23:59:51 -07:00
|
|
|
// Common styles for small and large grid columns
|
2013-12-07 20:52:51 -08:00
|
|
|
|
2015-08-23 22:13:58 -07:00
|
|
|
@if $enable-grid-classes {
|
|
|
|
@include make-grid-columns();
|
|
|
|
}
|