fix(layout): standalone layout css flex-grow and flex-shrink updated

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'. See SHA 9f70430.
angular · Oct 15, 2015 · 7b8acac · 7b8acac
1 parent f8a8b3c
commit 7b8acac
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss
@@ -144,40 +144,40 @@ $layout-breakpoint-lg:     1200px !default;
     $value : #{$i * 5 + '%'};
 
     [#{$flexName}="#{$i * 5}"] {
-      flex: 0 0 #{$value};
+      flex: 1 1 #{$value};
       max-width: #{$value};
       max-height: 100%;
       box-sizing: border-box;
     }
 
     [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;
     }
 
     [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;
     }
   }
 
   [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; }
   }
 
 }