From: Brett Mason <brettsmason@gmail.com>
Date: Fri, 5 May 2017 14:47:16 +0000 (+0100)
Subject: Add option to main class generating mixin to exclude vertical and collapse classes... 
X-Git-Tag: v6.4.0-rc1~9^2~67^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=849eb207864469a3c84381fe49da93ea8806a33c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add option to main class generating mixin to exclude vertical and collapse classes from output. Needs cleaning up.
---

diff --git a/scss/grid/_zf-grid.scss b/scss/grid/_zf-grid.scss
index bfbe1c282..b8f18c9fe 100644
--- a/scss/grid/_zf-grid.scss
+++ b/scss/grid/_zf-grid.scss
@@ -7,7 +7,7 @@
 ////
 $grid-container: 1200px !default;
 $grid-columns: 12 !default;
-$grid-type: padding !default;
+$grid-type: margin !default;
 $grid-gutters: (
   small: 20px,
   medium: 30px
@@ -214,7 +214,7 @@ $grid-debug: false !default;
 }
 
 // Final classes
-@mixin zf-grid-classes() {
+@mixin zf-grid-classes($vertical: true, $collapse: true) {
 
   // Grid Container
   .grid-container {
@@ -238,42 +238,52 @@ $grid-debug: false !default;
     }
   }
 
-  // Vertical grid.
-  .grid-vertical {
-    @include zf-grid(vertical, false);
+  // Vertical Grid Classes
+  @if ($vertical) {
+    // Vertical grid.
+    .grid-vertical {
+      @include zf-grid(vertical, false);
 
-    // Cells
-    .cell {
-      @include zf-cell($position: vertical);
-      #{$grid-type}-right: 0;
-      #{$grid-type}-left: 0;
-      max-width: 100%;
-    }
+      // Cells
+      .cell {
+        @include zf-cell($position: vertical);
+        #{$grid-type}-right: 0;
+        #{$grid-type}-left: 0;
+        max-width: 100%;
+      }
 
-    @include -zf-each-breakpoint {
-      @for $i from 1 through $grid-columns {
-        // Sizing (percentage)
-        .#{$-zf-size}-#{$i} {
-          @include zf-cell($i, $direction: vertical, $gutters: false);
+      @include -zf-each-breakpoint {
+        @for $i from 1 through $grid-columns {
+          // Sizing (percentage)
+          .#{$-zf-size}-#{$i} {
+            @include zf-cell($i, $direction: vertical, $gutters: false);
+          }
         }
       }
     }
-  }
 
-  // Collapse gutters.
-  .grid-collapse {
-    > .cell {
-      #{$grid-type}-right: 0;
-      #{$grid-type}-left: 0;
+    // Collapse gutters.
+    .grid-collapse {
+      @if ($grid-type == 'margin') {
+        margin-right: 0;
+        margin-left: 0;
+    
+        > .cell {
+          #{$grid-type}-right: 0;
+          #{$grid-type}-left: 0;
+        }
+      }
     }
-  }
 
-  
-  // Collapse vertical gutters.
-  .grid-vertical-collapse {
-    > .cell {
-      #{$grid-type}-top: 0;
-      #{$grid-type}-bottom: 0;
+    // Vertical collapse classes
+    @if ($vertical) {
+      // Collapse vertical gutters.
+      .grid-vertical-collapse {
+        > .cell {
+          #{$grid-type}-top: 0;
+          #{$grid-type}-bottom: 0;
+        }
+      }
     }
   }
 
@@ -292,19 +302,24 @@ $grid-debug: false !default;
   }
 
   @include -zf-each-breakpoint($small: false) {
-    // Responsive collapse classes
-    .#{$-zf-size}-grid-collapse {
-      > .cell {
-        #{$grid-type}-right: 0;
-        #{$grid-type}-left: 0;
+    @if ($collapse) {
+      // Responsive collapse classes
+      .#{$-zf-size}-grid-collapse {
+        > .cell {
+          #{$grid-type}-right: 0;
+          #{$grid-type}-left: 0;
+        }
       }
-    }
 
-    // Responsive vertical collapse classes
-    .#{$-zf-size}-grid-vertical-collapse {
-      > .cell {
-        #{$grid-type}-top: 0;
-        #{$grid-type}-bottom: 0;
+      // Vertical collapse classes
+      @if ($vertical) {
+        // Responsive vertical collapse classes
+        .#{$-zf-size}-grid-vertical-collapse {
+          > .cell {
+            #{$grid-type}-top: 0;
+            #{$grid-type}-bottom: 0;
+          }
+        }
       }
     }