From d1ee78d8e3591e58835b8164840708aceb66a8a1 Mon Sep 17 00:00:00 2001 From: Karl Seamon Date: Thu, 23 Jan 2025 15:47:53 -0500 Subject: [PATCH] perf(material/button): Use child rather than descendant selectors. --- src/material/button/_button-base.scss | 32 +++++++++++++-------------- src/material/button/button.scss | 16 +++++++------- src/material/button/fab.scss | 6 ++--- src/material/button/icon-button.scss | 2 +- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index bafc6ee62811..9d3df0953721 100644 --- a/src/material/button/_button-base.scss +++ b/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; diff --git a/src/material/button/button.scss b/src/material/button/button.scss index a44a6f6a684c..e0a64b8bf3b1 100644 --- a/src/material/button/button.scss +++ b/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,7 +315,7 @@ // 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); @@ -323,7 +323,7 @@ } } -.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); diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 44efdd4e5c9a..2982ba5daba1 100644 --- a/src/material/button/fab.scss +++ b/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%; } } diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index 03f56e21520e..2c991200705d 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -72,7 +72,7 @@ } } - .mat-mdc-button-persistent-ripple { + > .mat-mdc-button-persistent-ripple { border-radius: 50%; }