diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index a26806aa53b2..96aea4632f04 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -111,7 +111,7 @@
Selection list
(change)="changeEventCount = changeEventCount + 1">
Groceries
- Bananas
+ Bananas
Oranges
Apples
Strawberries
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 6c8583e9d534..5629bab50e5a 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -92,40 +92,17 @@ $mat-list-item-inset-divider-offset: 72px;
.mat-list-text {
@include mat-line-wrapper-base();
+ padding: 0 $mat-list-side-padding;
- // By default, padding will be always added on the start-side of the mat-list-text, because
- // we assume that there is always a secondary item (e.g. avatar-icon, checkbox). But if the
- // mat-list-text element is the second element, then there is no secondary item and
- // the padding can be removed.
+ // We only want to override the padding if there isn't
+ // an avatar or icon before the element. Since the ripple
+ // will always be the first child in the container, we
+ // check whether this element is the second child.
&:nth-child(2) {
padding: 0;
}
}
- // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
- // list-item. This means that there should be a padding for the mat-list-text on the start-side.
- .mat-list-item-content .mat-list-text {
- padding-left: $mat-list-side-padding;
-
- [dir='rtl'] & {
- padding-right: $mat-list-side-padding;
- padding-left: 0;
- }
- }
-
- // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
- // end of the list option. Since there is a secondary item (checkbox) at the end of the
- // option, there needs to be a padding for the mat-list-text on the end-side.
- .mat-list-item-content-reverse .mat-list-text {
- padding-left: 0;
- padding-right: $mat-list-side-padding;
-
- [dir='rtl'] & {
- padding-right: 0;
- padding-left: $mat-list-side-padding;
- }
- }
-
.mat-list-avatar {
flex-shrink: 0;
width: $mat-list-avatar-size;