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

feat(layouts): add @mixin for responsive support for rows #9220

Closed
wants to merge 1 commit into from
Closed

feat(layouts): add @mixin for responsive support for rows #9220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/checkbox/checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
7 changes: 0 additions & 7 deletions src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
13 changes: 1 addition & 12 deletions src/components/divider/divider-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}';
}
15 changes: 4 additions & 11 deletions src/components/divider/divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 2 additions & 0 deletions src/components/input/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
1 change: 1 addition & 0 deletions src/components/radioButton/radio-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
35 changes: 4 additions & 31 deletions src/components/radioButton/radio-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions src/components/select/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('<md-select-value><span></span></md-select-value>');
valueEl.append('<span class="md-select-icon" aria-hidden="true"></span>');
Expand Down
53 changes: 53 additions & 0 deletions src/core/style/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe that this should be :last-child to actually work properly.

That said, in my testing, that results in this:
Screen Shot 2020-07-27 at 15 00 05

Using :first-child seems to give us what we want:
Screen Shot 2020-07-27 at 15 00 34

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be :last-child as you noted, or else it would target against <last-child> tag name, which would be wrong. I would check against a row with 3 items to ensure the auto margins work. It might look right with :first-child because they're only 2 items.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rule, in theory, should pad $default-horizontal-margin at the start (left on LTR). Left padding should appear on every item, except the first one, so :not(:first-child) makes sense.

Maybe I did a last minute change and had it apply margin at the end originally, and failed to adjust. So yeah, :not(:first-child) is good.

@include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
}
}
}
1 change: 1 addition & 0 deletions src/core/style/structure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,3 +210,4 @@ bdo[dir=ltr] {
unicode-bidi: bidi-override;
}

@include auto-horizontal-margin('.md-auto-horizontal-margin');
3 changes: 3 additions & 0 deletions src/core/style/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;