fix(layout): flex="n" attrs set height for column layout, width for…

… row Closes #937
angular · Dec 15, 2014 · d357779 · aymone · Jul 9, 2016 · d357779
1 parent 7497348
commit d357779
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/docs/app/css/layout-demo.css b/docs/app/css/layout-demo.css
@@ -2,21 +2,17 @@
 .layout-content demo-include [layout] > div {
  padding: 8px;
  box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26);
+ opacity: 0.9;
+ color: white;
 }
 .layout-content demo-include [layout] > div:nth-child(1) {
  background-color: #009688;
- opacity: 0.9;
- color: white;
 }
 .layout-content demo-include [layout] > div:nth-child(2) {
  background-color: #3949ab;
- opacity: 0.9;
- color: white;
 }
 .layout-content demo-include [layout] > div:nth-child(3) {
  background-color: #9c27b0;
- opacity: 0.9;
- color: white;
 }
 .layout-content md-divider {
  margin-top: 16px;

diff --git a/docs/app/css/style.css b/docs/app/css/style.css
@@ -224,6 +224,11 @@ md-tabs.demo-source-tabs .active md-tab-label {
 .small-demo .demo-content > div[layout-fill] {
  min-height: 224px;
 }
+.layout-options .small-demo .demo-content > div[layout] {
+ min-height: auto !important;
+ max-height: auto !imporatnt;
+ height: 128px !important;
+}
 .small-demo .demo-toolbar,
 .small-demo .md-toolbar-tools { 
  min-height: 48px;

diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html
@@ -1,4 +1,4 @@
-<div ng-controller="LayoutCtrl" layout="column" layout-fill class="layout-content">
+<div ng-controller="LayoutCtrl" layout="column" layout-fill class="layout-content layout-options">
 
  <docs-demo demo-title="Responsive Layout" class="small-demo">
  <demo-file name="index.html">

diff --git a/src/core/style/layout.scss b/src/core/style/layout.scss
@@ -31,11 +31,6 @@
  margin: $layout-gutter-width / 2;
 }
 
-[layout-padding] + [layout-padding], /* DEPRECATED */
-[layout-margin] + [layout-margin] {
- margin-top: -($layout-gutter-width / 2);
-}
-
 [layout-wrap] {
  flex-wrap: wrap;
 }
@@ -69,23 +64,36 @@
  flex: 1;
  }
 
- // (0-19) * 5 = 0-95%
- @for $i from 0 through 19 {
+
+ // (0-20) * 5 = 0-100%
+ @for $i from 0 through 20 {
  [#{$flexName}="#{$i * 5}"] {
  flex: 0 0 #{$i * 5 + '%'};
+ }
+ [layout="row"] > [#{$flexName}="#{$i * 5}"] {
  max-width: #{$i * 5 + '%'};
  }
+ [layout="column"] > [#{$flexName}="#{$i * 5}"] {
+ max-height: #{$i * 5 + '%'};
+ }
  }
 
- [#{$flexName}="33"], [#{$flexName}="34"] {
- flex: 0 0 33.33%;
- max-width: 33.33%;
+ [layout="row"] {
+ > [#{$flexName}="33"], > [#{$flexName}="34"] {
+ max-width: 33.33%;
+ }
+ > [#{$flexName}="66"], > [#{$flexName}="67"] {
+ max-width: 66.66%;
+ }
  }
- [#{$flexName}="66"], [#{$flexName}="67"] {
- flex: 0 0 66.66%;
- max-width: 66.66%;
+ [layout="column"] {
+ > [#{$flexName}="33"], > [#{$flexName}="34"] {
+ max-height: 33.33%;
+ }
+ > [#{$flexName}="66"], > [#{$flexName}="67"] {
+ max-height: 66.66%;
+ }
  }
-
 }
 
 // Flex attributes for layout children