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

Commit 9a2c47d

Browse files
crisbetoThomasBurleson
crisbeto
authored and
ThomasBurleson
committed
fix(): refactor rtl-prop mixin to add less CSS
* Refactors the rtl-prop mixin to include less CSS. * Changes all the instances where it was used to incorporate the new syntax. **Note:** There are a few instances where the mixin seems used redundantly. These aren't the objective of this PR. Fixes #9217. Closes #9218
1 parent 7ba6846 commit 9a2c47d

File tree

16 files changed

+72
-77
lines changed

16 files changed

+72
-77
lines changed

‎src/components/card/card.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ md-card {
1616

1717
&:first-child {
1818
md-card-avatar {
19-
@include rtl-prop(margin-right, margin-left, 12px);
19+
@include rtl-prop(margin-right, margin-left, 12px, auto);
2020
}
2121
}
2222

2323
&:last-child {
2424
md-card-avatar {
25-
@include rtl-prop(margin-left, margin-right, 12px);
25+
@include rtl-prop(margin-left, margin-right, 12px, auto);
2626
}
2727
}
2828

@@ -169,11 +169,11 @@ md-card {
169169
margin: 0 $baseline-grid * .5;
170170

171171
&:first-of-type {
172-
@include rtl-prop(margin-left, margin-right, 0);
172+
@include rtl-prop(margin-left, margin-right, 0, auto);
173173
}
174174

175175
&:last-of-type {
176-
@include rtl-prop(margin-right, margin-left, 0);
176+
@include rtl-prop(margin-right, margin-left, 0, auto);
177177
}
178178
}
179179

@@ -182,11 +182,11 @@ md-card {
182182
margin-right: 3 * $baseline-grid / 4;
183183

184184
&:first-of-type {
185-
@include rtl-prop(margin-left, margin-right, 3 * $baseline-grid / 2);
185+
@include rtl-prop(margin-left, margin-right, 3 * $baseline-grid / 2, auto);
186186
}
187187

188188
&:last-of-type {
189-
@include rtl-prop(margin-right, margin-left, 3 * $baseline-grid / 2);
189+
@include rtl-prop(margin-right, margin-left, 3 * $baseline-grid / 2, auto);
190190
}
191191
}
192192

‎src/components/chips/chips.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $contact-chip-name-width: rem(12) !default;
2626
.md-contact-name {
2727
display: inline-block;
2828
height: $chip-height;
29-
@include rtl-prop(margin-left, margin-right, rem(0.8));
29+
@include rtl-prop(margin-left, margin-right, rem(0.8), auto);
3030
}
3131
}
3232
}
@@ -39,7 +39,7 @@ $contact-chip-name-width: rem(12) !default;
3939
margin-top: $contact-chip-suggestion-margin;
4040
}
4141
.md-contact-name {
42-
@include rtl-prop(margin-left, margin-right, $contact-chip-suggestion-margin);
42+
@include rtl-prop(margin-left, margin-right, $contact-chip-suggestion-margin, auto);
4343
width: $contact-chip-name-width;
4444
}
4545
.md-contact-name, .md-contact-email {
@@ -71,10 +71,10 @@ $contact-chip-name-width: rem(12) !default;
7171
&.md-removable {
7272

7373
md-chip {
74-
@include rtl-prop(padding-right, padding-left, $chip-remove-padding-right);
74+
@include rtl-prop(padding-right, padding-left, $chip-remove-padding-right, 0);
7575

7676
.md-chip-content {
77-
@include rtl-prop(padding-right, padding-left, rem(0.4));
77+
@include rtl-prop(padding-right, padding-left, rem(0.4), 0);
7878
}
7979
}
8080

@@ -112,7 +112,7 @@ $contact-chip-name-width: rem(12) !default;
112112
}
113113
.md-chip-remove-container {
114114
position: absolute;
115-
@include rtl-prop(right, left, 0);
115+
@include rtl-prop(right, left, 0, auto);
116116
line-height: $chip-remove-line-height;
117117
}
118118
.md-chip-remove {

‎src/components/datepicker/calendar.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ $md-calendar-height:
3333
// because we want the header background and the month dividing border to
3434
// extend the entire width of the calendar.
3535
&:first-child {
36-
@include rtl-prop(padding-left, padding-right, $md-calendar-side-padding);
36+
@include rtl-prop(padding-left, padding-right, $md-calendar-side-padding, 0);
3737
}
3838

3939
&:last-child {
40-
@include rtl-prop(padding-right, padding-left, $md-calendar-side-padding);
40+
@include rtl-prop(padding-right, padding-left, $md-calendar-side-padding, 0);
4141
}
4242
}
4343

‎src/components/datepicker/datePicker.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ md-datepicker {
1515

1616
// Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft.
1717
// This prevents the element from shifting right when opening via the triangle button.
18-
@include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2);
19-
@include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2);
18+
@include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2, 0);
19+
@include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2, auto);
2020

2121
vertical-align: middle;
2222
}
@@ -83,7 +83,7 @@ md-datepicker {
8383

8484
.md-input-message-animation {
8585
$margin: $md-datepicker-triangle-button-width + $md-datepicker-button-padding * 2 + $md-datepicker-button-gap;
86-
@include rtl-prop(margin-left, margin-right, $margin);
86+
@include rtl-prop(margin-left, margin-right, $margin, auto);
8787
}
8888
}
8989
}
@@ -102,7 +102,7 @@ md-datepicker {
102102
width: auto;
103103

104104
.md-icon-button + & {
105-
@include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap);
105+
@include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
106106
}
107107

108108
&.md-datepicker-focused {
@@ -200,7 +200,7 @@ md-datepicker {
200200
// Button containing the down "disclosure" triangle/arrow.
201201
.md-datepicker-triangle-button {
202202
position: absolute;
203-
@include rtl-prop(right, left, 0);
203+
@include rtl-prop(right, left, 0, auto);
204204
top: $md-date-arrow-size;
205205

206206
// TODO(jelbourn): This position isn't great on all platforms.
@@ -238,7 +238,7 @@ md-datepicker[disabled] {
238238
}
239239

240240
.md-icon-button + .md-datepicker-input-container {
241-
@include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap);
241+
@include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap, auto);
242242
}
243243

244244
.md-datepicker-input,
@@ -249,7 +249,7 @@ md-datepicker[disabled] {
249249
// This needs some extra specificity in order to override
250250
// the focused/invalid border colors.
251251
input.md-datepicker-input {
252-
@include rtl-prop(margin-left, margin-right, 24px);
252+
@include rtl-prop(margin-left, margin-right, 24px, auto);
253253
height: $md-datepicker-input-mask-height;
254254
border-bottom-color: transparent;
255255
}

‎src/components/divider/divider.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ md-divider {
55
margin: 0;
66

77
&[md-inset] {
8-
@include rtl-prop(margin-left, margin-right, $baseline-grid * 10);
8+
@include rtl-prop(margin-left, margin-right, $baseline-grid * 10, auto);
99
}
1010
}
1111

@@ -20,4 +20,4 @@ md-divider {
2020
border-right-width: 1px;
2121
border-right-style: solid;
2222
}
23-
}
23+
}

‎src/components/fabToolbar/fabToolbar.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,31 +51,31 @@ md-fab-toolbar {
5151

5252
&.md-left {
5353
md-fab-trigger {
54-
@include rtl-prop(right, left, 0);
54+
@include rtl-prop(right, left, 0, auto);
5555
}
5656

5757
.md-toolbar-tools {
5858
flex-direction: row-reverse;
5959

6060
> .md-button:first-child {
61-
@include rtl-prop(margin-right, margin-left, 0.6rem)
61+
@include rtl-prop(margin-right, margin-left, 0.6rem, auto)
6262
}
6363

6464
> .md-button:first-child {
65-
@include rtl-prop(margin-left, margin-right, -0.8rem);
65+
@include rtl-prop(margin-left, margin-right, -0.8rem, auto);
6666
}
6767

6868

6969
> .md-button:last-child {
70-
@include rtl-prop(margin-right, margin-left, 8px);
70+
@include rtl-prop(margin-right, margin-left, 8px, auto);
7171
}
7272

7373
}
7474
}
7575

7676
&.md-right {
7777
md-fab-trigger {
78-
@include rtl-prop(left, right, 0);
78+
@include rtl-prop(left, right, 0, auto);
7979
}
8080

8181
.md-toolbar-tools {

‎src/components/list/list.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ md-list {
6464
}
6565

6666
> md-icon:first-child:not(.md-avatar-icon) {
67-
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width);
67+
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
6868
}
6969
.md-avatar, .md-avatar-icon {
70-
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width);
70+
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
7171
}
7272
.md-avatar {
7373
flex: none;
@@ -81,7 +81,7 @@ md-list {
8181
&, & > .md-no-style {
8282
.md-list-item-text {
8383
&.md-offset {
84-
@include rtl-prop(margin-left, margin-right, $list-item-primary-width);
84+
@include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
8585
}
8686

8787
h3,
@@ -111,7 +111,7 @@ md-list {
111111

112112
&.md-3-line {
113113
&, & > .md-no-style {
114-
114+
115115
min-height: $list-item-dense-three-line-height;
116116
@include ie11-min-height-flexbug($list-item-dense-three-line-height);
117117

@@ -208,10 +208,10 @@ md-list-item {
208208
md-divider {
209209
position: absolute;
210210
bottom: 0;
211-
@include rtl-prop(left, right, 0);
211+
@include rtl-prop(left, right, 0, auto);
212212
width: 100%;
213213
&[md-inset] {
214-
@include rtl-prop(left, right, $list-item-inset-divider-offset);
214+
@include rtl-prop(left, right, $list-item-inset-divider-offset, auto);
215215
width: calc(100% - #{$list-item-inset-divider-offset});
216216
margin: 0 !important;
217217
}
@@ -251,13 +251,13 @@ md-list-item {
251251
}
252252

253253
& > md-icon:first-child:not(.md-avatar-icon) {
254-
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width);
254+
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);
255255
}
256256

257257
& .md-avatar, .md-avatar-icon {
258258
margin-top: $baseline-grid;
259259
margin-bottom: $baseline-grid;
260-
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width);
260+
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);
261261
border-radius: 50%;
262262
box-sizing: content-box;
263263
}
@@ -303,7 +303,7 @@ md-list-item {
303303
.md-button, .md-icon-button {
304304
&:last-of-type {
305305
// Reset 6px margin for the button.
306-
@include rtl-prop(margin-right, margin-left, 0px);
306+
@include rtl-prop(margin-right, margin-left, 0, auto);
307307
}
308308
}
309309

@@ -313,15 +313,15 @@ md-list-item {
313313

314314
&:last-child {
315315
width: 3 * $baseline-grid;
316-
@include rtl-prop(margin-right, margin-left, 0);
316+
@include rtl-prop(margin-right, margin-left, 0, auto);
317317
}
318318
}
319319

320320
md-switch {
321321
margin-top: 0;
322322
margin-bottom: 0;
323323

324-
@include rtl-prop(margin-right, margin-left, -6px);
324+
@include rtl-prop(margin-right, margin-left, -6px, auto);
325325
}
326326
}
327327

@@ -349,7 +349,7 @@ md-list-item {
349349
overflow: hidden;
350350

351351
&.md-offset {
352-
@include rtl-prop(margin-left, margin-right, $list-item-primary-width);
352+
@include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
353353
}
354354

355355
h3 {

‎src/components/menuBar/menu-bar.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ md-menu-content.md-menu-bar-menu.md-dense {
4141
padding: 0;
4242
width: 24px;
4343
top: 0.75 * $baseline-grid;
44-
@include rtl-prop(left, right, 3 * $baseline-grid);
44+
@include rtl-prop(left, right, 3 * $baseline-grid, auto);
4545
}
4646
> .md-button, .md-menu > .md-button {
4747
@include rtl(padding, 0 4 * $baseline-grid 0 8 * $baseline-grid, 0 8 * $baseline-grid 0 4 * $baseline-grid);
@@ -78,15 +78,15 @@ md-menu-content.md-menu-bar-menu.md-dense {
7878
text-transform: none;
7979
font-weight: normal;
8080
border-radius: 0px;
81-
@include rtl-prop(padding-left, padding-right, 2 * $baseline-grid);
81+
@include rtl-prop(padding-left, padding-right, 2 * $baseline-grid, 0);
8282
&:after {
8383
display: block;
8484
content: '\25BC';
8585
position: absolute;
8686
top: 0px;
8787
speak: none;
8888
@include rtl(transform, rotate(270deg) scaleY(0.45) scaleX(0.9), rotate(90deg) scaleY(0.45) scaleX(0.9));
89-
@include rtl-prop(right, left, 3.5 * $baseline-grid);
89+
@include rtl-prop(right, left, 3.5 * $baseline-grid, auto);
9090
}
9191
}
9292
}

0 commit comments

Comments
 (0)