fix(material/list): not working correctly when list item is used as a button

Based on our selector for `mat-list-item`, we allow it to be a `button`, however we don't do the necessary resets for it to be usable.

Author: crisbeto

src/material/list/list.scss

@@ -36,43 +36,14 @@ $item-inset-divider-offset: 72px;
 // based on whether the list is in dense mode.
 @mixin item-base($base-height, $height-with-avatar, $two-line-height,
   $three-line-height, $multi-line-padding, $icon-size, $avatar-size) {
-
-  // Prevents the wrapper `mat-list-item-content` from collapsing due to it
-  // being `inline` by default.
-  display: block;
   height: $base-height;
-  -webkit-tap-highlight-color: transparent;
-
-  // Override the user agent styling if the list item is a button.
-  width: 100%;
-  padding: 0;
 
   .mat-list-item-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
     padding: 0 $side-padding;
-    position: relative;
-    height: inherit;
   }
 
   .mat-list-item-content-reverse {
-    display: flex;
-    align-items: center;
     padding: 0 $side-padding;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-  }
-
-  .mat-list-item-ripple {
-    display: block;
-    @include layout-common.fill;
-
-    // Disable pointer events for the ripple container because the container will overlay the
-    // user content and we don't want to disable mouse events on the user content.
-    // Pointer events can be safely disabled because the ripple trigger element is the host element.
-    pointer-events: none;
   }
 
   &.mat-list-item-with-avatar {
@@ -83,7 +54,6 @@ $item-inset-divider-offset: 72px;
     height: $two-line-height;
   }
 
-
   &.mat-3-line {
     height: $three-line-height;
   }
@@ -108,6 +78,23 @@ $item-inset-divider-offset: 72px;
     padding: 0;
   }
 
+  .mat-divider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+
+    [dir='rtl'] & {
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    &.mat-divider-inset {
+      position: absolute; // necessary to override card styles
+    }
+  }
+
   &.mat-list-item-with-avatar,
   &.mat-list-option {
     .mat-list-item-content .mat-list-text {
@@ -171,23 +158,6 @@ $item-inset-divider-offset: 72px;
               $side-padding);
     }
   }
-
-  .mat-divider {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-
-    [dir='rtl'] & {
-      margin-left: auto;
-      margin-right: 0;
-    }
-
-    &.mat-divider-inset {
-      position: absolute; // necessary to override card styles
-    }
-  }
 }
 
 .mat-subheader {
@@ -235,6 +205,45 @@ $item-inset-divider-offset: 72px;
   }
 }
 
+.mat-list-item,
+.mat-list-option {
+  // Prevents the wrapper `mat-list-item-content` from collapsing due to it
+  // being `inline` by default.
+  display: block;
+  -webkit-tap-highlight-color: transparent;
+
+  // Button resets.
+  border: none;
+  background: none;
+  padding: 0;
+  width: 100%;
+}
+
+.mat-list-item-ripple {
+  display: block;
+  @include layout-common.fill;
+
+  // Disable pointer events for the ripple container because the container will overlay the
+  // user content and we don't want to disable mouse events on the user content.
+  // Pointer events can be safely disabled because the ripple trigger element is the host element.
+  pointer-events: none;
+}
+
+.mat-list-item-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  height: inherit;
+}
+
+.mat-list-item-content-reverse {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: space-around;
+}
 
 .mat-list-base[dense] {
   padding-top: $dense-top-padding;