Add collapse classes to flex grid, closes #7310

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index ebe2413091f14a529ff4cf7eaf6496dee9d1b1b0..81652a5f184489530bf57dfef2c0a3236ec438b0 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -105,6 +105,10 @@
     &.expanded {
       max-width: none;
     }
+
+    &.collapse {
+      > .column { @include grid-col-collapse; }
+    }
   }
 
   // Column
@@ -145,6 +149,19 @@
     flex: flex-grid-column(shrink);
   }
 
+  // Responsive collapsing
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      &.#{$size}-collapse {
+        > .column { @include grid-col-collapse; }
+      }
+
+      &.#{$size}-uncollapse {
+        > .column { @include grid-col-uncollapse; }
+      }
+    }
+  }
+
   // Auto-stacking/unstacking
   @each $size in $breakpoint-classes {
     @if $size != small {

diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index f8031d06fd48f59c3bfc45f7ed392ab74d4be763..e02b9048078e0369825b896a4de80aa6e290d2f7 100644 (file)
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -7,7 +7,7 @@
 ////
 
 /// Collapse the gutters on a column by removing the padding.
-@mixin grid-column-collapse() {
+@mixin grid-column-collapse {
   padding-left: 0;
   padding-right: 0;
 }
@@ -23,12 +23,12 @@
 
 /// Shorthand for `grid-column-collapse()`.
 /// @alias grid-column-collapse
-@mixin grid-col-collapse() {
+@mixin grid-col-collapse {
   @include grid-column-collapse;
 }
 
 /// Shorthand for `grid-column-uncollapse()`.
 /// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse() {
+@mixin grid-col-uncollapse {
   @include grid-column-uncollapse;
 }