From 8f50a9219c368154b2f8ae12f333bba335667394 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 when in a row and not last item. Previous implementations could not properly detect row configuration where a layout would change direction based on media breakpoints. Fixes #9112 --- 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 ++----------- src/components/select/select.js | 2 + src/core/style/mixins.scss | 53 ++++++++++++++++++++ src/core/style/structure.scss | 1 + src/core/style/variables.scss | 3 ++ 11 files changed, 72 insertions(+), 61 deletions(-) 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