fix(layout): layout-margin and layout-padding fixes for child containers

**layout-margin** and **layout-padding** were not being applied to child containers unless the *.flex* class was present. This has been fixed. * layout-margin and layout-padding now affect immediate children * layout-margin suffixes are supported (-sm, -gt-sm, -md, -gt-md, -lg, -gt-lg) * layout-padding suffixes are supported (-sm, -gt-sm, -md, -gt-md, -lg, -gt-lg) > With 'layout-margin', developers may need to override the child container flex sizes to fit properly in `layout="row"` modes. See http://codepen.io/team/AngularMaterial/pen/BoVBaE for details. Closes #5425. Refs #5014. Refs #5156.
angular · Oct 29, 2015 · 4649b93 · 4649b93
1 parent 17797f0
commit 4649b93
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 16 deletions.
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
@@ -141,8 +141,22 @@
 
     // Attribute directives with no value(s) and NO breakpoints
 
-    .directive('layoutMargin', attributeWithoutValue('layout-margin'))
     .directive('layoutPadding', attributeWithoutValue('layout-padding'))
+    .directive('layoutPaddingSm', attributeWithoutValue('layout-padding-sm'))
+    .directive('layoutPaddingGtSm', attributeWithoutValue('layout-padding-gt-sm'))
+    .directive('layoutPaddingMd', attributeWithoutValue('layout-padding-md'))
+    .directive('layoutPaddingGtMd', attributeWithoutValue('layout-padding-gt-md'))
+    .directive('layoutPaddingLg', attributeWithoutValue('layout-padding-lg'))
+    .directive('layoutPaddingGtLg', attributeWithoutValue('layout-padding-gt-lg'))
+
+    .directive('layoutMargin', attributeWithoutValue('layout-margin'))
+    .directive('layoutMarginSm', attributeWithoutValue('layout-margin-sm'))
+    .directive('layoutMarginGtSm', attributeWithoutValue('layout-margin-gt-sm'))
+    .directive('layoutMarginMd', attributeWithoutValue('layout-margin-md'))
+    .directive('layoutMarginGtMd', attributeWithoutValue('layout-margin-gt-md'))
+    .directive('layoutMarginLg', attributeWithoutValue('layout-margin-lg'))
+    .directive('layoutMarginGtLg', attributeWithoutValue('layout-margin-gt-lg'))
+
     .directive('layoutWrap', attributeWithoutValue('layout-wrap'))
     .directive('layoutNoWrap', attributeWithoutValue('layout-no-wrap'))
     .directive('layoutFill', attributeWithoutValue('layout-fill'))

diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
@@ -268,40 +268,74 @@
 
 @mixin layout-padding-margin() {
 
-  .layout-padding > .flex-sm,   .layout-padding > .flex-lt-md {
+  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
+  .layout-padding-sm > *,
+  .layout-padding    > .flex-sm
+  {
     padding: $layout-gutter-width / 4;
   }
+
   .layout-padding,
-  .layout-padding > .flex,
-  .layout-padding > .flex-gt-sm,
-  .layout-padding > .flex-md,
-  .layout-padding > .flex-lt-lg
+  .layout-padding-gt-sm,
+  .layout-padding-md,
+
+  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
+  .layout-padding        > *,
+  .layout-padding-gt-sm  > *,
+  .layout-padding-md     > *,
+
+  .layout-padding        > .flex,
+  .layout-padding        > .flex-gt-sm,
+  .layout-padding        > .flex-md,
   {
     padding: $layout-gutter-width / 2;
   }
-  .layout-padding > .flex-gt-md,
-  .layout-padding > .flex-lg
+
+  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
+  .layout-padding-gt-md  > *,
+  .layout-padding-lg     > *,
+  .layout-padding-gt-lg  > *,
+
+  .layout-padding        > .flex-gt-md,
+  .layout-padding        > .flex-lg,
+  .layout-padding        > .flex-lg,
+  .layout-padding        > .flex-gt-lg
   {
     padding: $layout-gutter-width / 1;
   }
 
-  .layout-margin > .flex-sm,
-  .layout-margin > .flex-lt-md
+  // Margin enhancements
+
+  .layout-margin-sm      > *,
+  .layout-margin         > .flex-sm
   {
     margin: $layout-gutter-width / 4;
   }
 
   .layout-margin,
-  .layout-margin  > .flex,
-  .layout-margin  > .flex-gt-sm,
-  .layout-margin  > .flex-md,
-  .layout-margin  > .flex-lt-lg
+  .layout-margin-gt-sm,
+  .layout-margin-md,
+
+  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
+  .layout-margin         > *,
+  .layout-margin-gt-sm   > *,
+  .layout-margin-md      > *,
+
+  .layout-margin         > .flex,
+  .layout-margin         > .flex-gt-sm,
+  .layout-margin         > .flex-md
   {
     margin: $layout-gutter-width / 2;
   }
 
-  .layout-margin  > .flex-gt-md,
-  .layout-margin  > .flex-lg
+  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
+  .layout-margin-gt-md  > *,
+  .layout-margin-lg     > *,
+  .layout-margin-gt-lg  > *,
+
+  .layout-margin        > .flex-gt-md,
+  .layout-margin        > .flex-lg,
+  .layout-margin        > .flex-gt-lg
   {
     margin: $layout-gutter-width / 1;
   }