Fix collapse responsiveness bug in xy-grid

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 0c750a221b4db079e33d81fe8be1cd0d247258b2..e7ae95eb2ce5f5ed3c40c403eabafeeacd3bb120 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -219,16 +219,16 @@
 
 // Collapse classes
 @mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
-  @include -zf-each-breakpoint {
+  @each $bp in $breakpoint-classes {
     @if $margin-grid {
-      .#{$-zf-size}-margin-collapse {
-        @include xy-grid-collapse($gutter-type: margin);
+      .#{$bp}-margin-collapse {
+        @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);
       }
     }
 
     @if $padding-grid {
-      .#{$-zf-size}-padding-collapse {
-        @include xy-grid-collapse($gutter-type: padding);
+      .#{$bp}-padding-collapse {
+        @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);
       }
     }
   }

diff --git a/scss/xy-grid/_collapse.scss b/scss/xy-grid/_collapse.scss
index 71a6f970195d190de8dbb697d2ab646c530f47c1..d9029370ddd6c374473800d033c99eafe9e923cc 100644 (file)
--- a/scss/xy-grid/_collapse.scss
+++ b/scss/xy-grid/_collapse.scss
@@ -14,40 +14,60 @@
 @mixin xy-grid-collapse(
   $selector: '.cell',
   $gutter-type: margin,
-  $gutter-position: right left
+  $gutter-position: right left,
+  $min-breakpoint: $-zf-zero-breakpoint
 ) {
   // First, lets negate any margins on the top level
   @if ($gutter-type == 'margin') {
 
-    @each $value in $gutter-position {
-      margin-#{$value}: 0;
-    }
+    @include breakpoint($min-breakpoint) {
+      @each $value in $gutter-position {
+        margin-#{$value}: 0;
+      }
 
       > #{$selector} {
         @each $value in $gutter-position {
           margin-#{$value}: 0;
         }
       }
+    }
+
+    $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
 
     // Output new widths to not include gutters
     @each $bp in $breakpoint-classes {
-      @for $i from 1 through $grid-columns {
-        // Sizing (percentage)
-        > .#{$bp}-#{$i} {
-          @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+      @if(sl-contain($excluded-bps, $bp)) {
+        @include breakpoint($min-breakpoint) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
         }
-      }
+      } @else {
+        @include breakpoint($bp) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      } 
     }
   }
   @else {
 
-    @each $value in $gutter-position {
-      margin-#{$value}: 0;
-    }
-
-    > #{$selector} {
+    @include breakpoint($min-breakpoint) {
       @each $value in $gutter-position {
-        padding-#{$value}: 0;
+        margin-#{$value}: 0;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          padding-#{$value}: 0;
+        }
       }
     }
   }

diff --git a/test/visual/xy-grid/collapse.html b/test/visual/xy-grid/collapse.html
index d57d1cc7938eb130388c3affa8148ef25ff57f53..df33fc2d350f889d2e06267188533d35975444ed 100644 (file)
--- a/test/visual/xy-grid/collapse.html
+++ b/test/visual/xy-grid/collapse.html
@@ -48,6 +48,24 @@
       <div class="cell medium-4"><div class="demo">4</div></div>
     </div>
 
+    <p>Large margin collapse</p>
+    <div class="grid-x grid-margin-x large-margin-collapse">
+      <div class="small-10 medium-8 large-6 cell"><div class="demo">10/8/6 cells</div></div>
+      <div class="small-2 medium-4 large-6 cell"><div class="demo">2/4/6 cells</div></div>
+    </div>
+
+    <p>Medium margin collapse</p>
+    <div class="grid-x grid-margin-x medium-margin-collapse">
+      <div class="small-10 medium-8 large-6 cell"><div class="demo">10/8/6 cells</div></div>
+      <div class="small-2 medium-4 large-6 cell"><div class="demo">2/4/6 cells</div></div>
+    </div>
+
+    <p>Small margin collapse</p>
+    <div class="grid-x grid-margin-x small-margin-collapse">
+      <div class="small-10 medium-8 large-6 cell"><div class="demo">10/8/6 cells</div></div>
+      <div class="small-2 medium-4 large-6 cell"><div class="demo">2/4/6 cells</div></div>
+    </div>
+
     <hr>
 
     <h2>Padding Grid Collapse</h2>