From 2b5aaa7e60a209931f041a0d530fc184f3033dc4 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 1 Apr 2018 23:30:26 +0200 Subject: [PATCH] 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 --- scss/xy-grid/_classes.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss index d636c374f3..3cc45a5b0c 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); } }