From: Brett Mason <brettsmason@gmail.com>
Date: Tue, 31 May 2016 14:31:11 +0000 (+0100)
Subject: Add $gutter parameter to the grid-layout mixin.
X-Git-Tag: v6.2.4-rc1~33^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=09a1ac0e4719f34139b6af77b0bdfadc95789ac9;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add $gutter parameter to the grid-layout mixin.
---

diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index 9f5da07c2..959e19267 100644
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -10,14 +10,39 @@
 ///
 /// @param {Number} $n - Number of elements to display per row.
 /// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+/// @param {Number|List} $gutter
+///   The gutter to apply to child elements. Accepts multiple values:
+///   - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
+///   - A fixed numeric value will apply this gutter to all breakpoints.
 @mixin grid-layout(
   $n,
-  $selector: '.column'
+  $selector: '.column',
+  $gutter: null
 ) {
   & > #{$selector} {
     width: percentage(1/$n);
     float: $global-left;
 
+    // If a $gutter value is passed
+    @if($gutter) {
+      // Gutters
+      @if type-of($gutter) == 'map' {
+        @each $breakpoint, $value in $gutter {
+          $padding: rem-calc($value) / 2;
+
+          @include breakpoint($breakpoint) {
+            padding-left: $padding;
+            padding-right: $padding;
+          }
+        }
+      }
+      @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+        $padding: rem-calc($gutter) / 2;
+        padding-left: $padding;
+        padding-right: $padding;
+      }
+    }
+
     &:nth-of-type(1n) {
       clear: none;
     }