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

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);
+    }
+  }
+}

src/core/style/_variables.scss

@@ -132,3 +132,6 @@ $checkbox-width: 18px !default;
 $checkbox-height: $checkbox-width !default;
 $checkbox-border-radius: 2px !default;
 $checkbox-border-width: 2px !default;
+
+// Shared Horizontal Margin Variables
+$default-horizontal-margin: 16px !default;

src/core/style/structure.scss

@@ -210,3 +210,4 @@ bdo[dir=ltr] {
   unicode-bidi: bidi-override;
 }
 
+@include auto-horizontal-margin('.md-auto-horizontal-margin');