From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 21 Dec 2015 22:10:10 +0000 (-0800)
Subject: Add responsive gutters to grid
X-Git-Tag: v6.1.0~8^2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=51e0624d2b0bd6cd0cefb3f0807cb1571aa8375c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add responsive gutters to grid
---

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index d56684fb5..68ba6b509 100644
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -48,13 +48,23 @@
 
   // Column
   .#{$column} {
-    @include grid-col;
+    @include grid-col($gutter: null);
 
     @if $grid-column-align-edge {
       &.#{$end} {
         @include grid-col-end;
       }
     }
+
+    // Responsive gutters
+    @each $breakpoint, $gutter in $grid-column-responsive-gutter {
+      $padding: rem-calc($gutter) / 2;
+      
+      @include breakpoint($breakpoint) {
+        padding-left: $padding;
+        padding-right: $padding;
+      }
+    }
   }
 
   // Column row
@@ -110,7 +120,8 @@
     }
 
     &.#{$-zf-size}-#{$uncollapse} {
-      > .#{$column} { @include grid-col-uncollapse; }
+      $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
+      > .#{$column} { @include grid-col-uncollapse($gutter); }
     }
 
     // Positioning
diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index fa517bdce..1fef6b0ed 100644
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -57,7 +57,9 @@
   $columns: $grid-column-count,
   $gutter: $grid-column-gutter
 ) {
-  $gutter: rem-calc($gutter) / 2;
+  @if $gutter {
+    $gutter: rem-calc($gutter) / 2;
+  }
 
   @include grid-column-size($columns);
   float: $global-left;
diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index ec8c51891..dbf6f462d 100644
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -18,6 +18,11 @@ $grid-column-count: 12 !default;
 /// @type Number
 $grid-column-gutter: 30px !default;
 
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+) !default;
+
 /// If `true`, the last column in a row will align to the opposite edge of the row.
 /// @type Boolean
 $grid-column-align-edge: true !default;
diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index e02b90480..245a29ef3 100644
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -29,6 +29,6 @@
 
 /// Shorthand for `grid-column-uncollapse()`.
 /// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse {
-  @include grid-column-uncollapse;
+@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
+  @include grid-column-uncollapse($gutter);
 }