From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sat, 25 Aug 2018 20:33:38 +0000 (+0200)
Subject: Use pull request #11397 from ncoden/fix/xy-grid-responsive-modifiers-reset-10891... 
X-Git-Tag: v6.5.0-rc.3^2~32
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=94c75e7f6d4bf335183d33a910e49a90520dbb33;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Use pull request #11397 from ncoden/fix/xy-grid-responsive-modifiers-reset-10891-2 for v6.5.0

7e34dc3b5 perf: factorize XY grid responsive modifiers
21be51d21 fix: add missing flex reset in XY Grid responsive vertical cell widths

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
---

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 657c0dffe..eccf9986a 100644
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -68,22 +68,31 @@
   }
 
   @include -zf-each-breakpoint() {
+    // Responsive "auto" modifier
     @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-auto {
         @include xy-cell-base(auto);
         @include xy-cell-static(auto, false);
       }
+    }
+
+    %-xy-cell-base-shrink-horizontal-#{$-zf-size} {
+      @include xy-cell-base(shrink);
+    }
 
+    // Responsive "shrink" modifier
+    @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-shrink {
-        @include xy-cell-base(shrink);
+        @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
         @include xy-cell-static(shrink, false);
       }
     }
 
+    // Responsive width modifiers
     @for $i from 1 through $grid-columns {
       // Sizing (percentage)
       .grid-x > .#{$-zf-size}-#{$i} {
-        @include xy-cell-base(shrink);
+        @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
         @include xy-cell-static($i, false, $gutter-type: padding);
       }
     }
@@ -296,21 +305,31 @@
     }
 
     @include -zf-each-breakpoint() {
+      // Responsive "auto" modifier
       @if not($-zf-size == small) {
         > .#{$-zf-size}-auto {
           @include xy-cell-base(auto);
           @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
         }
+      }
+
+      %-xy-cell-base-shrink-vertical-#{$-zf-size} {
+        @include xy-cell-base(shrink);
+      }
 
+      // Responsive "shrink" modifier
+      @if not($-zf-size == small) {
         > .#{$-zf-size}-shrink {
+          @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
           @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
         }
-
       }
 
+      // Responsive width modifiers
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
+          @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
           @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
         }
       }