fix(layout): fix wrapping and filling layouts to 100% using flex-33 o…

…r flex-66

Use calc() to determine 33% and 66% so that browser will properly add them together to make 100%.

* Remove flex-34 and flex-67.
* Update docs for these changes.

Fixes #5346. Closes #5348.

docs/app/partials/layout-grid.tmpl.html

@@ -41,8 +41,8 @@
         <div flex="33">
           [flex="33"]
         </div>
-        <div flex="67">
-          [flex="67"]
+        <div flex="66">
+          [flex="66"]
         </div>
         <div flex="50">
           [flex="50"]
@@ -58,9 +58,9 @@
     A layout child's <code>flex</code> attribute can be given an integer value from 0-100.
     The element will stretch to the percentage of available space matching the value.
     <br/><br/>
-    Currently, the <code>flex</code> attribute value is restricted to multiples of five and 33, 34, 66, and 67.
+    Currently, the <code>flex</code> attribute value is restricted to multiples of five and 33 or 66.
     <br/>
-    For example: <code>flex="5", flex="20", flex="33", flex="50", flex="67", flex="75", ... flex="100"</code>.
+    For example: <code>flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100"</code>.
   </p>
   <p>
     See the <a href="layout/options">layout options page</a> for more information on responsive flex attributes like
@@ -193,7 +193,7 @@
   <p>
     Add the <code>flex-offset</code> attribute to a layout child to set its
     offset percentage within the layout. Values must be multiples 
-    of <code>5</code>, or <code>33</code>, <code>34</code>, <code>66</code>, <code>67</code>.
+    of <code>5</code> or <code>33</code> / <code>66</code>.
   </p>
   <table class="md-api-table">
     <tr>

docs/app/partials/layout-options.tmpl.html

@@ -88,11 +88,11 @@
     <demo-file name="index.html">
       <div layout="row" layout-wrap>
         <div flex="33">[flex=33]</div>
-        <div flex="67">[flex=67]</div>
-        <div flex="67">[flex=67]</div>
+        <div flex="66">[flex=66]</div>
+        <div flex="66">[flex=66]</div>
+        <div flex="33">[flex=33]</div>
         <div flex="33">[flex=33]</div>
         <div flex="33">[flex=33]</div>
-        <div flex="34">[flex=34]</div>
         <div flex="33">[flex=33]</div>
       </div>
     </demo-file>
@@ -109,10 +109,10 @@
   <docs-demo demo-title="Responsive Flex Attributes" class="small-demo colorNested-noPad">
     <demo-file name="index.html">
       <div layout="row">
-        <div flex="67" flex-sm="33">
+        <div flex="66" flex-sm="33">
           I flex to one-third of the space on mobile, and two-thirds on other devices.
         </div>
-        <div flex="33" flex-sm="67">
+        <div flex="33" flex-sm="66">
           I flex to two-thirds of the space on mobile, and one-third on other devices.
         </div>
       </div>

src/core/services/layout/layout.scss

@@ -66,7 +66,7 @@
     }
   }
 
-  @each $i in 33, 34 {
+  @each $i in 33 {
     $offsets : '';
     $suffix : '';
 
@@ -78,11 +78,11 @@
     }
 
     #{$offsets} {
-      margin-left: #{$i+'%'};
+      margin-left: calc(100% / 3);
     }
   }
 
-  @each $i in 66, 67 {
+  @each $i in 66 {
     $offsets : '';
     $suffix : '';
 
@@ -94,7 +94,7 @@
     }
 
     #{$offsets} {
-      margin-left: #{$i+'%'};
+      margin-left: calc(200% / 3);
     }
   }
 }
@@ -159,16 +159,12 @@
   }
 
   .layout-row, .layout#{$name}-row {
-    > .#{$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; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33%;  max-width: calc(100% / 3);  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66%;  max-width: calc(200% / 3);  max-height: 100%; box-sizing: border-box; }
   }
   .layout-column, .layout#{$name}-column {
-    > .#{$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; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33%;  max-width: 100%;  max-height: calc(100% / 3); box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66%;  max-width: 100%;  max-height: calc(200% / 3); box-sizing: border-box; }
   }
 }