Add responsive gutters to grid

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index d56684fb53b6227b183af620b4eecb3ba7d6075e..68ba6b509ae928aee36f0c765b406b772f1153b0 100644 (file)
--- 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 fa517bdce10730b9c2942f6e04da99e6cd3803ba..1fef6b0edd2f83eb04168d2e0c4e3ef6ac7662ef 100644 (file)
--- 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 ec8c51891d659b4532d5db6eda74edc34b0e921e..dbf6f462da763751e18c0c16528a2ce5d369aff6 100644 (file)
--- 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 e02b9048078e0369825b896a4de80aa6e290d2f7..245a29ef3435653868122ea1c7281b3bc0d1d652 100644 (file)
--- 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);
 }