Pass on further grid frame margin work

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 5b296c749b8efa41797ce6633cc4456932a47c26..7a7c44fba8d44e622c98ce0e3d226bbf8e78b763 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -333,6 +333,9 @@
 
   @if $margin-grid {
     @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y')
+    .grid-frame.grid-margin-y {
+      @include xy-grid-frame(true, false, $grid-margin-gutters)
+    }
   }
 }
 

diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
index 21d5daecd81cbdb3ec2fa5be47ab7ed0ff31b448..a9b4f78aa249cac91c02e3ad2430f14cc2720760 100644 (file)
--- a/scss/xy-grid/_frame.scss
+++ b/scss/xy-grid/_frame.scss
@@ -8,31 +8,38 @@
   $gutters: null,
   $breakpoint: null
 ) {
-  // Get our gutters if applicable
-  $gutter: -zf-get-bp-val($gutters, $breakpoint);
 
-  // If we have a gutter, add it to the width/height
-  @if $gutter {
-    @if $vertical == true {
-      $unit: if($nested == true, 100%, 100vh);
-      height: calc(#{$unit} + #{$gutter});
-    } @else {
-      $unit: if($nested == true, 100%, 100vw);
-      width: calc(#{$unit} + #{$gutter});
+  @if $breakpoint == null and type-of($gutters) == 'map' {
+    @include -zf-each-breakpoint() {
+      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size);
     }
-  }
-  @else {
-    @if $vertical == true {
-      height: if($nested == true, 100%, 100vh);
-    } @else {
-      width: if($nested == true, 100%, 100vw);
+  } @else {
+    // Get our gutters if applicable
+    $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+    // If we have a gutter, add it to the width/height
+    @if $gutter {
+      @if $vertical == true {
+        $unit: if($nested == true, 100%, 100vh);
+        height: calc(#{$unit} + #{$gutter});
+      } @else {
+        $unit: if($nested == true, 100%, 100vw);
+        width: calc(#{$unit} + #{$gutter});
+      }
+    }
+    @else {
+      @if $vertical == true {
+        height: if($nested == true, 100%, 100vh);
+      } @else {
+        width: if($nested == true, 100%, 100vw);
+      }
     }
-  }
 
-  overflow: hidden;
-  position: relative;
-  flex-wrap: nowrap;
-  align-items: stretch;
+    overflow: hidden;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
 }
 
 /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)