Make new responsive gutter feature backwards-compatible and add separate mixin for...

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 68ba6b509ae928aee36f0c765b406b772f1153b0..1869953dc9e3286c38600d666f0638313f4c77d6 100644 (file)
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -33,10 +33,20 @@
 
     // Nesting
     & & {
-      @include grid-row($behavior: nest, $cf: false);
+      @if $grid-column-gutter == null {
+        @each $breakpoint, $gutter in $grid-column-responsive-gutter {
+          @include breakpoint($breakpoint) {
+            @include grid-row-nest($gutter);
+          }
+        }
+      }
+      @else {
+        @include grid-row-nest($grid-column-gutter);
+      }
 
       &.#{$collapse} {
-        @include grid-row($behavior: nest collapse, $cf: false);
+        margin-left: 0;
+        margin-right: 0;
       }
     }
 
@@ -48,7 +58,7 @@
 
   // Column
   .#{$column} {
-    @include grid-col($gutter: null);
+    @include grid-col;
 
     @if $grid-column-align-edge {
       &.#{$end} {
@@ -57,12 +67,14 @@
     }
 
     // Responsive gutters
-    @each $breakpoint, $gutter in $grid-column-responsive-gutter {
-      $padding: rem-calc($gutter) / 2;
-      
-      @include breakpoint($breakpoint) {
-        padding-left: $padding;
-        padding-right: $padding;
+    @if $grid-column-gutter == null {
+      @each $breakpoint, $gutter in $grid-column-responsive-gutter {
+        $padding: rem-calc($gutter) / 2;
+        
+        @include breakpoint($breakpoint) {
+          padding-left: $padding;
+          padding-right: $padding;
+        }
       }
     }
   }
@@ -120,7 +132,12 @@
     }
 
     &.#{$-zf-size}-#{$uncollapse} {
-      $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
+      @if $grid-column-gutter {
+        $gutter: $grid-column-gutter;
+      }
+      @else {
+        $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
+      }
       > .#{$column} { @include grid-col-uncollapse($gutter); }
     }
 

diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index 1fef6b0edd2f83eb04168d2e0c4e3ef6ac7662ef..1c3de8c361b3fa02770d60d29e835f3524b06e02 100644 (file)
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -57,7 +57,7 @@
   $columns: $grid-column-count,
   $gutter: $grid-column-gutter
 ) {
-  @if $gutter {
+  @if $gutter != null {
     $gutter: rem-calc($gutter) / 2;
   }
 

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index dbf6f462da763751e18c0c16528a2ce5d369aff6..3860c6fe330a8bb7fc7c745a43753553fe3040ac 100644 (file)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -14,10 +14,12 @@ $grid-row-width: $global-width !default;
 /// @type Number
 $grid-column-count: 12 !default;
 
-/// The amount of space between columns.
-/// @type Number
-$grid-column-gutter: 30px !default;
+// The amount of space between columns. Remove this in 6.2.
+// @type Number
+$grid-column-gutter: null !default;
 
+/// The amount of space between columns at different screen sizes.
+/// @type Map
 $grid-column-responsive-gutter: (
   small: 20px,
   medium: 30px,

diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index cf007e30b6fc0ac7c5ad61daaa06c655fcdb03cc..27cbfade81bb501590005e6f6829d1149df3ce18 100644 (file)
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -52,26 +52,46 @@
   $margin: auto;
 
   @if map-get($behavior, nest) {
-    $margin: rem-calc($gutter) / 2 * -1;
+    @include grid-row-nest($gutter);
 
     @if map-get($behavior, collapse) {
-      $margin: 0;
+      margin-left: 0;
+      margin-right: 0;
     }
   }
   @else {
     max-width: $width;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   @if $cf {
     @include clearfix;
   }
 
-  margin-left: $margin;
-  margin-right: $margin;
-
   @if $columns != null {
     @include grid-context($columns) {
       @content;
     }
   }
 }
+
+/// Inverts the margins of a row to nest it inside of a column.
+///
+/// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
+@mixin grid-row-nest($gutter: null) {
+  @if $gutter != null {
+    $margin: rem-calc($gutter) / 2 * -1;
+    margin-left: $margin;
+    margin-right: $margin;
+  }
+  @else {
+    @each $breakpoint, $value in $grid-column-responsive-gutter {
+      $margin: rem-calc($value) / 2 * -1;
+      @include breakpoint($breakpoint) {
+        margin-left: $margin;
+        margin-right: $margin;
+      }
+    }
+  }
+}

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 63649f5342c55a1ed7aa72674f02070e534688be..a8b30117f01254264f003b43d5c83b72a0844ba3 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -85,7 +85,7 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-gutter: 30px;
+$grid-column-gutter: null;
 $grid-column-align-edge: true;
 $block-grid-max: 8;