From: Geoff Kimball Date: Mon, 14 Mar 2016 18:59:38 +0000 (-0700) Subject: When using .[size]-unstack classes in flex grid, only style immediate child columns... X-Git-Tag: v6.2.1~46 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a93858b57e92807b4ebdf73740c46aca4c487f74;p=thirdparty%2Ffoundation%2Ffoundation-sites.git When using .[size]-unstack classes in flex grid, only style immediate child columns, so the CSS doesn't leak into nested grids. Fixes #8341 --- 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
+
+
+
+ + + + + +