feat(layouts): add @mixin for responsive support for rows

Creates `@mixin` that only triggers when in row configuration.

 - Dividers now properly display in dynamic layout directions.
 - Radio Buttons bottom margins are now properly removed when
   in row configuration.
 - Input, Select, Radio Buttons and Checkboxes automatically
   add 16px horizontal margin in front of the element
   when in a row and not the first item.

Previous implementations could not properly detect row configuration
where a layout would change direction based on media breakpoints.

Fixes #9112. Closes #9220.

BREAKING CHANGE: The way that margins are applied to `md-checkbox`, `md-input-container`, `md-radio-group`, and `md-select` has been changed. You can now use the `$default-horizontal-margin` Sass variable to override the default `16px` horizontal margin size. As part of this, `md-radio-button`s inside of `layout="row"` containers are now aligned vertically with other content as they no longer have a `16px` `margin-bottom`. If you have previously added custom styles, to your components inside of a row layout, in order to give them extra `margin-right` in LTR or `margin-left` in RTL, you will need to re-evaluate those styles. In most cases, they can now be removed.

Author: clshortfuse

src/components/checkbox/checkbox.js

@@ -81,6 +81,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
     tAttrs.$set('tabindex', tAttrs.tabindex || '0');
     tAttrs.$set('type', 'checkbox');
     tAttrs.$set('role', tAttrs.type);
+    tElement.addClass('md-auto-horizontal-margin');
 
     return  {
       pre: function(scope, element) {

src/components/checkbox/checkbox.scss

@@ -5,7 +5,6 @@
 //
 // ^^ defined in _variables.scss
 //
-$checkbox-margin-end: 16px !default;
 $checkbox-text-margin-top: 10px !default;
 $container-checkbox-margin: 3px !default;
 
@@ -41,13 +40,7 @@ md-checkbox {
   position: relative;
   min-width: $checkbox-width;
   @include dense(min-height, $checkbox-min-height, $checkbox-min-height-dense);
-  @include rtl(margin-left, 0, $checkbox-margin-end);
-  @include rtl(margin-right, $checkbox-margin-end, 0);
 
-  &:last-of-type {
-    margin-left: 0;
-    margin-right: 0;
-  }
   &.md-focused:not([disabled]) {
     .md-container:before {
       left: -8px;

src/components/divider/divider-theme.scss

@@ -1,14 +1,3 @@
 md-divider.md-THEME_NAME-theme {
-  border-top-color: '{{foreground-4}}';
-}
-
-.layout-row,
-.layout-xs-row, .layout-gt-xs-row,
-.layout-sm-row, .layout-gt-sm-row,
-.layout-md-row, .layout-gt-md-row,
-.layout-lg-row, .layout-gt-lg-row,
-.layout-xl-row {
-  & > md-divider.md-THEME_NAME-theme {
-    border-right-color: '{{foreground-4}}';
-  }
+  border-color: '{{foreground-4}}';
 }

src/components/divider/divider.scss

@@ -9,15 +9,8 @@ md-divider {
   }
 }
 
-.layout-row,
-.layout-xs-row, .layout-gt-xs-row,
-.layout-sm-row, .layout-gt-sm-row,
-.layout-md-row, .layout-gt-md-row,
-.layout-lg-row, .layout-gt-lg-row,
-.layout-xl-row {
-  & > md-divider {
-    border-top-width: 0;
-    border-right-width: 1px;
-    border-right-style: solid;
-  }
+@include when-layout-row(md-divider) {
+  border-top-width: 0;
+  border-right-width: 1px;
+  border-right-style: solid;
 }

src/components/input/input.js

@@ -147,6 +147,8 @@ function mdInputContainerDirective($mdTheming, $parse, $$rAF) {
   function ContainerCtrl($scope, $element, $attrs, $animate) {
     var self = this;
 
+    $element.addClass('md-auto-horizontal-margin');
+
     self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
 
     self.delegateClick = function() {

src/components/radioButton/radio-button.js

@@ -262,6 +262,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
 
     $mdTheming(element);
     configureAria(element, scope);
+    element.addClass('md-auto-horizontal-margin');
 
     // ngAria overwrites the aria-checked inside a $watch for ngValue.
     // We should defer the initialization until all the watches have fired.

src/components/radioButton/radio-button.scss

@@ -114,37 +114,6 @@ md-radio-button {
 }
 
 md-radio-group {
-  /** Layout adjustments for the radio group. */
-  &.layout-column,
-  &.layout-xs-column, &.layout-gt-xs-column,
-  &.layout-sm-column, &.layout-gt-sm-column,
-  &.layout-md-column, &.layout-gt-md-column,
-  &.layout-lg-column, &.layout-gt-lg-column,
-  &.layout-xl-column {
-    md-radio-button {
-      margin-bottom: $radio-margin;
-    }
-  }
-
-  &.layout-row,
-  &.layout-xs-row, &.layout-gt-xs-row,
-  &.layout-sm-row, &.layout-gt-sm-row,
-  &.layout-md-row, &.layout-gt-md-row,
-  &.layout-lg-row, &.layout-gt-lg-row,
-  &.layout-xl-row {
-    md-radio-button {
-      margin-top: 0;
-      margin-bottom: 0;
-      @include rtl(margin-left, 0, $radio-margin);
-      @include rtl(margin-right, $radio-margin, 0);
-
-      &:last-of-type {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
   &:focus {
     outline: none;
   }
@@ -171,6 +140,10 @@ md-radio-group {
   }
 }
 
+@include when-layout-row(md-radio-button) {
+  margin-bottom: 0;
+}
+
 .md-inline-form {
   md-radio-group {
     margin: 18px 0 19px;

src/components/select/demoBasicUsage/style.css

@@ -1,3 +0,0 @@
-md-input-container {
-  margin-right: 10px;
-}

src/components/select/select.js

@@ -173,6 +173,8 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
    */
   function compile(tElement, tAttrs) {
     var isMultiple = $mdUtil.parseAttributeBoolean(tAttrs.multiple);
+    tElement.addClass('md-auto-horizontal-margin');
+
     // add the select value that will hold our placeholder or selected option value
     var valueEl = angular.element('<md-select-value><span></span></md-select-value>');
     valueEl.append('<span class="md-select-icon" aria-hidden="true"></span>');

src/core/style/_mixins.scss

@@ -348,3 +348,56 @@
     @include rtl($prop, $ltr-dense, $rtl-dense);
   }
 }
+
+// Only use when in row layout
+@mixin when-layout-row($element) {
+  @media (max-width: $layout-breakpoint-xs - 1) {
+    .layout-row:not(.layout-xs-column),
+    .layout-xs-row {
+      & > #{$element} { @content; }
+    }
+  }
+  @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
+    .layout-row:not(.layout-gt-xs-column),
+    .layout-gt-xs-row,
+    .layout-sm-row {
+      &:not(.layout-sm-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
+    .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
+    .layout-gt-xs-row:not(.layout-gt-sm-column),
+    .layout-gt-sm-row,
+    .layout-md-row {
+      &:not(.layout-md-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
+    .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    .layout-gt-sm-row:not(.layout-gt-md-column),
+    .layout-gt-md-row,
+    .layout-lg-row {
+      &:not(.layout-lg-column) > #{$element} { @content; }
+    }
+  }
+  @media (min-width: $layout-breakpoint-lg) {
+    .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
+    .layout-gt-sm-row:not(.layout-gt-md-column),
+    .layout-gt-md-row,
+    .layout-gt-lg-row,
+    .layout-xl-row {
+      &:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
+    }
+  }
+}
+
+// Auto insert object margin
+@mixin auto-horizontal-margin($selector) {
+  @include when-layout-row($selector) {
+    &:not(:first-child) {
+      @include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
+    }
+  }
+}