From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 1 Apr 2018 21:30:26 +0000 (+0200)
Subject: fix: fix cell widths overridden by readjusted smaller breakpoints in XY Grid #10468
X-Git-Tag: v6.6.0~3^2~250^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F11117%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: fix cell widths overridden by readjusted smaller breakpoints in XY Grid #10468

With margin gutters, a cell width is defined with its gutter. This is why we have to readjust all sizes and not only `.cell` when applying the new gutter in a bigger breakpoint. This must include all sizes for smaller breakpoints too.

Before this commit there was an optimization that prevent gutters for smaller breakpoints without a new gutter defined to be regenerated. This can seems logical since no gutter was generated for this breakpoint so there is nothing to readjust.

However, because the gutter is defined _with the width/height_, the readjusted width/height of readjusted gutters (with a custom gutter) overrides the width/height of bigger non-readjusted (without a custom gutter) breakpoint.

Changes:
* Readjust gutters for all breakpoints even without new gutter defined
* Add explainaitions

Closes https://github.com/zurb/foundation-sites/issues/10468
---

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index d636c374f..3cc45a5b0 100644
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -146,12 +146,12 @@
     @include -zf-each-breakpoint() {
 
       // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
-      // for prior breakpoints based on the responsive gutter.
+      // for all prior breakpoints.
+      // As their gutter is defined with their width/height, even breakpoint without a new margin must be
+      // generated to not having their width/height overrided by re-adjusted smaller breakpoints.
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
-          @if(map-has-key($grid-margin-gutters, $bp)) {
-            @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
-          }
+          @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
         }
       }