From 9f704302f4f8812330706f55d93b07091b15f6a4 Mon Sep 17 00:00:00 2001
From: Thomas Burleson <ThomasBurleson@Gmail.com>
Date: Thu, 15 Oct 2015 10:43:00 -0500
Subject: [PATCH] fix(layout): fix flew-grow and flex-shrink values for
 flex-xx='xx' markup

flexboxes should be 50% on flex-md=50 breakpoint and 33% on flex-gt-md=33 breakpoint,etc
change flex-grow and flew-shrink values from '0' to '1'
Thx to @MartinMuzatko for his help!
---
 src/core/services/layout/layout.scss | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
index 4bdaa968415..02c6bbefe54 100644
--- a/src/core/services/layout/layout.scss
+++ b/src/core/services/layout/layout.scss
@@ -133,7 +133,7 @@
     $value : #{$i * 5 + '%'};
 
     .#{$flexName}-#{$i * 5} {
-      flex: 0 0 #{$value};
+      flex: 1 1 #{$value};
       max-width: #{$value};
       max-height: 100%;
       box-sizing: border-box;
@@ -141,7 +141,7 @@
 
     .layout-row > .#{$flexName}-#{$i * 5},
     .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
-      flex: 0 0 #{$value};
+      flex: 1 1 #{$value};
       max-width: #{$value};
       max-height: 100%;
       box-sizing: border-box;
@@ -149,7 +149,7 @@
 
     .layout-column > .#{$flexName}-#{$i * 5},
     .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
-      flex: 0 0 #{$value};
+      flex: 1 1 #{$value};
       max-width: 100%;
       max-height: #{$value};
       box-sizing: border-box;
@@ -157,16 +157,16 @@
   }
 
   .layout-row, .layout#{$name}-row {
-    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 0 0 33%;  max-width: 33%;  max-height: 100%; box-sizing: border-box; }
-    > .#{$flexName}-34   , > .#{$flexName}-34     {  flex: 0 0 34%;  max-width: 34%;  max-height: 100%; box-sizing: border-box; }
-    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 0 0 66%;  max-width: 66%;  max-height: 100%; box-sizing: border-box; }
-    > .#{$flexName}-67   , > .#{$flexName}-67     {  flex: 0 0 67%;  max-width: 67%;  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33%;  max-width: 33%;  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-34   , > .#{$flexName}-34     {  flex: 1 1 34%;  max-width: 34%;  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66%;  max-width: 66%;  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-67   , > .#{$flexName}-67     {  flex: 1 1 67%;  max-width: 67%;  max-height: 100%; box-sizing: border-box; }
   }
   .layout-column, .layout#{$name}-column {
-    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 0 0 33%;  max-width: 100%;  max-height: 33%; box-sizing: border-box; }
-    > .#{$flexName}-34   , > .#{$flexName}-34     {  flex: 0 0 34%;  max-width: 100%;  max-height: 34%; box-sizing: border-box; }
-    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 0 0 66%;  max-width: 100%;  max-height: 66%; box-sizing: border-box; }
-    > .#{$flexName}-67   , > .#{$flexName}-67     {  flex: 0 0 67%;  max-width: 100%;  max-height: 67%; box-sizing: border-box; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33%;  max-width: 100%;  max-height: 33%; box-sizing: border-box; }
+    > .#{$flexName}-34   , > .#{$flexName}-34     {  flex: 1 1 34%;  max-width: 100%;  max-height: 34%; box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66%;  max-width: 100%;  max-height: 66%; box-sizing: border-box; }
+    > .#{$flexName}-67   , > .#{$flexName}-67     {  flex: 1 1 67%;  max-width: 100%;  max-height: 67%; box-sizing: border-box; }
   }
 }