Skip to content

Commit

Permalink
fix(table): incorrect padding for single-cell rows in rtl (#20266)
Browse files Browse the repository at this point in the history
The styles that reset the padding in RTL shouldn't apply to single-cell rows. Also moves a bit of code around so we don't have to repeat top-level selectors as much.

Fixes #20265.

(cherry picked from commit 1f6b90c)
  • Loading branch information
crisbeto authored and wagnermaciel committed Aug 19, 2020
1 parent 00c782e commit 89b05a8
Showing 1 changed file with 29 additions and 27 deletions.
56 changes: 29 additions & 27 deletions src/material/table/table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,25 @@ mat-row, mat-header-row, mat-footer-row {
}
}

// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
mat-cell:first-of-type, mat-header-cell:first-of-type, mat-footer-cell:first-of-type {
padding-left: $mat-row-horizontal-padding;
mat-cell, mat-header-cell, mat-footer-cell {
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
&:first-of-type {
padding-left: $mat-row-horizontal-padding;

[dir='rtl'] & {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
[dir='rtl'] &:not(:only-of-type) {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
}
}
}

mat-cell:last-of-type, mat-header-cell:last-of-type, mat-footer-cell:last-of-type {
padding-right: $mat-row-horizontal-padding;
&:last-of-type {
padding-right: $mat-row-horizontal-padding;

[dir='rtl'] & {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
[dir='rtl'] &:not(:only-of-type) {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
}
}
}

Expand Down Expand Up @@ -95,25 +97,25 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
padding: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
}

// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
padding-left: $mat-row-horizontal-padding;
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
&:first-of-type {
padding-left: $mat-row-horizontal-padding;

[dir='rtl'] & {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
[dir='rtl'] &:not(:only-of-type) {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
}
}
}

th.mat-header-cell:last-of-type, td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type {
padding-right: $mat-row-horizontal-padding;
&:last-of-type {
padding-right: $mat-row-horizontal-padding;

[dir='rtl'] & {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
[dir='rtl'] &:not(:only-of-type) {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
}
}
}

Expand Down

0 comments on commit 89b05a8

Please sign in to comment.