diff options
Diffstat (limited to 'scss/_grid.scss')
-rw-r--r-- | scss/_grid.scss | 44 |
1 files changed, 35 insertions, 9 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index 8bcb419e18..e4e3c97962 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -5,18 +5,44 @@ @if $enable-grid-classes { .row { @include make-row(); + + > * { + @include make-col-ready(); + } } +} + +// 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; + } + } - // Remove the negative margin from default .row, then the horizontal padding - // from all immediate children columns (to prevent runaway style inheritance). - .no-gutters { - margin-right: 0; - margin-left: 0; + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + margin-top: -$value; - > .col, - > [class*="col-"] { - padding-right: 0; - padding-left: 0; + > * { + margin-top: $value; + } + } + } } } } |