From: Saad Shahd <dev.saad.shahd@gmail.com>
Date: Fri, 10 Jun 2016 22:16:41 +0000 (+0200)
Subject: Add is-collapse-child class
X-Git-Tag: v6.2.4-rc1~59^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a7f49ee4847f49cbb7eb013b43c5d7a5e86df497;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add is-collapse-child class
---

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index e9d258ab3..fdd88d4b3 100644
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -242,6 +242,8 @@ The `.collapse` class lets you remove column gutters (padding).
 
 There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.
 
+The `.is-collapse-child` class removes negative margins from nested row under collapsed parent.
+
 ```html
 <div class="row medium-uncollapse large-collapse">
   <div class="small-6 columns">
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index d8f33a640..d6d4016f0 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -167,12 +167,16 @@
     &.collapse {
       > .column {
         @include grid-col-collapse;
-        > .row {
-          margin-left: 0;
-          margin-right: 0;
-        }
       }
     }
+
+    // Undo negative margins
+    // From collapsed child
+    &.is-collapse-child,
+    &.collapse > .column > .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 
   // Column