Merge pull request #10448 from zurb/xy-grid-frame-fix

Xy grid frame fix for margin grids

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 5d8c020545c4f653c277f16c3a625dce06124ac5..490cb054970a69c31bb659f8225f06c268f8b918 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -266,6 +266,10 @@ You can also apply margin or padding with `.grid-margin-y` and `.grid-padding-y`
 The XY grid incorporates the grid frame from Foundation for Apps plus many other useful features.
 To start, add `.grid-frame` to the grid. This sets the grid to be 100vh (the full height of the browser window).
 
+<div class="callout warning">
+  Please note to use `.grid-margin-x` or `.grid-margin-y` with `.grid-frame` you need to hide the overflow on the body like so: `body {overflow: hidden;}`.
+</div>
+
 Here's an example of what you can do:
 <div class="docs-codepen-container">
 <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/MogrXG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index f9e2ae3f347de400c76a07e7a670b1d635198aed..6c96d43dd92ce70bd45ed1dd3d3dd123b21f8ccc 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -324,9 +324,10 @@
   @if $margin-grid {
     @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y')
   }
+
 }
 
-@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;
@@ -374,7 +375,6 @@
   }
 
   @if $vertical-grid {
-
     .grid-y {
       &.grid-frame {
         width: auto;
@@ -400,6 +400,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
@@ -450,6 +461,6 @@
   }
 
   @if ($frame-grid) {
-    @include xy-frame-grid-classes($vertical-grid)
+    @include xy-frame-grid-classes($vertical-grid, $margin-grid)
   }
 }

diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
index f2c35191be4bc92d1b9253bffe7f824e74ffe54d..76c61e5ca24392477a8228631abd2023d390713d 100644 (file)
--- a/scss/xy-grid/_frame.scss
+++ b/scss/xy-grid/_frame.scss
@@ -2,21 +2,52 @@
 ///
 /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
 /// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+/// @param {Number|Map} $gutters [null] - Map or single value for gutters.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
+/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
 @mixin xy-grid-frame(
   $vertical: false,
-  $nested: false
+  $nested: false,
+  $gutters: null,
+  $breakpoint: null,
+  $include-base: true
 ) {
 
-  @if $vertical == true {
-    height: if($nested == true, 100%, 100vh);
-  } @else {
-    width: if($nested == true, 100%, 100vw);
+  @if $include-base {
+    overflow: hidden;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
   }
 
-  overflow: hidden;
-  position: relative;
-  flex-wrap: nowrap;
-  align-items: stretch;
+  @if $breakpoint == null and type-of($gutters) == 'map' {
+    @include -zf-each-breakpoint() {
+      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
+    }
+  } @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);
+        $gutter: rem-calc($gutter);
+        height: calc(#{$unit} + #{$gutter});
+      } @else {
+        $unit: if($nested == true, 100%, 100vw);
+        $gutter: rem-calc($gutter);
+        width: calc(#{$unit} + #{$gutter});
+      }
+    }
+    @else {
+      @if $vertical == true {
+        height: if($nested == true, 100%, 100vh);
+      } @else {
+        width: if($nested == true, 100%, 100vw);
+      }
+    }
+  }
 }
 
 /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)