From a7f49ee4847f49cbb7eb013b43c5d7a5e86df497 Mon Sep 17 00:00:00 2001
From: Saad Shahd <dev.saad.shahd@gmail.com>
Date: Sat, 11 Jun 2016 00:16:41 +0200
Subject: [PATCH] Add is-collapse-child class

---
 docs/pages/flex-grid.md   |  2 ++
 scss/grid/_flex-grid.scss | 12 ++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

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
-- 
2.47.2