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

Commit 20ab2f0

Browse files
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 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
1 parent 9a2c47d commit 20ab2f0

File tree

11 files changed

+73
-60
lines changed

11 files changed

+73
-60
lines changed

src/components/checkbox/checkbox.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
7878
tAttrs.$set('tabindex', tAttrs.tabindex || '0');
7979
tAttrs.$set('type', 'checkbox');
8080
tAttrs.$set('role', tAttrs.type);
81+
tElement.addClass('md-auto-horizontal-margin');
8182

8283
return {
8384
pre: function(scope, element) {

src/components/checkbox/checkbox.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,6 @@ md-checkbox {
2626
position: relative;
2727
min-width: $checkbox-width;
2828
min-height: $checkbox-width;
29-
@include rtl(margin-left, 0, $checkbox-margin);
30-
@include rtl(margin-right, $checkbox-margin, 0);
31-
32-
&:last-of-type {
33-
margin-left: 0;
34-
margin-right: 0;
35-
}
3629

3730
&.md-focused:not([disabled]) {
3831
.md-container:before {
Lines changed: 1 addition & 12 deletions
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

Lines changed: 4 additions & 11 deletions
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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ function mdInputContainerDirective($mdTheming, $parse) {
108108
function ContainerCtrl($scope, $element, $attrs, $animate) {
109109
var self = this;
110110

111+
$element.addClass('md-auto-horizontal-margin');
112+
111113
self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
112114

113115
self.delegateClick = function() {

src/components/radioButton/radio-button.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
271271

272272
$mdTheming(element);
273273
configureAria(element, scope);
274+
element.addClass('md-auto-horizontal-margin');
274275

275276
initialize();
276277

src/components/radioButton/radio-button.scss

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -113,38 +113,9 @@ md-radio-button {
113113
}
114114
}
115115

116-
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-
}
128116

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-
}
147117

118+
md-radio-group {
148119
&:focus {
149120
outline: none;
150121
}
@@ -163,6 +134,10 @@ md-radio-group {
163134
}
164135
}
165136

137+
@include when-layout-row(md-radio-button) {
138+
margin-bottom: 0;
139+
}
140+
166141
.md-inline-form {
167142
md-radio-group {
168143
margin: 18px 0 19px;

src/components/select/select.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,8 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
183183
};
184184

185185
function compile(element, attr) {
186+
element.addClass('md-auto-horizontal-margin');
187+
186188
// add the select value that will hold our placeholder or selected option value
187189
var valueEl = angular.element('<md-select-value><span></span></md-select-value>');
188190
valueEl.append('<span class="md-select-icon" aria-hidden="true"></span>');

src/core/style/mixins.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,3 +321,56 @@
321321
}
322322
}
323323
}
324+
325+
// Only use when in row layout
326+
@mixin when-layout-row($element) {
327+
@media (max-width: $layout-breakpoint-xs - 1) {
328+
.layout-row:not(.layout-xs-column),
329+
.layout-xs-row {
330+
& > #{$element} { @content; }
331+
}
332+
}
333+
@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
334+
.layout-row:not(.layout-gt-xs-column),
335+
.layout-gt-xs-row,
336+
.layout-sm-row {
337+
&:not(.layout-sm-column) > #{$element} { @content; }
338+
}
339+
}
340+
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
341+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
342+
.layout-gt-xs-row:not(.layout-gt-sm-column),
343+
.layout-gt-sm-row,
344+
.layout-md-row {
345+
&:not(.layout-md-column) > #{$element} { @content; }
346+
}
347+
}
348+
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
349+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
350+
.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
351+
.layout-gt-sm-row:not(.layout-gt-md-column),
352+
.layout-gt-md-row,
353+
.layout-lg-row {
354+
&:not(.layout-lg-column) > #{$element} { @content; }
355+
}
356+
}
357+
@media (min-width: $layout-breakpoint-lg) {
358+
.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
359+
.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
360+
.layout-gt-sm-row:not(.layout-gt-md-column),
361+
.layout-gt-md-row,
362+
.layout-gt-lg-row,
363+
.layout-xl-row {
364+
&:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
365+
}
366+
}
367+
}
368+
369+
// Auto insert object margin
370+
@mixin auto-horizontal-margin($selector) {
371+
@include when-layout-row($selector) {
372+
&:not(last-child) {
373+
@include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
374+
}
375+
}
376+
}

src/core/style/structure.scss

Lines changed: 1 addition & 0 deletions
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)