diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
index e8d26c451b2..958e8a369b7 100644
--- a/src/components/checkbox/checkbox.js
+++ b/src/components/checkbox/checkbox.js
@@ -78,6 +78,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) {
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 34591161558..207bdf71021 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -26,13 +26,6 @@ md-checkbox {
position: relative;
min-width: $checkbox-width;
min-height: $checkbox-width;
- @include rtl(margin-left, 0, $checkbox-margin);
- @include rtl(margin-right, $checkbox-margin, 0);
-
- &:last-of-type {
- margin-left: 0;
- margin-right: 0;
- }
&.md-focused:not([disabled]) {
.md-container:before {
diff --git a/src/components/divider/divider-theme.scss b/src/components/divider/divider-theme.scss
index d863fda67ba..43111af13ab 100644
--- a/src/components/divider/divider-theme.scss
+++ b/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}}';
}
\ No newline at end of file
diff --git a/src/components/divider/divider.scss b/src/components/divider/divider.scss
index 295be4cfdf6..37665d96743 100644
--- a/src/components/divider/divider.scss
+++ b/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;
}
diff --git a/src/components/input/input.js b/src/components/input/input.js
index f904a847abb..ed93682b50a 100644
--- a/src/components/input/input.js
+++ b/src/components/input/input.js
@@ -124,6 +124,8 @@ function mdInputContainerDirective($mdTheming, $parse) {
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() {
diff --git a/src/components/radioButton/radio-button.js b/src/components/radioButton/radio-button.js
index 00ae9177d8d..bd5bdb10006 100644
--- a/src/components/radioButton/radio-button.js
+++ b/src/components/radioButton/radio-button.js
@@ -269,6 +269,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.
diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss
index 974b10ca46c..5f27684398d 100644
--- a/src/components/radioButton/radio-button.scss
+++ b/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;
}
@@ -163,6 +132,10 @@ md-radio-group {
}
}
+@include when-layout-row(md-radio-button) {
+ margin-bottom: 0;
+}
+
.md-inline-form {
md-radio-group {
margin: 18px 0 19px;
diff --git a/src/components/select/select.js b/src/components/select/select.js
index 7df6f8cc2b1..360542264ec 100755
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -193,6 +193,8 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
};
function compile(element, attr) {
+ element.addClass('md-auto-horizontal-margin');
+
// add the select value that will hold our placeholder or selected option value
var valueEl = angular.element('');
valueEl.append('');
diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss
index cafcb4478f9..76316c988c7 100644
--- a/src/core/style/mixins.scss
+++ b/src/core/style/mixins.scss
@@ -337,3 +337,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(last-child) {
+ @include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
+ }
+ }
+}
diff --git a/src/core/style/structure.scss b/src/core/style/structure.scss
index ec39c43d6b5..9a84592d64c 100644
--- a/src/core/style/structure.scss
+++ b/src/core/style/structure.scss
@@ -210,3 +210,4 @@ bdo[dir=ltr] {
unicode-bidi: bidi-override;
}
+@include auto-horizontal-margin('.md-auto-horizontal-margin');
\ No newline at end of file
diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss
index 055ae6c245b..626f16fd434 100644
--- a/src/core/style/variables.scss
+++ b/src/core/style/variables.scss
@@ -131,3 +131,6 @@ $checkbox-width: 20px !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;
\ No newline at end of file