fix(layout): improve responsive switches from layout column to row

Change class definition order in flex-properties-for-name mixin. Closes #6528. Closes #7327.
angular · Jul 14, 2016 · 93e2488 · 93e2488
1 parent fba4f9c
commit 93e2488
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 8 deletions.
diff --git a/src/core/services/layout/layout-attributes.scss b/src/core/services/layout/layout-attributes.scss
@@ -152,15 +152,37 @@ $layout-breakpoint-lg:     1920px !default;
       box-sizing: border-box;
     }
 
-    [layout="row"] > [#{$flexName}="#{$i * 5}"],
+    [layout="row"] > [#{$flexName}="#{$i * 5}"] {
+      flex: 1 1 #{$value};
+      max-width: #{$value};
+      max-height: 100%;
+      box-sizing: border-box;
+    }
+
+    [layout="column"] > [#{$flexName}="#{$i * 5}"] {
+      flex: 1 1 #{$value};
+      max-width: 100%;
+      max-height: #{$value};
+      box-sizing: border-box;
+    }
+
+    [layout="row"] {
+	    > [#{$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; }
+	  }
+
+	  [layout="column"] {
+	    > [#{$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; }
+	  }
+
     [layout#{$name}="row"] > [#{$flexName}="#{$i * 5}"] {
       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: 1 1 #{$value};
       max-width: 100%;
@@ -169,11 +191,12 @@ $layout-breakpoint-lg:     1920px !default;
     }
   }
 
-  [layout="row"], [layout#{$name}="row"] {
+  [layout#{$name}="row"] {
     > [#{$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; }
   }
-  [layout="column"], [layout#{$name}="column"] {
+
+  [layout#{$name}="column"] {
     > [#{$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; }
   }

diff --git a/src/core/style/layout.scss b/src/core/style/layout.scss
@@ -136,7 +136,33 @@
       box-sizing: border-box;
     }
 
-    .layout-row > .#{$flexName}-#{$i * 5},
+    .layout-row > .#{$flexName}-#{$i * 5} {
+      flex: 1 1 #{$value};
+      max-width: #{$value};
+      max-height: 100%;
+      box-sizing: border-box;
+
+      // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
+      @if $i == 0 {  min-width: 0;  }
+    }
+
+    .layout-column > .#{$flexName}-#{$i * 5} {
+      flex: 1 1 #{$value};
+      max-width: 100%;
+      max-height: #{$value};
+      box-sizing: border-box;
+    }
+
+    .layout-row {
+	    > .#{$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; }
+	  }
+
+	  .layout-column {
+	    > .#{$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; }
+	  }
+
     .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
       flex: 1 1 #{$value};
       max-width: #{$value};
@@ -147,7 +173,6 @@
       @if $i == 0 {  min-width: 0;  }
     }
 
-    .layout-column > .#{$flexName}-#{$i * 5},
     .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
       flex: 1 1 #{$value};
       max-width: 100%;
@@ -160,15 +185,16 @@
 
   }
 
-  .layout-row, .layout#{$name}-row {
+  .layout#{$name}-row {
     > .#{$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 {
+
+  .layout#{$name}-column {
     > .#{$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; }