Rework grid gutter classes to work as `grid-margin/padding-x/y and split grom the...

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 431aba0873b2478845193516c98e1cf010700023..dcdbed0f002cf53158a2c9d2cad21e8f7752e7de 100644 (file)
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -65,12 +65,7 @@
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 @mixin xy-cell-reset($vertical: true) {
   $direction: if($vertical == true, width, height);
-  $sides: if($vertical == true, left right, top bottom);
   #{$direction}: auto;
-  @each $side in $sides {
-    margin-#{$side}: 0;
-    padding-#{$side}: 0;
-  }
 }
 
 // Sets our cell widths or heights depending on gutter type.

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 8c2f05e3e2660c4d52aa648de7b443dd35eb0d49..a0003e50f1eab13f4fe4994a209af8abbb41eeb5 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -90,7 +90,7 @@
 @mixin xy-margin-grid-classes(
   $gutter-position: left right,
   $vertical: false,
-  $wrapping-selector: '.margin-gutters'
+  $wrapping-selector: '.grid-margin-x'
 ){
   #{$wrapping-selector} {
     @include xy-gutters($negative: true, $gutter-position: $gutter-position);
@@ -128,10 +128,10 @@
 
 // Padding Grid classes
 @mixin xy-padding-grid-classes {
-  .padding-gutters {
+  .grid-padding-x {
 
     // Negative margin for nested grids
-    .padding-gutters {
+    .grid-padding-x {
       @include xy-gutters($negative: true);
     }
 
@@ -144,6 +144,16 @@
 
 // Block Grid classes
 @mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
+  @if $padding-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $block-grid-max {
+        .#{$-zf-size}-up-#{$i} {
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+        }
+      }
+    }
+  }
+
   @if $margin-grid {
     @include -zf-each-breakpoint {
       @for $i from 1 through $block-grid-max {
@@ -152,7 +162,7 @@
         @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
             @if(map-has-key($grid-margin-gutters, $bp)) {
-              .margin-gutters.#{$bp}-up-#{$i} {
+              .grid-margin-x.#{$bp}-up-#{$i} {
                 @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
               }
             }
@@ -160,22 +170,12 @@
         }
       }
       @for $i from 1 through $block-grid-max {
-        .margin-gutters.#{$-zf-size}-up-#{$i} {
+        .grid-margin-x.#{$-zf-size}-up-#{$i} {
           @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
         }
       }
     }
   }
-
-  @if $padding-grid {
-    @include -zf-each-breakpoint {
-      @for $i from 1 through $block-grid-max {
-        .padding-gutters.#{$-zf-size}-up-#{$i} {
-          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
-        }
-      }
-    }
-  }
 }
 
 // Collapse classes
@@ -206,7 +206,7 @@
         @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
       }
 
-      .margin-gutters > .#{$-zf-size}-offset-#{$o} {
+      .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
         @include xy-cell-offset($o, $breakpoint: $-zf-size);
       }
     }
@@ -260,24 +260,24 @@
         }
       }
     }
+  }
 
-    @if $padding-grid {
-      &.padding-gutters {
-        // Negative margin for nested grids
-        .padding-gutters {
-          @include xy-gutters($negative: true, $gutter-position: top bottom);
-        }
+  @if $padding-grid {
+    &.grid-padding-y {
+      // Negative margin for nested grids
+      .grid-padding-y {
+        @include xy-gutters($negative: true, $gutter-position: top bottom);
+      }
 
-        // Base cell styles
-        > .cell {
-          @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
-        }
+      // Base cell styles
+      > .cell {
+        @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
       }
     }
   }
 
   @if $margin-grid {
-    @include xy-margin-grid-classes(top bottom, true, '.grid-y.margin-gutters')
+    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y')
   }
 }