Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit c2c336b

Browse files
clshortfuseSplaktar
clshortfuse
authored and
Splaktar
committed
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.
1 parent b1e3ae7 commit c2c336b

File tree

12 files changed

+72
-64
lines changed

12 files changed

+72
-64
lines changed

‎src/components/checkbox/checkbox.js

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
8181
tAttrs.$set('tabindex', tAttrs.tabindex || '0');
8282
tAttrs.$set('type', 'checkbox');
8383
tAttrs.$set('role', tAttrs.type);
84+
tElement.addClass('md-auto-horizontal-margin');
8485

8586
return {
8687
pre: function(scope, element) {

‎src/components/checkbox/checkbox.scss

-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
//
66
// ^^ defined in _variables.scss
77
//
8-
$checkbox-margin-end: 16px !default;
98
$checkbox-text-margin-top: 10px !default;
109
$container-checkbox-margin: 3px !default;
1110

@@ -41,13 +40,7 @@ md-checkbox {
4140
position: relative;
4241
min-width: $checkbox-width;
4342
@include dense(min-height, $checkbox-min-height, $checkbox-min-height-dense);
44-
@include rtl(margin-left, 0, $checkbox-margin-end);
45-
@include rtl(margin-right, $checkbox-margin-end, 0);
4643

47-
&:last-of-type {
48-
margin-left: 0;
49-
margin-right: 0;
50-
}
5144
&.md-focused:not([disabled]) {
5245
.md-container:before {
5346
left: -8px;

‎src/components/divider/divider-theme.scss

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
11
md-divider.md-THEME_NAME-theme {
2-
border-top-color: '{{foreground-4}}';
3-
}
4-
5-
.layout-row,
6-
.layout-xs-row, .layout-gt-xs-row,
7-
.layout-sm-row, .layout-gt-sm-row,
8-
.layout-md-row, .layout-gt-md-row,
9-
.layout-lg-row, .layout-gt-lg-row,
10-
.layout-xl-row {
11-
& > md-divider.md-THEME_NAME-theme {
12-
border-right-color: '{{foreground-4}}';
13-
}
2+
border-color: '{{foreground-4}}';
143
}

‎src/components/divider/divider.scss

+4-11
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,8 @@ md-divider {
99
}
1010
}
1111

12-
.layout-row,
13-
.layout-xs-row, .layout-gt-xs-row,
14-
.layout-sm-row, .layout-gt-sm-row,
15-
.layout-md-row, .layout-gt-md-row,
16-
.layout-lg-row, .layout-gt-lg-row,
17-
.layout-xl-row {
18-
& > md-divider {
19-
border-top-width: 0;
20-
border-right-width: 1px;
21-
border-right-style: solid;
22-
}
12+
@include when-layout-row(md-divider) {
13+
border-top-width: 0;
14+
border-right-width: 1px;
15+
border-right-style: solid;
2316
}

‎src/components/input/input.js

+2
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ function mdInputContainerDirective($mdTheming, $parse, $$rAF) {
147147
function ContainerCtrl($scope, $element, $attrs, $animate) {
148148
var self = this;
149149

150+
$element.addClass('md-auto-horizontal-margin');
151+
150152
self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
151153

152154
self.delegateClick = function() {

‎src/components/radioButton/radio-button.js

+1
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
262262

263263
$mdTheming(element);
264264
configureAria(element, scope);
265+
element.addClass('md-auto-horizontal-margin');
265266

266267
// ngAria overwrites the aria-checked inside a $watch for ngValue.
267268
// We should defer the initialization until all the watches have fired.

‎src/components/radioButton/radio-button.scss

+4-31
Original file line numberDiff line numberDiff line change
@@ -114,37 +114,6 @@ md-radio-button {
114114
}
115115

116116
md-radio-group {
117-
/** Layout adjustments for the radio group. */
118-
&.layout-column,
119-
&.layout-xs-column, &.layout-gt-xs-column,
120-
&.layout-sm-column, &.layout-gt-sm-column,
121-
&.layout-md-column, &.layout-gt-md-column,
122-
&.layout-lg-column, &.layout-gt-lg-column,
123-
&.layout-xl-column {
124-
md-radio-button {
125-
margin-bottom: $radio-margin;
126-
}
127-
}
128-
129-
&.layout-row,
130-
&.layout-xs-row, &.layout-gt-xs-row,
131-
&.layout-sm-row, &.layout-gt-sm-row,
132-
&.layout-md-row, &.layout-gt-md-row,
133-
&.layout-lg-row, &.layout-gt-lg-row,
134-
&.layout-xl-row {
135-
md-radio-button {
136-
margin-top: 0;
137-
margin-bottom: 0;
138-
@include rtl(margin-left, 0, $radio-margin);
139-
@include rtl(margin-right, $radio-margin, 0);
140-
141-
&:last-of-type {
142-
margin-left: 0;
143-
margin-right: 0;
144-
}
145-
}
146-
}
147-
148117
&:focus {
149118
outline: none;
150119
}
@@ -171,6 +140,10 @@ md-radio-group {
171140
}
172141
}
173142

143+
@include when-layout-row(md-radio-button) {
144+
margin-bottom: 0;
145+
}
146+
174147
.md-inline-form {
175148
md-radio-group {
176149
margin: 18px 0 19px;

‎src/components/select/demoBasicUsage/style.css

-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
md-input-container {
2-
margin-right: 10px;
3-
}

‎src/components/select/select.js

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

‎src/core/style/_mixins.scss

+53
Original file line numberDiff line numberDiff line change
@@ -348,3 +348,56 @@
348348
@include rtl($prop, $ltr-dense, $rtl-dense);
349349
}
350350
}
351+
352+
// Only use when in row layout
353+
@mixin when-layout-row($element) {
354+
@media (max-width: $layout-breakpoint-xs - 1) {
355+
.layout-row:not(.layout-xs-column),
356+
.layout-xs-row {
357+
& > #{$element} { @content; }
358+
}
359+
}
360+
@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
361+
.layout-row:not(.layout-gt-xs-column),
362+
.layout-gt-xs-row,
363+
.layout-sm-row {
364+
&:not(.layout-sm-column) > #{$element} { @content; }
365+
}
366+
}
367+
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
368+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
369+
.layout-gt-xs-row:not(.layout-gt-sm-column),
370+
.layout-gt-sm-row,
371+
.layout-md-row {
372+
&:not(.layout-md-column) > #{$element} { @content; }
373+
}
374+
}
375+
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
376+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
377+
.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
378+
.layout-gt-sm-row:not(.layout-gt-md-column),
379+
.layout-gt-md-row,
380+
.layout-lg-row {
381+
&:not(.layout-lg-column) > #{$element} { @content; }
382+
}
383+
}
384+
@media (min-width: $layout-breakpoint-lg) {
385+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
386+
.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
387+
.layout-gt-sm-row:not(.layout-gt-md-column),
388+
.layout-gt-md-row,
389+
.layout-gt-lg-row,
390+
.layout-xl-row {
391+
&:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
392+
}
393+
}
394+
}
395+
396+
// Auto insert object margin
397+
@mixin auto-horizontal-margin($selector) {
398+
@include when-layout-row($selector) {
399+
&:not(:first-child) {
400+
@include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
401+
}
402+
}
403+
}

‎src/core/style/_variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,6 @@ $checkbox-width: 18px !default;
132132
$checkbox-height: $checkbox-width !default;
133133
$checkbox-border-radius: 2px !default;
134134
$checkbox-border-width: 2px !default;
135+
136+
// Shared Horizontal Margin Variables
137+
$default-horizontal-margin: 16px !default;

‎src/core/style/structure.scss

+1
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,4 @@ bdo[dir=ltr] {
210210
unicode-bidi: bidi-override;
211211
}
212212

213+
@include auto-horizontal-margin('.md-auto-horizontal-margin');

0 commit comments

Comments
 (0)