diff --git a/scss/_variables.scss b/scss/_variables.scss index 3974d02405d910dd8706df8490c9b9ba0695fff4..0c60f2210719eb0514e256bd9f39562872f62afd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -191,6 +191,15 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; +$grid-gutter-widths: ( + xs: $grid-gutter-width, // 30px + sm: $grid-gutter-width, // 30px + md: $grid-gutter-width, // 30px + lg: $grid-gutter-width, // 30px + xl: $grid-gutter-width // 30px +) !default; + + // Components // // Define common padding and border radius sizes and more. diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 41bdf4646da2140fc46a514131a7886bfbc961f8..3bf16a3da7362587b675245e72f141c95c572ad8 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,14 +3,12 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { +@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) { // Common properties for all breakpoints %grid-column { position: relative; width: 100%; min-height: 1px; // Prevent columns from collapsing when empty - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); } @each $breakpoint in map-keys($breakpoints) { @@ -27,6 +25,30 @@ @extend %grid-column; } + // Allow gutter width to be different depending on breakpoints + @include media-breakpoint-only($breakpoint, $breakpoints) { + $gutter: map-get($gutters, $breakpoint); + + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } + + .col, + .col#{$infix}, + .col#{$infix}-auto { + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + + .row { + margin-right: ($gutter / -2); + margin-left: ($gutter / -2); + } + } + @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} {