From 1e8af78d0f0d6cf303cdd1b0eb11ddab324bf292 Mon Sep 17 00:00:00 2001
From: Adam Plumer <caerus.karu@gmail.com>
Date: Fri, 5 Jan 2018 00:49:03 -0500
Subject: [PATCH] fix(divider): add inset styles for icons and lists in cards

* Add mixin to dynamically apply inset divider offset based on
  the precursor in the list item
* Add inset divider example using icons as precursor
---
 src/demo-app/list/list-demo.html |  5 +++--
 src/lib/divider/BUILD.bazel      |  7 +++++++
 src/lib/divider/divider.scss     | 13 +++++++++++++
 src/lib/list/BUILD.bazel         |  2 +-
 src/lib/list/list.scss           | 27 ++++++++++++++++-----------
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index a26806aa53b2..c3e46272849d 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -31,7 +31,7 @@ <h4 mat-line>{{message.from}}</h4>
           <span>{{message.subject}} -- </span>
           <span class="demo-secondary-text">{{message.message}}</span>
         </p>
-        <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+        <mat-divider inset *ngIf="!last"></mat-divider>
       </mat-list-item>
       <mat-divider></mat-divider>
       <mat-list-item *ngFor="let message of messages">
@@ -87,10 +87,11 @@ <h2>Nav lists</h2>
       </mat-list-item>
     </mat-nav-list>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
+      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
         <mat-icon mat-list-icon>folder</mat-icon>
         <span mat-line>{{ link.name }}</span>
         <span mat-line class="demo-secondary-text"> Description </span>
+        <mat-divider inset *ngIf="!last"></mat-divider>
       </a>
     </mat-nav-list>
     <mat-nav-list dense>
diff --git a/src/lib/divider/BUILD.bazel b/src/lib/divider/BUILD.bazel
index 3cc8e5f7e901..19b106a011d3 100644
--- a/src/lib/divider/BUILD.bazel
+++ b/src/lib/divider/BUILD.bazel
@@ -16,6 +16,13 @@ ng_module(
 )
 
 
+sass_library(
+  name = "divider_scss_lib",
+  srcs = ["divider.scss"],
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
+
 sass_binary(
   name = "divider_scss",
   src = "divider.scss",
diff --git a/src/lib/divider/divider.scss b/src/lib/divider/divider.scss
index da8e5c620b87..e7445cfb39ac 100644
--- a/src/lib/divider/divider.scss
+++ b/src/lib/divider/divider.scss
@@ -1,6 +1,19 @@
 $mat-divider-width: 1px;
 $mat-divider-inset-margin: 80px;
 
+// This mixin provides the correct offset for an inset divider based on the
+// size of the parent class (e.g. avatar vs icon)
+@mixin mat-inset-divider-offset($offset, $padding) {
+  $mat-inset-divider-offset: #{(2 * $padding) + $offset};
+  margin-left: $mat-inset-divider-offset;
+  width: calc(100% - #{$mat-inset-divider-offset});
+
+  [dir='rtl'] & {
+    margin-left: auto;
+    margin-right: $mat-inset-divider-offset;
+  }
+}
+
 .mat-divider {
   display: block;
   margin: 0;
diff --git a/src/lib/list/BUILD.bazel b/src/lib/list/BUILD.bazel
index 7f289c229224..2fa7394d8cf1 100644
--- a/src/lib/list/BUILD.bazel
+++ b/src/lib/list/BUILD.bazel
@@ -23,7 +23,7 @@ ng_module(
 sass_binary(
   name = "list_scss",
   src = "list.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
+  deps = ["//src/lib/core:core_scss_lib", "//src/lib/divider:divider_scss_lib"],
 )
 
 # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 6c8583e9d534..52f6b8b1b5a8 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -1,9 +1,11 @@
 @import '../core/style/variables';
 @import '../core/style/list-common';
 @import '../core/style/layout-common';
+@import '../divider/divider';
 
 
 $mat-list-side-padding: 16px;
+$mat-list-icon-padding: 4px;
 $mat-list-avatar-size: 40px;
 
 // Normal list variables
@@ -131,6 +133,10 @@ $mat-list-item-inset-divider-offset: 72px;
     width: $mat-list-avatar-size;
     height: $mat-list-avatar-size;
     border-radius: 50%;
+
+    ~ .mat-divider-inset {
+      @include mat-inset-divider-offset($mat-list-avatar-size, $mat-list-side-padding);
+    }
   }
 
   .mat-list-icon {
@@ -140,7 +146,12 @@ $mat-list-item-inset-divider-offset: 72px;
     font-size: $icon-size;
     box-sizing: content-box;
     border-radius: 50%;
-    padding: 4px;
+    padding: $mat-list-icon-padding;
+
+    ~ .mat-divider-inset {
+      @include mat-inset-divider-offset($icon-size + (2 * $mat-list-icon-padding),
+              $mat-list-side-padding);
+    }
   }
 
   .mat-divider {
@@ -148,21 +159,15 @@ $mat-list-item-inset-divider-offset: 72px;
     bottom: 0;
     left: 0;
     width: 100%;
+    margin: 0;
 
     [dir='rtl'] & {
-      left: auto;
-      right: 0;
+      margin-left: auto;
+      margin-right: 0;
     }
 
     &.mat-divider-inset {
-      left: $mat-list-item-inset-divider-offset;
-      width: calc(100% - #{$mat-list-item-inset-divider-offset});
-      margin: 0;
-
-      [dir='rtl'] & {
-        left: auto;
-        right: $mat-list-item-inset-divider-offset;
-      }
+      position: absolute; // necessary to override card styles
     }
   }
 }