refactor(material/list): fix action list CSS styles conflict with MDC-based list

The Angular Material action list has been styled using an element selector,
instead of using the corresponding CSS class. This meant that the MDC-based
list seemed to have a working action list, but in reality it was just working due
to the leaked styles from the non-MDC list.

This fixes the selector in the Angular Material list, and adds the necessary styles
for the action list to the MDC list styles.

Author: devversion

src/material-experimental/mdc-list/list.scss

@@ -42,6 +42,28 @@
   }
 }
 
+// Remove the browser button appearance for action list button items. These
+// buttons should appear as if they were standard Material Design list items.
+.mat-mdc-action-list button.mdc-list-item {
+  background: none;
+  color: inherit;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  -webkit-tap-highlight-color: transparent;
+  // Set the text alignment to "start" as buttons align their content
+  // centered by default. List content is aligned on the start.
+  text-align: left;
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
 // MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
 // items. Therefore, we need to add our own styles.
 .mat-mdc-list-avatar {

src/material/list/list.scss

@@ -269,7 +269,7 @@ $mat-list-item-inset-divider-offset: 72px;
   }
 }
 
-mat-action-list {
+.mat-action-list {
   // Remove the native button look and make it look like a list item
   button {
     background: none;
@@ -278,6 +278,8 @@ mat-action-list {
     font: inherit;
     outline: inherit;
     -webkit-tap-highlight-color: transparent;
+    // Set the text alignment to "start" as buttons align their content
+    // centered by default. List content is aligned on the start.
     text-align: left;
 
     [dir='rtl'] & {