From db520cf4c6f9709823e743f689d9cb0771bb5686 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 24 Jan 2018 16:48:46 +0100
Subject: [PATCH] fix(list): incorrect padding for list-items with avatars,
 icons (#9500)

Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes #9156
---
 src/demo-app/list/list-demo.html |  2 +-
 src/lib/list/list.scss           | 35 +++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 96aea4632f04..a26806aa53b2 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -111,7 +111,7 @@ <h2>Selection list</h2>
                         (change)="changeEventCount = changeEventCount + 1">
       <h3 mat-subheader>Groceries</h3>
 
-      <mat-list-option value="bananas">Bananas</mat-list-option>
+      <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
       <mat-list-option selected value="oranges">Oranges</mat-list-option>
       <mat-list-option value="apples">Apples</mat-list-option>
       <mat-list-option value="strawberries">Strawberries</mat-list-option>
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 5629bab50e5a..c709ace1a8f5 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -92,14 +92,35 @@ $mat-list-item-inset-divider-offset: 72px;
 
   .mat-list-text {
     @include mat-line-wrapper-base();
-    padding: 0 $mat-list-side-padding;
 
-    // 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;
+    // By default, there will be no padding for the list item text because the padding is already
+    // set on the `mat-list-item-content` element. Later, if the list-item detects that there are
+    // secondary items (avatar, checkbox), a padding on the proper side will be added.
+    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:not(:nth-child(2)) {
+    padding-right: 0;
+    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:not(:nth-child(2)) {
+    padding-left: 0;
+    padding-right: $mat-list-side-padding;
+
+    [dir='rtl'] & {
+      padding-right: 0;
+      padding-left: $mat-list-side-padding;
     }
   }