fix(layout): some flex directives don't work when on a child of layout="column" or layout="row" (#11247)

* fix(layout): add missing media query overrides

The current implementation's CSS rules did not properly override
other rules when using @media sizes.

* Add SCSS rules for flex-0 to flex-100
* Add SCSS rules for flex-33 and flex-66

Fixes #9546

* style(layout): clean up whitespace and comments

Author: Splaktar

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

@@ -1,5 +1,4 @@
 /*
-*
 *  Responsive attributes
 *
 *  References:
@@ -8,7 +7,6 @@
 *  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
 *  5) http://godban.com.ua/projects/flexgrid
-*
 */
 
 // Layout

src/core/services/layout/layout.scss

@@ -1,13 +1,11 @@
 /*
 * Since Layout API uses ng-cloak to hide the dom elements while layouts are adjusted
-*
 */
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
 }
 
 /*
-*
 *  Responsive attributes
 *
 *  References:
@@ -16,10 +14,7 @@
 *  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
 *  5) http://godban.com.ua/projects/flexgrid
-*
-*
 */
-
 @-moz-document url-prefix() {
   .layout-fill {
     margin: 0;
@@ -29,18 +24,12 @@
   }
 }
 
-
 /*
  *  Apply Mixins to create Layout/Flexbox styles
- *
  */
-
-
 @include layouts_for_breakpoint();
 @include layout-padding-margin();
 
-
-
 /**
  * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
  * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
@@ -53,10 +42,8 @@
  *         $layout-breakpoint-md:     1280px !default;
  *         $layout-breakpoint-lg:     1920px !default;
  */
-
-
 @media (max-width: $layout-breakpoint-xs - 1) {
-  // Xtra-SMALL  SCREEN
+  // Xtra-SMALL SCREEN
   .hide-xs, .hide {
     &:not(.show-xs):not(.show) {
       display: none;

src/core/style/layout.scss

@@ -1,5 +1,4 @@
 /*
-*
 *  Responsive attributes
 *
 *  References:
@@ -8,10 +7,7 @@
 *  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
 *  5) http://godban.com.ua/projects/flexgrid
-*
-*
 */
-
 @mixin flex-order-for-name($sizes:null) {
   @if $sizes == null {
     $sizes : '';
@@ -142,7 +138,7 @@
       max-height: 100%;
       box-sizing: border-box;
 
-      // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+      // Required by Chrome M48+ due to http://crbug.com/546034
       @if $i == 0 {  min-width: 0;  }
     }
 
@@ -159,7 +155,7 @@
       max-height: 100%;
       box-sizing: border-box;
 
-      // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+      // Required by Chrome M48+ due to http://crbug.com/546034
       @if $i == 0 {  min-width: 0;  }
     }
 
@@ -169,9 +165,31 @@
       max-height: #{$value};
       box-sizing: border-box;
 
-      // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+      // Required by Chrome M48+ due to http://crbug.com/546034
       @if $i == 0 {  min-height: 0;  }
     }
+
+    @if ($name != '') {
+      .layout#{$name}-row > .flex-#{$i * 5} {
+        flex: 1 1 100%;
+        max-width: #{$value};
+        max-height: 100%;
+        box-sizing: border-box;
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        @if $i == 0 {  min-width: 0;  }
+      }
+
+      .layout#{$name}-column > .flex-#{$i * 5} {
+        flex: 1 1 100%;
+        max-width: 100%;
+        max-height: #{$value};
+        box-sizing: border-box;
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        @if $i == 0 {  min-height: 0;  }
+      }
+    }
   }
 
   .layout-row {
@@ -188,19 +206,35 @@
     > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
     > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
 
-    // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+    // Required by Chrome M48+ due to http://crbug.com/546034
     > .flex { min-width: 0;  }
-
   }
 
   .layout#{$name}-column {
     > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
     > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
 
-    // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+    // Required by Chrome M48+ due to http://crbug.com/546034
     > .flex { min-height: 0; }
   }
 
+  @if ($name != '') {
+    .layout#{$name}-row {
+      > .flex-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+      > .flex-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
+
+      // Required by Chrome M48+ due to http://crbug.com/546034
+      > .flex { min-width: 0;  }
+    }
+
+    .layout#{$name}-column {
+      > .flex-33 { flex: 1 1 100%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+      > .flex-66 { flex: 1 1 100%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
+
+      // Required by Chrome M48+ due to http://crbug.com/546034
+      > .flex { min-height: 0; }
+    }
+  }
 }
 
 @mixin layout-align-for-name($suffix: null) {

src/core/style/structure.scss

@@ -171,7 +171,7 @@ input {
     top: 0;
     bottom: 0;
     z-index: $z-index-scroll-mask-bar;
-    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3)
+    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3)
   }
 }
 

src/core/style/typography.scss

@@ -18,11 +18,6 @@ html, body {
   -moz-osx-font-smoothing: grayscale; // [4]
 }
 
-md-select, md-card, md-list, md-toolbar,
-ul, ol, p, h1, h2, h3, h4, h5, h6 {
-  //text-rendering: optimizeLegibility;
-}
-
 /************
  * Headings
  ************/