Skip to content

Commit 4ffcdee

Browse files
authored
Revert "fix(list): incorrect padding for list-items with avatars, icons (#9163)" (#9449)
This reverts commit dfbd8d2.
1 parent 2140d24 commit 4ffcdee

File tree

2 files changed

+6
-29
lines changed

2 files changed

+6
-29
lines changed

src/demo-app/list/list-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ <h2>Selection list</h2>
111111
(change)="changeEventCount = changeEventCount + 1">
112112
<h3 mat-subheader>Groceries</h3>
113113

114-
<mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
114+
<mat-list-option value="bananas">Bananas</mat-list-option>
115115
<mat-list-option selected value="oranges">Oranges</mat-list-option>
116116
<mat-list-option value="apples">Apples</mat-list-option>
117117
<mat-list-option value="strawberries">Strawberries</mat-list-option>

src/lib/list/list.scss

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -92,40 +92,17 @@ $mat-list-item-inset-divider-offset: 72px;
9292

9393
.mat-list-text {
9494
@include mat-line-wrapper-base();
95+
padding: 0 $mat-list-side-padding;
9596

96-
// By default, padding will be always added on the start-side of the mat-list-text, because
97-
// we assume that there is always a secondary item (e.g. avatar-icon, checkbox). But if the
98-
// mat-list-text element is the second element, then there is no secondary item and
99-
// the padding can be removed.
97+
// We only want to override the padding if there isn't
98+
// an avatar or icon before the element. Since the ripple
99+
// will always be the first child in the container, we
100+
// check whether this element is the second child.
100101
&:nth-child(2) {
101102
padding: 0;
102103
}
103104
}
104105

105-
// There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
106-
// list-item. This means that there should be a padding for the mat-list-text on the start-side.
107-
.mat-list-item-content .mat-list-text {
108-
padding-left: $mat-list-side-padding;
109-
110-
[dir='rtl'] & {
111-
padding-right: $mat-list-side-padding;
112-
padding-left: 0;
113-
}
114-
}
115-
116-
// Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
117-
// end of the list option. Since there is a secondary item (checkbox) at the end of the
118-
// option, there needs to be a padding for the mat-list-text on the end-side.
119-
.mat-list-item-content-reverse .mat-list-text {
120-
padding-left: 0;
121-
padding-right: $mat-list-side-padding;
122-
123-
[dir='rtl'] & {
124-
padding-right: 0;
125-
padding-left: $mat-list-side-padding;
126-
}
127-
}
128-
129106
.mat-list-avatar {
130107
flex-shrink: 0;
131108
width: $mat-list-avatar-size;

0 commit comments

Comments
 (0)