From 32cc8e468539aa4e33501944962aa3eb4f638e51 Mon Sep 17 00:00:00 2001 From: Carlos Lopez Jr Date: Fri, 22 Jul 2016 14:24:59 -0400 Subject: [PATCH] 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. --- src/components/checkbox/checkbox.js | 1 + src/components/checkbox/checkbox.scss | 7 --- src/components/divider/divider-theme.scss | 13 +---- src/components/divider/divider.scss | 15 ++---- src/components/input/input.js | 2 + src/components/radioButton/radio-button.js | 1 + src/components/radioButton/radio-button.scss | 35 ++---------- .../select/demoBasicUsage/style.css | 3 -- src/components/select/select.js | 2 + src/core/style/_mixins.scss | 53 +++++++++++++++++++ src/core/style/_variables.scss | 3 ++ src/core/style/structure.scss | 1 + 12 files changed, 72 insertions(+), 64 deletions(-) diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js index 52c1bc7b21..f10ae110cd 100644 --- a/src/components/checkbox/checkbox.js +++ b/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) { diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 47a0ef40b3..1a7de6e143 100644 --- a/src/components/checkbox/checkbox.scss +++ b/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; diff --git a/src/components/divider/divider-theme.scss b/src/components/divider/divider-theme.scss index d863fda67b..43111af13a 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 295be4cfdf..37665d9674 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 b3eff85a8f..e62efb86d7 100644 --- a/src/components/input/input.js +++ b/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() { diff --git a/src/components/radioButton/radio-button.js b/src/components/radioButton/radio-button.js index b9bdadc29e..5a3edb87be 100644 --- a/src/components/radioButton/radio-button.js +++ b/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. diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss index d65301f1fe..05498c6c7d 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; } @@ -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; diff --git a/src/components/select/demoBasicUsage/style.css b/src/components/select/demoBasicUsage/style.css index 4895de401c..e69de29bb2 100644 --- a/src/components/select/demoBasicUsage/style.css +++ b/src/components/select/demoBasicUsage/style.css @@ -1,3 +0,0 @@ -md-input-container { - margin-right: 10px; -} diff --git a/src/components/select/select.js b/src/components/select/select.js index 92d31f1555..787a8c4edd 100755 --- a/src/components/select/select.js +++ b/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(''); valueEl.append(''); diff --git a/src/core/style/_mixins.scss b/src/core/style/_mixins.scss index ba924525a6..c3b714e850 100644 --- a/src/core/style/_mixins.scss +++ b/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); + } + } +} diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 33fd350120..9c06fb58ab 100644 --- a/src/core/style/_variables.scss +++ b/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; diff --git a/src/core/style/structure.scss b/src/core/style/structure.scss index f0454b2bf6..ec3a0d9eab 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