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

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/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) {
+  $mat-list-item-inset-divider-offset: #{(2 * $mat-list-side-padding) + $offset};
+  margin-left: $mat-list-item-inset-divider-offset;
+  width: calc(100% - #{$mat-list-item-inset-divider-offset});
+
+  [dir='rtl'] & {
+    margin-left: auto;
+    margin-right: $mat-list-item-inset-divider-offset;
+  }
+}
+
 .mat-divider {
   display: block;
   margin: 0;

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
@@ -27,8 +29,6 @@ $mat-dense-three-line-height: 76px;
 $mat-dense-multi-line-padding: 16px;
 $mat-dense-list-icon-size: 20px;
 
-$mat-list-item-inset-divider-offset: 72px;
-
 // This mixin provides all list-item styles, changing font size and height
 // based on whether the list is in dense mode.
 @mixin mat-list-item-base($base-height, $avatar-height, $two-line-height,
@@ -108,6 +108,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-icon {
@@ -116,29 +120,23 @@ $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-divider {
-    position: absolute;
+    position: absolute !important; // this is done to override card inset styles
     bottom: 0;
     left: 0;
     width: 100%;
+    margin: 0;
 
     [dir='rtl'] & {
-      left: auto;
-      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;
-      }
+      margin-left: auto;
+      margin-right: 0;
     }
   }
 }