From a93858b57e92807b4ebdf73740c46aca4c487f74 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 14 Mar 2016 11:59:38 -0700 Subject: [PATCH] When using .[size]-unstack classes in flex grid, only style immediate child columns, so the CSS doesn't leak into nested grids. Fixes #8341 --- scss/grid/_flex-grid.scss | 2 +- test/visual/flex-grid/unstack-block-grid.html | 49 +++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 test/visual/flex-grid/unstack-block-grid.html diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss index 788313311..7333eb1f7 100644 --- a/scss/grid/_flex-grid.scss +++ b/scss/grid/_flex-grid.scss @@ -224,7 +224,7 @@ // Auto-stacking/unstacking @at-root (without: media) { .row.#{$-zf-size}-unstack { - .column { + > .column { flex: flex-grid-column(100%); @include breakpoint($-zf-size) { diff --git a/test/visual/flex-grid/unstack-block-grid.html b/test/visual/flex-grid/unstack-block-grid.html new file mode 100644 index 000000000..dfcf9134f --- /dev/null +++ b/test/visual/flex-grid/unstack-block-grid.html @@ -0,0 +1,49 @@ + + + + + + + Foundation for Sites Testing + + + + +
+
+

Flex Grid: Unstack and Block Grid

+ +

The top-level row has the class .medium-unstack, which means child columns stack on small, and sit side-by-side on medium screens and up.

+ +

The nested row has the class .up-3, which means its columns are 33% width no matter the screen size.

+ +

These two features should not interact. The two top-level columns always stack on small, and the three nested columns always stay the exact same percentage width.

+ +
+
+ Column One +
+
Block Grid Column One
+
Block Grid Column Two
+
Block Grid Column Three
+
+
+
Column Two
+
+
+
+ + + + + + -- 2.47.2