From: Daniel Ruf <daniel@daniel-ruf.de>
Date: Sun, 29 Apr 2018 21:26:14 +0000 (+0200)
Subject: feat: ignore `gutter-output` for margin grid in `xy-cell` mixins
X-Git-Tag: v6.6.0~3^2~210^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=828481aa8eb67258a53c3a68ba41221388ce0045;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

feat: ignore `gutter-output` for margin grid in `xy-cell` mixins

`gutter-output` cannot be set to `false` for margin grid as the gutter (margin)
is defined with the width. Gutters can only be set or reset to 0, which does
not fullful the role of `gutter-output`.

See discussion at https://github.com/zurb/foundation-sites/pull/11081

**BREAKING CHANGE**

Before:
```scss
@include xy-cell(12, $gutter-type: margin, $gutter-output: false);
@include xy-cell-static(full, $gutter-type: margin, $gutter-output: false);
```

After
```scss
@include xy-cell(12, $gutter-type: margin, $gutters: 0);
@include xy-cell-static(full, $gutter-type: margin, $gutters: 0);
```

Co-authored-by: Nicolas Coden <nicolas@ncoden.fr>
Co-authored-by: SassNinja <kai.falkowski@gmail.com>
---

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 016318839..ad7fd55e8 100644
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -127,14 +127,11 @@
     // Base flex properties
     @include xy-cell-base($size);
 
-    @if($gutter-output == true and $gutter-type == 'margin') {
-      @include -xy-cell-properties($size, $gutter, $vertical);
-    }
-    @else {
-      @include -xy-cell-properties($size, 0, $vertical);
-    }
+    $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+    $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 
-    @if $gutter-output {
+    @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+    @if ($-gutter-output) {
       @include xy-gutters($gutter, $gutter-type, $gutter-position);
     }
   }
@@ -163,16 +160,11 @@
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
   $gutter-position: if($vertical == true, top bottom, left right);
 
-  @if($gutter-output == true and $gutter-type == 'margin') {
-    @include -xy-cell-properties($size, $gutter, $vertical);
-  }
-  @else {
-    @include -xy-cell-properties($size, 0, $vertical);
-  }
+  $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+  $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 
-  // If we want to output the gutters
-  @if($gutter-output) {
-    // TODO: Figure out if we need to pass breakpoint in here too.
+  @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+  @if ($-gutter-output) {
     @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }