Make grid-column-gutter define responsive gutters by default #8259

Resolve #8259

Make `grid-column-gutter` (and also `grid-col-gutter`) define
responsive gutters when no gutter value (`$gutter`) is given, instead
of defining gutters from the zero breakpoint.

If only a `$gutters` map is given, use this map to generate responsive
gutters.

If only a `$gutters` single value is given, use this value to generate
no-responsive gutters.

diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index 88b35ea3f407d90f84558e523c9529043cc96067..c49645a7ddd489a45714d283f2d265ef4e29bb8a 100644 (file)
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -61,9 +61,7 @@
   float: $global-left;
 
   // Gutters
-  @include -zf-each-breakpoint {
-    @include grid-column-gutter($-zf-size, $gutters);
-  }
+  @include grid-column-gutter($gutters: $gutters);
 
   // Last column alignment
   @if $grid-column-align-edge {

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index d76f3c49cef9a8ab3ebd3f12dd1a72cd320dd01f..365b9861500bd6b0fb89d99ce825cfe978f5f459 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -80,9 +80,7 @@
   @include flex-grid-size($columns);
 
   // Gutters
-  @include -zf-each-breakpoint {
-    @include grid-column-gutter($-zf-size, $gutters);
-  }
+  @include grid-column-gutter($gutters: $gutters);
 
   // fixes recent Chrome version not limiting child width
   // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome

diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index 8c77f4dd57b46332fa2b11bac35509c7c1048cdf..071815353877e6ae0586b56bc3da25fb769fc6d6 100644 (file)
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -25,19 +25,35 @@
 }
 
 /// Set the gutters on a column
-/// @param {Number|Keyword} $gutters [small] - Spacing between columns or breakpoint name.
+/// @param {Number|Keyword} $gutter [auto]
+///   Spacing between columns, accepts multiple values:
+///   - A single value will make the gutter that exact size.
+///   - A breakpoint name will make the gutter the corresponding size in the $gutters map.
+///   - "auto" will make the gutter responsive, using the $gutters map values.
 /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
 @mixin grid-column-gutter(
-  $gutter: $-zf-zero-breakpoint,
+  $gutter: auto,
   $gutters: $grid-column-gutter
 ) {
-  @if type-of($gutter) == 'string' {
-    $gutter: grid-column-gutter($gutter, $gutters);
-  }
-  $padding: rem-calc($gutter) / 2;
+  @if $gutter == auto and type-of($gutters) == 'map' {
+    // "auto"
+    @each $value, $breakpoint in $gutters {
+      @include breakpoint($breakpoint) {
+        @include grid-column-gutter($value);
+      }
+    }
+  } @else {
+    // breakpoint name
+    @if type-of($gutter) == 'string' {
+      $gutter: grid-column-gutter($gutter, $gutters);
+    }
+
+    // single value
+    $padding: rem-calc($gutter) / 2;
 
-  padding-left: $padding;
-  padding-right: $padding;
+    padding-left: $padding;
+    padding-right: $padding;
+  }
 }
 
 /// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
@@ -55,8 +71,11 @@
 
 /// Shorthand for `grid-column-gutter()`.
 /// @alias grid-column-gutter
-@mixin grid-col-gutter($gutters) {
-  @include grid-column-gutter($gutters);
+@mixin grid-col-gutter(
+  $gutter: auto,
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column-gutter($gutter, $gutters);
 }
 
 /// Shorthand for `grid-column-collapse()`.