perf(material/button): Use child rather than descendant selectors.

Author: kseamon

src/material/button/_button-base.scss

@@ -10,9 +10,9 @@
   -webkit-tap-highlight-color: transparent;
 
   // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple,
-  .mat-mdc-button-persistent-ripple,
-  .mat-mdc-button-persistent-ripple::before {
+  > .mat-mdc-button-ripple,
+  > .mat-mdc-button-persistent-ripple,
+  > .mat-mdc-button-persistent-ripple::before {
     @include layout-common.fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
@@ -29,61 +29,61 @@
 
   // This style used to be applied by the MatRipple
   // directive, which is no longer attached to this element.
-  .mat-mdc-button-ripple {
+  > .mat-mdc-button-ripple {
     overflow: hidden;
   }
 
   // We use ::before so that we can reuse some of MDC's theming.
-  .mat-mdc-button-persistent-ripple::before {
+  > .mat-mdc-button-persistent-ripple::before {
     content: '';
     opacity: 0;
   }
 
   // The content should appear over the state and ripple layers, otherwise they may adversely affect
   // the accessibility of the text content.
-  .mdc-button__label,
-  .mat-icon {
+  > .mdc-button__label,
+  > .mat-icon {
     z-index: 1;
     position: relative;
   }
 
   // The focus indicator should match the bounds of the entire button.
-  .mat-focus-indicator {
+  > .mat-focus-indicator {
     @include layout-common.fill();
   }
 
-  &:focus .mat-focus-indicator::before {
+  &:focus > .mat-focus-indicator::before {
     content: '';
   }
 }
 
 @mixin mat-private-button-ripple($prefix, $slots) {
   @include token-utils.use-tokens($prefix, $slots) {
-    .mat-ripple-element {
+    > .mat-ripple-element {
       @include token-utils.create-token-slot(background-color, ripple-color);
     }
 
-    .mat-mdc-button-persistent-ripple::before {
+    > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(background-color, state-layer-color);
     }
 
-    &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
+    &.mat-mdc-button-disabled > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(background-color, disabled-state-layer-color);
     }
 
-    &:hover .mat-mdc-button-persistent-ripple::before {
+    &:hover > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
     }
 
     &.cdk-program-focused,
     &.cdk-keyboard-focused,
     &.mat-mdc-button-disabled-interactive:focus {
-      .mat-mdc-button-persistent-ripple::before {
+      > .mat-mdc-button-persistent-ripple::before {
         @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
       }
     }
 
-    &:active .mat-mdc-button-persistent-ripple::before {
+    &:active > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
     }
   }
@@ -116,7 +116,7 @@
 }
 
 @mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
-  .mat-mdc-button-touch-target {
+  > .mat-mdc-button-touch-target {
     position: absolute;
     top: 50%;
     height: 48px;

src/material/button/button.scss

@@ -55,7 +55,7 @@
     display: none;
   }
 
-  .mdc-button__label {
+  > .mdc-button__label {
     position: relative;
   }
 }
@@ -78,7 +78,7 @@
     @include token-utils.create-token-slot(text-transform, label-text-transform);
     @include token-utils.create-token-slot(font-weight, label-text-weight);
 
-    &, .mdc-button__ripple {
+    &, > .mdc-button__ripple {
       @include token-utils.create-token-slot(border-radius, container-shape);
     }
 
@@ -137,7 +137,7 @@
       @include token-utils.create-token-slot(background-color, container-color);
     }
 
-    &, .mdc-button__ripple {
+    &, > .mdc-button__ripple {
       @include token-utils.create-token-slot(border-radius, container-shape);
     }
 
@@ -190,7 +190,7 @@
       @include token-utils.create-token-slot(background-color, container-color);
     }
 
-    &, .mdc-button__ripple {
+    &, > .mdc-button__ripple {
       @include token-utils.create-token-slot(border-radius, container-shape);
     }
 
@@ -302,8 +302,8 @@
 // In order to work around this issue by *not* hiding overflow, we adjust the child elements
 // to fully cover the actual button element. This means that the border-radius would be correct
 // then. See: https://github.com/angular/components/issues/13738
-.mat-mdc-outlined-button .mat-mdc-button-ripple,
-.mat-mdc-outlined-button .mdc-button__ripple {
+.mat-mdc-outlined-button > .mat-mdc-button-ripple,
+.mat-mdc-outlined-button > .mdc-button__ripple {
   $offset: -1px;
   top: $offset;
   left: $offset;
@@ -315,15 +315,15 @@
 // the focus indicator is sufficiently contrastive and renders appropriately.
 .mat-mdc-unelevated-button,
 .mat-mdc-raised-button {
-  .mat-focus-indicator::before {
+  > .mat-focus-indicator::before {
     $default-border-width: focus-indicators-private.$default-border-width;
     $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
     $offset: calc(#{$border-width} + 2px);
     margin: calc(#{$offset} * -1);
   }
 }
 
-.mat-mdc-outlined-button .mat-focus-indicator::before {
+.mat-mdc-outlined-button > .mat-focus-indicator::before {
   $default-border-width: focus-indicators-private.$default-border-width;
   $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
   $offset: calc(#{$border-width} + 3px);

src/material/button/fab.scss

@@ -75,13 +75,13 @@
   // However, Angular Material expects a `mat-icon` instead. The following
   // mixin will style the icons appropriately.
   // stylelint-disable-next-line selector-class-pattern
-  .mat-icon, .material-icons {
+  > .mat-icon, > .material-icons {
     transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
     fill: currentColor;
     will-change: transform;
   }
 
-  .mat-focus-indicator::before {
+  > .mat-focus-indicator::before {
     $default-border-width: focus-indicators-private.$default-border-width;
     $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
     $offset: calc(#{$border-width} + 2px);
@@ -209,7 +209,7 @@
 
   // All FABs are square except the extended ones so we
   // need to set the touch target back to full-width.
-  .mat-mdc-button-touch-target {
+  > .mat-mdc-button-touch-target {
     width: 100%;
   }
 }

src/material/button/icon-button.scss

@@ -72,7 +72,7 @@
     }
   }
 
-  .mat-mdc-button-persistent-ripple {
+  > .mat-mdc-button-persistent-ripple {
     border-radius: 50%;
   }