update(layout): improve mutliple flex breakpoint usages

angular · Sep 29, 2015 · 05dd565 · 05dd565
1 parent cc5333f
commit 05dd565
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
@@ -173,7 +173,6 @@
  .layout#{$name}-row,
  [layout#{$name}=row] {
  flex-direction: row;
- flex-wrap: wrap; // auto-wrap
  }
 }
 @mixin flex-properties-for-name($name: null) {
@@ -209,34 +208,45 @@
  .#{$flexName}-#{$i * 5},
  [#{$flexName}="#{$i * 5}"] { flex: 0 0 #{$i * 5 + '%'}; }
 
- .layout#{$name}-row > .#{$flexName}-#{$i * 5},
- [layout#{$name}= "row"] > [#{$flexName}= "#{$i * 5}"] {
+ .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
  max-width: #{$i * 5 + '%'};
  max-height: 100%;
  }
+ .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
+ max-width: 100%;
+ max-height: #{$i * 5 + '%'};
+ }
 
- .layout#{$name}-column > .#{$flexName}-#{$i * 5},
+ [layout#{$name}= "row"] > [#{$flexName}= "#{$i * 5}"] {
+ max-width: #{$i * 5 + '%'};
+ max-height: 100%;
+ }
  [layout#{$name}= "column"] > [#{$flexName}= "#{$i * 5}"] {
  max-width: 100%;
  max-height: #{$i * 5 + '%'};
  }
  }
 
- .layout#{$name}-row,
- [layout#{$name}="row"] {
+
+ .layout#{$name}-row {
  > .#{$flexName}-33 , > .#{$flexName}-34 { max-width: 33%; max-height: 100%; }
  > .#{$flexName}-66 , > .#{$flexName}-67 { max-width: 67%; max-height: 100%; }
+ }
+ .layout#{$name}-column {
+ > .#{$flexName}-33 , > .#{$flexName}-34 { max-width: 100%; max-height: 33%; }
+ > .#{$flexName}-66 , > .#{$flexName}-67 { max-width: 100%; max-height: 67%; }
+ }
+
+ [layout#{$name}="row"] {
  > [#{$flexName}="33"], > [#{$flexName}="34"] { max-width: 33%; max-height: 100%; }
  > [#{$flexName}="66"], > [#{$flexName}="67"] { max-width: 67%; max-height: 100%; }
  }
 
- .layout#{$name}-column,
  [layout#{$name}="column"] {
- > .#{$flexName}-33 , > .#{$flexName}-34 { max-width: 100%; max-height: 33%; }
- > .#{$flexName}-66 , > .#{$flexName}-67 { max-width: 100%; max-height: 67%; }
  > [#{$flexName}="33"], > [#{$flexName}="34"], { max-width: 100%; max-height: 33%; }
  > [#{$flexName}="66"], > [#{$flexName}="67"], { max-width: 100%; max-height: 67%; }
  }
+
 }
 @mixin layout-align-for-name($suffix: null) {