Skip to content

Commit 106d274

Browse files
committed
Revert "fix(list): incorrect padding for list-items with avatars, icons (#9163)" (#9449)
This reverts commit dfbd8d2.
1 parent a71d1a8 commit 106d274

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
@@ -110,7 +110,7 @@ <h2>Selection list</h2>
110110
(change)="changeEventCount = changeEventCount + 1">
111111
<h3 mat-subheader>Groceries</h3>
112112

113-
<mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
113+
<mat-list-option value="bananas">Bananas</mat-list-option>
114114
<mat-list-option selected value="oranges">Oranges</mat-list-option>
115115
<mat-list-option value="apples">Apples</mat-list-option>
116116
<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
@@ -90,40 +90,17 @@ $mat-dense-list-icon-size: 20px;
9090

9191
.mat-list-text {
9292
@include mat-line-wrapper-base();
93+
padding: 0 $mat-list-side-padding;
9394

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

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

0 commit comments

Comments
 (0)