From: Kevin Ball <kmball11@gmail.com>
Date: Mon, 26 Jun 2017 19:14:29 +0000 (-0700)
Subject: Brute force the auto override issue
X-Git-Tag: v6.4.0~2^2~2^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10257%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Brute force the auto override issue
---

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index b4d3e115f..0f4d88905 100644
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -44,12 +44,22 @@
 
   // Auto width
   @include -zf-each-breakpoint() {
-    // This is a bit of a hack/workaround, see these PRs for the backstory:
+    // This is a bit of a hack/workaround, see these issues & PRs for the backstory:
+    // https://github.com/zurb/foundation-sites/issues/10244
     // https://github.com/zurb/foundation-sites/pull/10222 and
     // https://github.com/zurb/foundation-sites/pull/10164
-    .grid-x > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
-      flex-basis: auto;
+    .grid-x {
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
     }
+  }
+
+  @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-auto {
         @include xy-cell-base(auto);
@@ -257,13 +267,20 @@
 
 
     @include -zf-each-breakpoint() {
-      // This is a bit of a hack/workaround, see these PRs for the backstory:
+      // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
+      // https://github.com/zurb/foundation-sites/issues/10244
       // https://github.com/zurb/foundation-sites/pull/10222 and
       // https://github.com/zurb/foundation-sites/pull/10164
-      > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
         flex-basis: auto;
       }
+    }
 
+    @include -zf-each-breakpoint() {
       @if not($-zf-size == small) {
         > .#{$-zf-size}-auto {
           @include xy-cell-base(auto);
diff --git a/test/visual/xy-grid/kitchen-sink.html b/test/visual/xy-grid/kitchen-sink.html
index 423acd033..31faca17e 100644
--- a/test/visual/xy-grid/kitchen-sink.html
+++ b/test/visual/xy-grid/kitchen-sink.html
@@ -139,6 +139,11 @@
       <div class="cell small-7 large-shrink"><div class="demo">7 on small, shrink on large</div></div>
     </div>
 
+    <div class="grid-x grid-margin-x">
+      <div class="cell small-5 large-auto"><div class="demo">5 on small, auto on large with a ton of content that should still be even</div></div>
+      <div class="cell small-7 large-auto"><div class="demo">7 on small, auto on large</div></div>
+    </div>
+
     <h3>Margin - collapse</h3>
     <p>The cells should collapse on large screens and above.<p>