From: Nicolas Coden <nicos.coden@neuf.fr>
Date: Thu, 28 Apr 2016 12:07:11 +0000 (+0200)
Subject: Make grid-column-gutter define responsive gutters by default #8259
X-Git-Tag: v6.3-rc1~55^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=19bae9b236d63ed5a437ff2cc2c4ba392903d947;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 88b35ea3f..c49645a7d 100644
--- 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 d76f3c49c..365b98615 100644
--- 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 8c77f4dd5..071815353 100644
--- 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()`.