fix(divider): add inset styles for icons and lists in cards (#9242)

* Add mixin to dynamically apply inset divider offset based on
  the precursor in the list item
* Add inset divider example using icons as precursor

Author: CaerusKaru

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>

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",

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;

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.

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
@@ -129,6 +131,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 {
@@ -138,29 +144,28 @@ $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 {
     position: absolute;
     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
     }
   }
 }