]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Add testcase and add qualifiers on basis overrides
authorKevin Ball <kmball11@gmail.com>
Tue, 20 Jun 2017 22:36:00 +0000 (15:36 -0700)
committerKevin Ball <kmball11@gmail.com>
Tue, 20 Jun 2017 22:36:00 +0000 (15:36 -0700)
scss/xy-grid/_classes.scss
test/visual/xy-grid/kitchen-sink.html

index 0d038110b665e007eaf4e35437c3e620238d9e49..03e7b7d16078a1fb575e928c7a0bd74f114e8a53 100644 (file)
@@ -44,7 +44,7 @@
 
   // Auto width
   @include -zf-each-breakpoint() {
-    .grid-x > [class*="#{$-zf-size}-"] {
+    .grid-x > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
       flex-basis: auto;
     }
     @if not($-zf-size == small) {
 
 
     @include -zf-each-breakpoint() {
-      > [class*="#{$-zf-size}-"] {
+      > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
         flex-basis: auto;
       }
 
index 6087ff591a3d9def4272e22ff1789e0fbb4d54d0..01972021cc2541e662abff787e182a0eea5f0d59 100644 (file)
         <h3>Here's my footer</h3>
       </div>
     </div>
-    
+
+  <h3>Test case from <a href="https://github.com/zurb/foundation-sites/issues/10141#issuecomment-308679657">Issue #10141</a></h3>
+  <div class="grid-x grid-padding-x grid-demo">
+    <div class="small-4 medium-4 large-4 cell">
+      <div class="grid-x grid-padding-x grid-padding-y align-middle">
+        <div class="shrink cell small-order-2 medium-order-2 large-order-1">
+          <img src="http://lorempixel.com/75/75/nature" alt="">
+        </div>
+        <div class="auto cell small-order-1 medium-order-1 large-order-2">
+          <h2>source second</h2>
+          <p>This should wrap around nicely... but seems to don't when there's a longer text...</p>
+        </div>
+      </div>
+    </div>
+    <div class="small-8 medium-8 large-8 cell">
+      <h1>filler</h1>
+    </div>
+  </div>
+
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
     <script>