fix(layout): restore flex percentages

IE has issues with `calc()` usages in flex styles; replace with 33.33% and 66.66%.

  Closes #6898

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

@@ -2,7 +2,7 @@
 
  <p>
  The <code>layout-align</code> directive takes two words.
- The first word says how the children will be aligned in the lay3ut's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
+ The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
 
  <p>Only one value is required for this directive.
  For example, <code>layout="row" layout-align="center"</code> would make the elements

src/core/services/layout/layout.attributes.scss

@@ -185,14 +185,14 @@ $layout-breakpoint-lg: 1920px !default;
  }
 
  [layout="row"], [layout#{$name}="row"] {
- > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 calc(100% / 3); max-width: calc(100% / 3); max-height: 100%; box-sizing: border-box; }
- > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 calc(200% / 3); max-width: calc(200% / 3); max-height: 100%; box-sizing: border-box; }
+ > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
+ > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
 
  > .flex { min-width: 0; }
  }
  [layout="column"], [layout#{$name}="column"] {
- > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 calc(100% / 3); max-width: 100%; max-height: calc(100% / 3); box-sizing: border-box; }
- > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 calc(200% / 3); max-width: 100%; max-height: calc(200% / 3); box-sizing: border-box; }
+ > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
+ > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
 
  > .flex { min-height: 0; }
  }

src/core/services/layout/layout.scss

@@ -183,15 +183,15 @@
  }
 
  .layout-row, .layout#{$name}-row {
- > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 calc(100% / 3); max-width: calc(100% / 3); max-height: 100%; box-sizing: border-box; }
- > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 calc(200% / 3); max-width: calc(200% / 3); max-height: 100%; box-sizing: border-box; }
+ > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
+ > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
 
  // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
  > .flex { min-width: 0; }
  }
  .layout-column, .layout#{$name}-column {
- > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 calc(100% / 3); max-width: 100%; max-height: calc(100% / 3); box-sizing: border-box; }
- > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 calc(200% / 3); max-width: 100%; max-height: calc(200% / 3); box-sizing: border-box; }
+ > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
+ > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
 
  // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
  > .flex { min-height: 0; }