Final touches on new grid frame margins

foundation · Jul 21, 2017 · 916d94d · 916d94d
1 parent 529334c
commit 916d94d
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
@@ -333,13 +333,11 @@
 
   @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)
-    }
   }
+
 }
 
-@mixin xy-frame-grid-classes($vertical-grid: true) {
+@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {
   // Framed grid styles
   .grid-frame {
     @include xy-grid-frame;
@@ -387,7 +385,6 @@
   }
 
   @if $vertical-grid {
-
     .grid-y {
       &.grid-frame {
         width: auto;
@@ -413,6 +410,17 @@
       }
     }
   }
+  @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, $include-base: false)
+    }
+    @include -zf-each-breakpoint(false) {
+      .grid-margin-y.#{$-zf-size}-grid-frame {
+        @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false)
+      }
+    }
+  }
 }
 
 // Final classes
@@ -463,6 +471,6 @@
   }
 
   @if ($frame-grid) {
-    @include xy-frame-grid-classes($vertical-grid)
+    @include xy-frame-grid-classes($vertical-grid, $margin-grid)
   }
 }