diff --git a/src/cdk/a11y/_index.scss b/src/cdk/a11y/_index.scss
index 292804e3ec49..b1259c85fd0a 100644
--- a/src/cdk/a11y/_index.scss
+++ b/src/cdk/a11y/_index.scss
@@ -26,7 +26,7 @@
/// Emits the mixin's content nested under `$selector-context` if `$selector-context`
/// is non-empty.
/// @param selector-context The selector under which to nest the mixin's content.
-@mixin _cdk-optionally-nest-content($selector-context) {
+@mixin _optionally-nest-content($selector-context) {
@if ($selector-context == '') {
@content;
}
@@ -68,7 +68,7 @@
// Note that if this selector is updated, the same change has to be made inside
// `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
.cdk-high-contrast-#{$target} {
- @include _cdk-optionally-nest-content($selector-context) {
+ @include _optionally-nest-content($selector-context) {
@content;
}
}
@@ -76,7 +76,7 @@
@if ($encapsulation != 'off') {
.cdk-high-contrast-#{$target} :host {
- @include _cdk-optionally-nest-content($selector-context) {
+ @include _optionally-nest-content($selector-context) {
@content;
}
}
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.scss b/src/cdk/scrolling/virtual-scroll-viewport.scss
index 06c662a9e62d..c24aa19ed3ef 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.scss
+++ b/src/cdk/scrolling/virtual-scroll-viewport.scss
@@ -2,7 +2,7 @@
// their container element (e.g. `
`, `
`, etc.) needs to be placed in the viewport as
// well. We reset some properties here to prevent these container elements from introducing
// additional space that would throw off the scrolling calculations.
-@mixin _cdk-virtual-scroll-clear-container-space($direction) {
+@mixin _clear-container-space($direction) {
$start: if($direction == horizontal, 'left', 'top');
$end: if($direction == horizontal, 'right', 'bottom');
@@ -57,12 +57,12 @@ cdk-virtual-scroll-viewport {
.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
min-height: 100%;
- @include _cdk-virtual-scroll-clear-container-space(horizontal);
+ @include _clear-container-space(horizontal);
}
.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
min-width: 100%;
- @include _cdk-virtual-scroll-clear-container-space(vertical);
+ @include _clear-container-space(vertical);
}
// Spacer element that whose width or height will be adjusted to match the size of the entire data
diff --git a/src/cdk/text-field/_index.scss b/src/cdk/text-field/_index.scss
index f3f78bb423af..35a59d4de359 100644
--- a/src/cdk/text-field/_index.scss
+++ b/src/cdk/text-field/_index.scss
@@ -10,7 +10,7 @@
// removed when measuring is complete. We use `!important` rules here to make sure user-specified
// rules do not interfere with the measurement.
textarea.cdk-textarea-autosize-measuring {
- @include _cdk-textarea-autosize-measuring-base;
+ @include _autosize-measuring-base;
height: auto !important;
overflow: hidden !important;
}
@@ -22,7 +22,7 @@
// browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
// Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
textarea.cdk-textarea-autosize-measuring-firefox {
- @include _cdk-textarea-autosize-measuring-base;
+ @include _autosize-measuring-base;
height: 0 !important;
}
}
@@ -47,7 +47,7 @@
}
}
-@mixin _cdk-textarea-autosize-measuring-base {
+@mixin _autosize-measuring-base {
// Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
// measurement. We just have to account for it later and subtract it off the final result.
padding: 2px 0 !important;
@@ -79,8 +79,7 @@ $autofill-color-frame-count: 0;
cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
}
- $autofill-color-frame-count:
- $autofill-color-frame-count + 1 !global;
+ $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;
}
// @deprecated Use `autosize` and `autofill` instead.
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
index 8f6b39db77b5..5e2d5898840c 100644
--- a/src/material-experimental/mdc-button/_button-theme.scss
+++ b/src/material-experimental/mdc-button/_button-theme.scss
@@ -19,7 +19,7 @@ $mat-button-state-target: '.mdc-button__ripple';
$mat-fab-state-target: '.mdc-fab__ripple';
// Applies the disabled theme color to the text color.
-@mixin _mat-button-disabled-color() {
+@mixin _disabled-color() {
@include mdc-theme.prop(color,
mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
}
@@ -30,7 +30,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
// previously set theme color, so it must be ordered after the theme styles.
// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
// manually styling disabled buttons with a [disabled] selector.
-@mixin _mat-button-apply-disabled-style() {
+@mixin _apply-disabled-style() {
&[disabled][disabled] {
@content;
}
@@ -39,7 +39,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
// The MDC button's ripple ink color is based on the theme color, not on the foreground base
// which is what the ripple mixin uses. This creates a new theme that sets the color to the
// foreground base to appropriately color the ink.
-@mixin _mat-button-ripple-ink-color($mdcColor) {
+@mixin _ripple-color($mdcColor) {
@include ripple-theme.theme((
foreground: (
base: mdc-theme-color.prop-value($mdcColor)
@@ -51,7 +51,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
// mixin `mdc-button--filled`.
// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
// or otherwise have a mixin we can call to apply this style for both button and anchors.
-@mixin _mat-button-disabled-background() {
+@mixin _disabled-background() {
@include mdc-theme.prop(background-color,
rgba(mdc-theme-color.prop-value(on-surface), 0.12));
}
@@ -78,7 +78,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(primary,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(primary);
+ @include _ripple-color(primary);
}
&.mat-accent {
@@ -86,7 +86,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(secondary,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(secondary);
+ @include _ripple-color(secondary);
}
&.mat-warn {
@@ -94,7 +94,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(error,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(error);
+ @include _ripple-color(error);
}
}
@@ -117,7 +117,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(on-primary,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(on-primary);
+ @include _ripple-color(on-primary);
}
&.mat-accent {
@@ -128,7 +128,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(on-secondary,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(on-secondary);
+ @include _ripple-color(on-secondary);
}
&.mat-warn {
@@ -138,11 +138,11 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-ripple-theme.states-base-color(on-error,
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
- @include _mat-button-ripple-ink-color(on-error);
+ @include _ripple-color(on-error);
}
- @include _mat-button-apply-disabled-style() {
- @include _mat-button-disabled-background();
+ @include _apply-disabled-style() {
+ @include _disabled-background();
}
}
@@ -167,21 +167,21 @@ $mat-fab-state-target: '.mdc-fab__ripple';
$query: mdc-helpers.$mat-theme-styles-query);
}
- @include _mat-button-apply-disabled-style() {
+ @include _apply-disabled-style() {
@include mdc-theme.prop(border-color,
mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
}
}
.mat-mdc-raised-button {
- @include _mat-button-apply-disabled-style() {
+ @include _apply-disabled-style() {
@include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
}
}
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
- @include _mat-button-apply-disabled-style() {
- @include _mat-button-disabled-color();
+ @include _apply-disabled-style() {
+ @include _disabled-color();
}
}
@@ -249,7 +249,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-fab-theme.container-color(primary,
$query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-theme.ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(on-primary);
+ @include _ripple-color(on-primary);
}
&.mat-accent {
@@ -259,7 +259,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
@include mdc-fab-theme.container-color(secondary,
$query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-theme.ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(on-secondary);
+ @include _ripple-color(on-secondary);
}
&.mat-warn {
@@ -268,12 +268,12 @@ $mat-fab-state-target: '.mdc-fab__ripple';
$ripple-target: $mat-fab-state-target);
@include mdc-fab-theme.container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(on-error);
+ @include _ripple-color(on-error);
}
- @include _mat-button-apply-disabled-style() {
- @include _mat-button-disabled-color();
- @include _mat-button-disabled-background();
+ @include _apply-disabled-style() {
+ @include _disabled-color();
+ @include _disabled-background();
@include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
}
}
@@ -324,7 +324,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
@include mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(primary);
+ @include _ripple-color(primary);
}
&.mat-accent {
@@ -332,7 +332,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
@include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(secondary);
+ @include _ripple-color(secondary);
}
&.mat-warn {
@@ -340,11 +340,11 @@ $mat-fab-state-target: '.mdc-fab__ripple';
$query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
@include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
- @include _mat-button-ripple-ink-color(error);
+ @include _ripple-color(error);
}
- @include _mat-button-apply-disabled-style() {
- @include _mat-button-disabled-color();
+ @include _apply-disabled-style() {
+ @include _disabled-color();
}
}
diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss
index dfda4fc65de2..fa9b3c312d61 100644
--- a/src/material-experimental/mdc-form-field/_form-field-density.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-density.scss
@@ -7,7 +7,7 @@
// Mixin that sets the vertical spacing for the infix container of filled form fields.
// We need to apply spacing to the infix container because we removed the input padding
// provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
+@mixin _infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
padding-top: map.get($with-label-padding, top);
padding-bottom: map.get($with-label-padding, bottom);
@@ -23,7 +23,7 @@
// Mixin that sets the vertical spacing for the infix container of outlined form fields.
// We need to apply spacing to the infix container because we removed the input padding
// provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {
+@mixin _infix-vertical-spacing-outlined($padding) {
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
padding-top: map.get($padding, top);
padding-bottom: map.get($padding, bottom);
@@ -98,13 +98,13 @@
// aligned as if there is no label. This is done similarly in MDC and is specified in the
// Material Design specification. Outline form fields position the control as if there is no
// label. This is because the label overflows the form-field and doesn't need space at the top.
- @include _mat-mdc-form-field-infix-vertical-spacing-outlined($no-label-padding);
+ @include _infix-vertical-spacing-outlined($no-label-padding);
// MDC hides labels for filled form fields when the form field height decreases. We match
// this behavior in our custom density styles.
@if $hide-filled-floating-label {
// Update the spacing for filled form fields to account for the hidden floating label.
- @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+ @include _infix-vertical-spacing-filled(
$no-label-padding, $no-label-padding);
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
display: none;
@@ -114,7 +114,7 @@
// By default, filled form fields align their controls differently based on whether there
// is a label or not. MDC does this too, but we cannot rely on their styles as we support
// arbitrary form field controls and MDC only applies their spacing to the `` elements.
- @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+ @include _infix-vertical-spacing-filled(
$with-label-padding, $no-label-padding);
}
}
diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss
index 670ce9407286..c4efa35e83e3 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -16,9 +16,9 @@
// Mixin that overwrites the default MDC text-field color styles to be based on
// the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _mat-mdc-text-field-color-styles($palette-name,
+@mixin _color-styles($palette-name,
$query: mdc-helpers.$mat-theme-styles-query) {
- $_mdc-text-field-focused-label-color: mdc-textfield.$focused-label-color;
+ $orig-focused-label-color: mdc-textfield.$focused-label-color;
mdc-textfield.$focused-label-color: rgba(mdc-theme-color.prop-value($palette-name), 0.87);
@include mdc-textfield.caret-color($palette-name, $query);
@@ -36,7 +36,7 @@
@include mdc-textfield.focused-outline-color($palette-name, $query);
}
- mdc-textfield.$focused-label-color: $_mdc-text-field-focused-label-color;
+ mdc-textfield.$focused-label-color: $orig-focused-label-color;
}
@mixin color($config-or-theme) {
@@ -52,11 +52,11 @@
@include form-field-native-select.private-form-field-native-select-color($config);
.mat-mdc-form-field.mat-accent {
- @include _mat-mdc-text-field-color-styles(secondary);
+ @include _color-styles(secondary);
}
.mat-mdc-form-field.mat-warn {
- @include _mat-mdc-text-field-color-styles(error);
+ @include _color-styles(error);
}
}
}
diff --git a/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss b/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss
index 682565a87abf..814b7314338c 100644
--- a/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss
+++ b/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss
@@ -3,7 +3,7 @@
@use '../../material/core/theming/theming';
// Mixin that applies the border color for the focus indicators.
-@mixin _mat-mdc-strong-focus-indicators-border-color($color) {
+@mixin _border-color($color) {
.mat-mdc-focus-indicator::before {
border-color: $color;
}
@@ -12,7 +12,7 @@
@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$border-color: theming.get-color-from-palette(map.get($config, primary));
- @include _mat-mdc-strong-focus-indicators-border-color($border-color);
+ @include _border-color($border-color);
}
/// Mixin that sets the color of the focus indicators.
@@ -33,7 +33,7 @@
// stylelint-disable-next-line material/theme-mixin-api
@mixin theme($theme-or-color) {
@if meta.type-of($theme-or-color) != 'map' {
- @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
+ @include _border-color($theme-or-color);
}
@else {
$theme: theming.private-legacy-get-theme($theme-or-color);
diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
index 948f90bd53c4..68a12ad20d34 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -4,7 +4,7 @@
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/theming/theming';
-@mixin _mat-mdc-progress-bar-color($color) {
+@mixin _palette-styles($color) {
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
// and doesn't match the Material design spec. For now we approximate the buffer background by
@@ -19,14 +19,14 @@
$config: theming.get-color-config($config-or-theme);
@include mdc-helpers.mat-using-mdc-theme($config) {
.mat-mdc-progress-bar {
- @include _mat-mdc-progress-bar-color(primary);
+ @include _palette-styles(primary);
&.mat-accent {
- @include _mat-mdc-progress-bar-color(secondary);
+ @include _palette-styles(secondary);
}
&.mat-warn {
- @include _mat-mdc-progress-bar-color(error);
+ @include _palette-styles(error);
}
}
}
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
index 028da6bc6f94..f55d0f8a08b9 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -2,7 +2,7 @@
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/theming/theming';
-@mixin _mat-mdc-progress-spinner-color($color) {
+@mixin _palette-styles($color) {
@include mdc-circular-progress.color($color, $query: mdc-helpers.$mat-theme-styles-query);
}
@@ -10,14 +10,14 @@
$config: theming.get-color-config($config-or-theme);
@include mdc-helpers.mat-using-mdc-theme($config) {
.mat-mdc-progress-spinner {
- @include _mat-mdc-progress-spinner-color(primary);
+ @include _palette-styles(primary);
&.mat-accent {
- @include _mat-mdc-progress-spinner-color(secondary);
+ @include _palette-styles(secondary);
}
&.mat-warn {
- @include _mat-mdc-progress-spinner-color(error);
+ @include _palette-styles(error);
}
}
}
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
index a8cc1c6e2012..6a83b77cc892 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -21,33 +21,33 @@
mdc-tab.$text-label-color-default:
rgba(mdc-theme-color.prop-value(on-surface), mdc-tab.$text-label-opacity);
- @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
+ @include _palette-styles(mdc-tab.$text-label-color-active);
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
&.mat-accent {
mdc-tab.$text-label-color-active: secondary;
mdc-tab.$icon-color-active: secondary;
- @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
+ @include _palette-styles(mdc-tab.$text-label-color-active);
}
&.mat-warn {
mdc-tab.$text-label-color-active: error;
mdc-tab.$icon-color-active: error;
- @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
+ @include _palette-styles(mdc-tab.$text-label-color-active);
}
}
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
&.mat-background-primary {
- @include _mat-mdc-tabs-background(primary, on-primary);
+ @include _background(primary, on-primary);
}
&.mat-background-accent {
- @include _mat-mdc-tabs-background(secondary, on-secondary);
+ @include _background(secondary, on-secondary);
}
&.mat-background-warn {
- @include _mat-mdc-tabs-background(error, on-error);
+ @include _background(error, on-error);
}
}
@@ -62,7 +62,7 @@
mdc-tab.$text-label-color-default: $orig-text-label-color-default;
}
-@mixin _mat-mdc-tabs-background($background-color, $foreground-color) {
+@mixin _background($background-color, $foreground-color) {
// Note that these selectors target direct descendants so
// that the styles don't apply to any nested tab groups.
@@ -89,7 +89,7 @@
}
}
-@mixin _mat-mdc-tabs-palette-styles($color) {
+@mixin _palette-styles($color) {
@include mdc-tab.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
@include mdc-tab-indicator.underline-color($color, $query: mdc-helpers.$mat-theme-styles-query);
@include mdc-tab-indicator.icon-color($color, $query: mdc-helpers.$mat-theme-styles-query);
diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
index 0825e4516db5..09e4782f9880 100644
--- a/src/material/autocomplete/_autocomplete-theme.scss
+++ b/src/material/autocomplete/_autocomplete-theme.scss
@@ -29,7 +29,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-autocomplete-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -42,7 +42,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-autocomplete-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 42500482c60d..724fc8bcf58c 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -16,7 +16,7 @@ $small-size: $default-size - 6;
$large-size: $default-size + 6;
// Mixin for building offset given different sizes
-@mixin _mat-badge-size($size) {
+@mixin _badge-size($size) {
.mat-badge-content {
width: $size;
height: $size;
@@ -180,13 +180,13 @@ $large-size: $default-size + 6;
}
.mat-badge-small {
- @include _mat-badge-size($small-size);
+ @include _badge-size($small-size);
}
.mat-badge-medium {
- @include _mat-badge-size($default-size);
+ @include _badge-size($default-size);
}
.mat-badge-large {
- @include _mat-badge-size($large-size);
+ @include _badge-size($large-size);
}
}
@@ -209,7 +209,7 @@ $large-size: $default-size + 6;
}
}
-@mixin _mat-badge-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -222,7 +222,7 @@ $large-size: $default-size + 6;
@include color($color);
}
@if $density != null {
- @include _mat-badge-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
index 810dc345d622..5c2f645f7e7a 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -24,7 +24,7 @@
}
}
-@mixin _mat-bottom-sheet-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -37,7 +37,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-bottom-sheet-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss
index 7870a4a7a7bf..f397a920774f 100644
--- a/src/material/bottom-sheet/bottom-sheet-container.scss
+++ b/src/material/bottom-sheet/bottom-sheet-container.scss
@@ -3,7 +3,7 @@
// The bottom sheet minimum width on larger screen sizes is based
// on increments of the toolbar, according to the spec. See:
// https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-specs
-$_mat-bottom-sheet-width-increment: 64px;
+$_width-increment: 64px;
$container-vertical-padding: 8px !default;
$container-horizontal-padding: 16px !default;
@@ -30,18 +30,18 @@ $container-horizontal-padding: 16px !default;
.mat-bottom-sheet-container-medium {
@extend %_mat-bottom-sheet-container-border-radius;
- min-width: $_mat-bottom-sheet-width-increment * 6;
- max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 2});
+ min-width: $_width-increment * 6;
+ max-width: calc(100vw - #{$_width-increment * 2});
}
.mat-bottom-sheet-container-large {
@extend %_mat-bottom-sheet-container-border-radius;
- min-width: $_mat-bottom-sheet-width-increment * 8;
- max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 4});
+ min-width: $_width-increment * 8;
+ max-width: calc(100vw - #{$_width-increment * 4});
}
.mat-bottom-sheet-container-xlarge {
@extend %_mat-bottom-sheet-container-border-radius;
- min-width: $_mat-bottom-sheet-width-increment * 9;
- max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 6});
+ min-width: $_width-increment * 9;
+ max-width: calc(100vw - #{$_width-increment * 6});
}
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index dd3355f7cab8..f001bb9dc4c4 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -5,10 +5,10 @@
@use '../core/typography/typography';
@use '../core/typography/typography-utils';
-$_mat-button-ripple-opacity: 0.1;
+$_ripple-opacity: 0.1;
// Applies a focus style to an mat-button element for each of the supported palettes.
-@mixin _mat-button-focus-overlay-color($config-or-theme) {
+@mixin _focus-overlay-color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$primary: map.get($config, primary);
$accent: map.get($config, accent);
@@ -34,7 +34,7 @@ $_mat-button-ripple-opacity: 0.1;
// Applies the background color for a ripple. If the value provided is not a Sass color,
// we assume that we've been given a CSS variable. Since we can't perform alpha-blending
// on a CSS variable, we instead add the opacity directly to the ripple element.
-@mixin _mat-button-ripple-background($palette, $hue, $opacity) {
+@mixin _ripple-background($palette, $hue, $opacity) {
$background-color: theming.get-color-from-palette($palette, $hue, $opacity);
background-color: $background-color;
@if (meta.type-of($background-color) != color) {
@@ -42,26 +42,26 @@ $_mat-button-ripple-opacity: 0.1;
}
}
-@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
+@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {
$primary: map.get($theme, primary);
$accent: map.get($theme, accent);
$warn: map.get($theme, warn);
&.mat-primary .mat-ripple-element {
- @include _mat-button-ripple-background($primary, $hue, $opacity);
+ @include _ripple-background($primary, $hue, $opacity);
}
&.mat-accent .mat-ripple-element {
- @include _mat-button-ripple-background($accent, $hue, $opacity);
+ @include _ripple-background($accent, $hue, $opacity);
}
&.mat-warn .mat-ripple-element {
- @include _mat-button-ripple-background($warn, $hue, $opacity);
+ @include _ripple-background($warn, $hue, $opacity);
}
}
// Applies a property to an mat-button element for each of the supported palettes.
-@mixin _mat-button-theme-property($theme, $property, $hue) {
+@mixin _theme-property($theme, $property, $hue) {
$primary: map.get($theme, primary);
$accent: map.get($theme, accent);
$warn: map.get($theme, warn);
@@ -102,14 +102,14 @@ $_mat-button-ripple-opacity: 0.1;
color: inherit;
background: transparent;
- @include _mat-button-theme-property($config, 'color', text);
- @include _mat-button-focus-overlay-color($config);
+ @include _theme-property($config, 'color', text);
+ @include _focus-overlay-color($config);
// Setup the ripple color to be based on the text color. This ensures that the ripples
// are matching with the current theme palette and are in contrast to the background color
// (e.g in themed toolbars).
.mat-ripple-element {
- opacity: $_mat-button-ripple-opacity;
+ opacity: $_ripple-opacity;
background-color: currentColor;
}
}
@@ -129,9 +129,9 @@ $_mat-button-ripple-opacity: 0.1;
color: theming.get-color-from-palette($foreground, text);
background-color: theming.get-color-from-palette($background, raised-button);
- @include _mat-button-theme-property($config, 'color', default-contrast);
- @include _mat-button-theme-property($config, 'background-color', default);
- @include _mat-button-ripple-color($config, default-contrast);
+ @include _theme-property($config, 'color', default-contrast);
+ @include _theme-property($config, 'background-color', default);
+ @include _ripple-color($config, default-contrast);
}
.mat-stroked-button, .mat-flat-button {
@@ -176,7 +176,7 @@ $_mat-button-ripple-opacity: 0.1;
}
}
-@mixin _mat-button-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -189,7 +189,7 @@ $_mat-button-ripple-opacity: 0.1;
@include color($color);
}
@if $density != null {
- @include _mat-button-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index c2585619891f..3b2ccc2deab0 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -50,7 +50,7 @@
}
}
-@mixin _mat-card-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -63,7 +63,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-card-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 6272fc37c7b3..042dc14be951 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -110,7 +110,7 @@
}
}
-@mixin _mat-checkbox-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -123,7 +123,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-checkbox-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 6308feae5f67..09ad5bc9709f 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -8,17 +8,17 @@
@use '../core/style/variables';
// Manual calculation done on SVG
-$_mat-checkbox-mark-path-length: 22.910259;
-$_mat-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
+$_path-length: 22.910259;
+$_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
// The ripple size of the checkbox
-$_mat-checkbox-ripple-radius: 20px;
+$_ripple-radius: 20px;
// The amount of spacing between the checkbox and its label.
-$_mat-checkbox-item-spacing: variables.$toggle-padding;
+$_item-spacing: variables.$toggle-padding;
// The width of the line used to draw the checkmark / mixedmark.
-$_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
+$_mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
@@ -46,7 +46,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
// "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
@keyframes mat-checkbox-unchecked-checked-checkmark-path {
0%, 50% {
- stroke-dashoffset: $_mat-checkbox-mark-path-length;
+ stroke-dashoffset: $_path-length;
}
50% {
@@ -81,7 +81,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
}
to {
- stroke-dashoffset: $_mat-checkbox-mark-path-length * -1;
+ stroke-dashoffset: $_path-length * -1;
}
}
@@ -106,7 +106,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
// checkmark.
@keyframes mat-checkbox-indeterminate-checked-checkmark {
from {
- animation-timing-function: $_mat-checkbox-indeterminate-checked-easing-function;
+ animation-timing-function: $_indeterminate-checked-easing-function;
opacity: 0;
transform: rotate(45deg);
}
@@ -138,7 +138,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
// of "morphing" from mixedmark -> checkmark.
@keyframes mat-checkbox-indeterminate-checked-mixedmark {
from {
- animation-timing-function: $_mat-checkbox-indeterminate-checked-easing-function;
+ animation-timing-function: $_indeterminate-checked-easing-function;
opacity: 1;
transform: rotate(0deg);
}
@@ -196,10 +196,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
// potentially overwrite the absolute position of the container.
.mat-checkbox-ripple {
position: absolute;
- left: calc(50% - #{$_mat-checkbox-ripple-radius});
- top: calc(50% - #{$_mat-checkbox-ripple-radius});
- height: $_mat-checkbox-ripple-radius * 2;
- width: $_mat-checkbox-ripple-radius * 2;
+ left: calc(50% - #{$_ripple-radius});
+ top: calc(50% - #{$_ripple-radius});
+ height: $_ripple-radius * 2;
+ width: $_ripple-radius * 2;
z-index: 1;
pointer-events: none;
}
@@ -237,7 +237,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
height: checkbox-common.$size;
line-height: 0;
margin: auto;
- margin-right: $_mat-checkbox-item-spacing;
+ margin-right: $_item-spacing;
order: 0;
position: relative;
vertical-align: middle;
@@ -247,7 +247,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
[dir='rtl'] & {
margin: {
- left: $_mat-checkbox-item-spacing;
+ left: $_item-spacing;
right: auto;
}
}
@@ -343,9 +343,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
.mat-checkbox-checkmark-path {
stroke: {
- dashoffset: $_mat-checkbox-mark-path-length;
- dasharray: $_mat-checkbox-mark-path-length;
- width: $_mat-checkbox-mark-stroke-size;
+ dashoffset: $_path-length;
+ dasharray: $_path-length;
+ width: $_mark-stroke-size;
}
@include a11y.high-contrast(black-on-white, off) {
@@ -356,7 +356,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
}
.mat-checkbox-mixedmark {
- $height: math.floor($_mat-checkbox-mark-stroke-size);
+ $height: math.floor($_mark-stroke-size);
width: calc(100% - 6px);
height: $height;
@@ -375,14 +375,14 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
.mat-checkbox-inner-container {
order: 1;
margin: {
- left: $_mat-checkbox-item-spacing;
+ left: $_item-spacing;
right: auto;
}
[dir='rtl'] & {
margin: {
left: auto;
- right: $_mat-checkbox-item-spacing;
+ right: $_item-spacing;
}
}
}
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index a73823fb3600..8dc300fa43ee 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -7,7 +7,7 @@
$chip-remove-font-size: 18px;
-@mixin _mat-chip-element-color($foreground, $background) {
+@mixin _element-color($foreground, $background) {
background-color: $background;
color: $foreground;
@@ -23,7 +23,7 @@ $chip-remove-font-size: 18px;
// we assume that we've been given a CSS variable.
// Since we can't perform alpha-blending on a CSS variable,
// we instead add the opacity directly to the ripple element.
-@mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) {
+@mixin _ripple-background($palette, $default-contrast, $opacity) {
$background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity);
background-color: $background-color;
@if (meta.type-of($background-color) != color) {
@@ -31,12 +31,12 @@ $chip-remove-font-size: 18px;
}
}
-@mixin _mat-chip-theme-color($palette) {
- @include _mat-chip-element-color(theming.get-color-from-palette($palette, default-contrast),
+@mixin _palette-styles($palette) {
+ @include _element-color(theming.get-color-from-palette($palette, default-contrast),
theming.get-color-from-palette($palette));
.mat-ripple-element {
- @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
+ @include _ripple-background($palette, default-contrast, 0.1);
}
}
@@ -53,7 +53,7 @@ $chip-remove-font-size: 18px;
$unselected-foreground: theming.get-color-from-palette($foreground, text);
.mat-chip.mat-standard-chip {
- @include _mat-chip-element-color($unselected-foreground, $unselected-background);
+ @include _element-color($unselected-foreground, $unselected-background);
&:not(.mat-chip-disabled) {
&:active {
@@ -76,15 +76,15 @@ $chip-remove-font-size: 18px;
.mat-chip.mat-standard-chip.mat-chip-selected {
&.mat-primary {
- @include _mat-chip-theme-color($primary);
+ @include _palette-styles($primary);
}
&.mat-warn {
- @include _mat-chip-theme-color($warn);
+ @include _palette-styles($warn);
}
&.mat-accent {
- @include _mat-chip-theme-color($accent);
+ @include _palette-styles($accent);
}
}
}
@@ -103,7 +103,7 @@ $chip-remove-font-size: 18px;
}
}
-@mixin _mat-chips-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -116,7 +116,7 @@ $chip-remove-font-size: 18px;
@include color($color);
}
@if $density != null {
- @include _mat-chips-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index 3541c7d033b2..21e1fa2c0801 100644
--- a/src/material/core/_core.scss
+++ b/src/material/core/_core.scss
@@ -17,18 +17,18 @@
@include text-field.text-field-autofill();
@include focus-indicators.private-strong-focus-indicators-positioning();
- @include _mat-mdc-core();
+ @include _mdc-core();
}
// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`.
-@mixin _mat-mdc-core() {
- @include _mat-mdc-strong-focus-indicators-positioning();
+@mixin _mdc-core() {
+ @include _mdc-strong-focus-indicators-positioning();
}
// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
// pseudo element within is positioned relative to the host. Private mixin included within
// `_mat-mdc-core`.
-@mixin _mat-mdc-strong-focus-indicators-positioning() {
+@mixin _mdc-strong-focus-indicators-positioning() {
.mat-mdc-focus-indicator {
position: relative;
}
diff --git a/src/material/core/density/private/_compatibility.scss b/src/material/core/density/private/_compatibility.scss
index da2da9e34d53..ea01986af74b 100644
--- a/src/material/core/density/private/_compatibility.scss
+++ b/src/material/core/density/private/_compatibility.scss
@@ -8,11 +8,11 @@
// system, and to support arbitrary properties in a density configuration.
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-density
-$_mat-density-interval: 4px !default;
-$_mat-density-minimum-scale: minimum !default;
-$_mat-density-maximum-scale: maximum !default;
-$_mat-density-supported-scales: (default, minimum, maximum) !default;
-$_mat-density-default-scale: 0 !default;
+$_density-interval: 4px !default;
+$_minimum-scale: minimum !default;
+$_maximum-scale: maximum !default;
+$_supported-scales: (default, $_minimum-scale, $_maximum-scale) !default;
+$_default-scale: 0 !default;
// Whether density should be generated at root. This will be temporarily set to `true`
// whenever density styles for legacy themes are generated.
@@ -47,8 +47,8 @@ $private-density-generate-styles: true;
@function private-density-prop-value($density-config, $density-scale, $property-name) {
@if (meta.type-of($density-scale) == 'string' and
- list.index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
- @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, ' +
+ list.index($list: $_supported-scales, $value: $density-scale) == null) {
+ @error 'mat-density: Supported density scales #{$_supported-scales}, ' +
'but received #{$density-scale}.';
}
@@ -59,11 +59,11 @@ $private-density-generate-styles: true;
$value: map.get($property-scale-map, $density-scale);
}
@else {
- $value: map.get($property-scale-map, default) + $density-scale * $_mat-density-interval;
+ $value: map.get($property-scale-map, default) + $density-scale * $_density-interval;
}
- $min-value: map.get($property-scale-map, $_mat-density-minimum-scale);
- $max-value: map.get($property-scale-map, $_mat-density-maximum-scale);
+ $min-value: map.get($property-scale-map, $_minimum-scale);
+ $max-value: map.get($property-scale-map, $_maximum-scale);
@if ($value < $min-value or $value > $max-value) {
@error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
diff --git a/src/material/core/focus-indicators/_focus-indicators-theme.scss b/src/material/core/focus-indicators/_focus-indicators-theme.scss
index dc543a63b430..66b6493fcce1 100644
--- a/src/material/core/focus-indicators/_focus-indicators-theme.scss
+++ b/src/material/core/focus-indicators/_focus-indicators-theme.scss
@@ -5,7 +5,7 @@
@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$border-color: theming.get-color-from-palette(map.get($config, primary));
- @include _mat-strong-focus-indicators-border-color($border-color);
+ @include _border-color($border-color);
}
/// Mixin that sets the color of the focus indicators.
@@ -26,7 +26,7 @@
// stylelint-disable-next-line material/theme-mixin-api
@mixin theme($theme-or-color) {
@if meta.type-of($theme-or-color) != 'map' {
- @include _mat-strong-focus-indicators-border-color($theme-or-color);
+ @include _border-color($theme-or-color);
}
@else {
$theme: theming.private-legacy-get-theme($theme-or-color);
@@ -40,7 +40,7 @@
}
// Mixin that applies the border color for the focus indicators.
-@mixin _mat-strong-focus-indicators-border-color($color) {
+@mixin _border-color($color) {
.mat-focus-indicator::before {
border-color: $color;
}
diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
index ba85112b96b0..a07ce7609de7 100644
--- a/src/material/core/option/_optgroup-theme.scss
+++ b/src/material/core/option/_optgroup-theme.scss
@@ -24,7 +24,7 @@
}
}
-@mixin _mat-optgroup-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -37,7 +37,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-optgroup-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
index 024d36f6b678..0703575c18ac 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/core/option/_option-theme.scss
@@ -58,7 +58,7 @@
}
}
-@mixin _mat-option-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -71,7 +71,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-option-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index a166f73ea141..a83fa1410b6d 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -61,7 +61,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-pseudo-checkbox-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -74,7 +74,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-pseudo-checkbox-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index b5f903246ecc..397a64ebe596 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -3,10 +3,10 @@
@use '../../style/variables';
// Padding inside of a pseudo checkbox.
-$_mat-pseudo-checkbox-padding: checkbox-common.$border-width * 2;
+$_padding: checkbox-common.$border-width * 2;
// Size of the checkmark in a pseudo checkbox.
-$_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-padding);
+$_checkmark-size: checkbox-common.$size - (2 * $_padding);
.mat-pseudo-checkbox {
@@ -58,11 +58,11 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-
}
.mat-pseudo-checkbox-checked::after {
- top: (checkbox-common.$size / 2) - ($_mat-pseudo-checkmark-size / 4) -
+ top: (checkbox-common.$size / 2) - ($_checkmark-size / 4) -
(checkbox-common.$size / 10) - checkbox-common.$border-width;
- left: $_mat-pseudo-checkbox-padding - checkbox-common.$border-width * 1.5;
- width: $_mat-pseudo-checkmark-size;
- height: ($_mat-pseudo-checkmark-size - checkbox-common.$border-width) / 2;
+ left: $_padding - checkbox-common.$border-width * 1.5;
+ width: $_checkmark-size;
+ height: ($_checkmark-size - checkbox-common.$border-width) / 2;
border-left: checkbox-common.$border-width solid currentColor;
transform: rotate(-45deg);
opacity: 1;
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index bfe6ff18018d..cc99e203ae69 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -8,17 +8,17 @@
$theme-ignore-duplication-warnings: false !default;
// Whether density should be generated by default.
-$_mat-theme-generate-default-density: true !default;
+$_generate-default-density: true !default;
// Warning that will be printed if duplicated styles are generated by a theme.
-$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
- 'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
+$_duplicate-warning: 'Read more about how style duplication can be avoided in a dedicated ' +
+ 'guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
// These variable are not intended to be overridden externally. They use `!default` to
// avoid being reset every time this file is imported.
-$_mat-theme-emitted-color: () !default;
-$_mat-theme-emitted-typography: () !default;
-$_mat-theme-emitted-density: () !default;
+$_emitted-color: () !default;
+$_emitted-typography: () !default;
+$_emitted-density: () !default;
// For a given hue in a palette, return the contrast color from the map of contrast palettes.
// @param $palette
@@ -276,9 +276,9 @@ $_mat-theme-emitted-density: () !default;
$density-config: get-density-config($theme);
$typography-config: get-typography-config($theme);
// Lists of previous `color`, `density` and `typography` configurations.
- $previous-color: map.get($_mat-theme-emitted-color, $id) or ();
- $previous-typography: map.get($_mat-theme-emitted-typography, $id) or ();
- $previous-density: map.get($_mat-theme-emitted-density, $id) or ();
+ $previous-color: map.get($_emitted-color, $id) or ();
+ $previous-typography: map.get($_emitted-typography, $id) or ();
+ $previous-density: map.get($_emitted-density, $id) or ();
// Whether duplicate legacy density styles would be generated.
$duplicate-legacy-density: false;
@@ -286,8 +286,7 @@ $_mat-theme-emitted-density: () !default;
@if $color-config != null {
@if list.index($previous-color, $color-config) != null and
not $theme-ignore-duplication-warnings {
- @warn 'The same color styles are generated multiple times. ' +
- $_mat-theme-duplicate-warning;
+ @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
}
$previous-color: list.append($previous-color, $color-config);
}
@@ -296,8 +295,7 @@ $_mat-theme-emitted-density: () !default;
@if $typography-config != null {
@if list.index($previous-typography, $typography-config) != null and
not $theme-ignore-duplication-warnings {
- @warn 'The same typography styles are generated multiple times. ' +
- $_mat-theme-duplicate-warning;
+ @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
}
$previous-typography: list.append($previous-typography, $typography-config);
}
@@ -312,19 +310,15 @@ $_mat-theme-emitted-density: () !default;
$duplicate-legacy-density: true;
}
@else if not $theme-ignore-duplication-warnings {
- @warn 'The same density styles are generated multiple times. ' +
- $_mat-theme-duplicate-warning;
+ @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
}
}
$previous-density: list.append($previous-density, $density-config);
}
- $_mat-theme-emitted-color: map.merge(
- $_mat-theme-emitted-color, ($id: $previous-color)) !global;
- $_mat-theme-emitted-density: map.merge(
- $_mat-theme-emitted-density, ($id: $previous-density)) !global;
- $_mat-theme-emitted-typography: map.merge(
- $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;
+ $_emitted-color: map.merge($_emitted-color, ($id: $previous-color)) !global;
+ $_emitted-density: map.merge($_emitted-density, ($id: $previous-density)) !global;
+ $_emitted-typography: map.merge($_emitted-typography, ($id: $previous-typography)) !global;
// Optionally, consumers of this mixin can wrap contents inside so that nested
// duplicate style checks do not report another warning. e.g. if developers include
diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss
index 584447a9c3e5..ef4205f61839 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -15,7 +15,7 @@ $today-fade-amount: 0.2;
$calendar-body-font-size: 13px !default;
$calendar-weekday-table-font-size: 11px !default;
-@mixin _mat-datepicker-color($palette) {
+@mixin _color($palette) {
@include date-range-colors(
theming.get-color-from-palette($palette, default, $range-fade-amount));
@@ -46,7 +46,7 @@ $calendar-weekday-table-font-size: 11px !default;
.cdk-keyboard-focused .mat-calendar-body-active,
.cdk-program-focused .mat-calendar-body-active {
& > .mat-calendar-body-cell-content {
- @include _mat-datepicker-unselected-cell {
+ @include _unselected-cell {
background-color: theming.get-color-from-palette($palette, 0.3);
}
}
@@ -54,7 +54,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.
-@mixin _mat-datepicker-unselected-cell {
+@mixin _unselected-cell {
&:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
@content;
}
@@ -97,7 +97,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
.mat-calendar-body-disabled > .mat-calendar-body-cell-content {
- @include _mat-datepicker-unselected-cell {
+ @include _unselected-cell {
color: $disabled-color;
}
}
@@ -121,7 +121,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
.mat-calendar-body-today {
- @include _mat-datepicker-unselected-cell {
+ @include _unselected-cell {
// Note: though it's not text, the border is a hint about the fact that this is today's date,
// so we use the hint color.
border-color: theming.get-color-from-palette($foreground, hint-text);
@@ -129,7 +129,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
.mat-calendar-body-disabled > .mat-calendar-body-today {
- @include _mat-datepicker-unselected-cell {
+ @include _unselected-cell {
$color: theming.get-color-from-palette($foreground, hint-text);
@if (meta.type-of($color) == color) {
@@ -145,7 +145,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
}
- @include _mat-datepicker-color(map.get($config, primary));
+ @include _color(map.get($config, primary));
.mat-datepicker-content {
@include private.private-theme-elevation(4, $config);
@@ -153,11 +153,11 @@ $calendar-weekday-table-font-size: 11px !default;
color: theming.get-color-from-palette($foreground, text);
&.mat-accent {
- @include _mat-datepicker-color(map.get($config, accent));
+ @include _color(map.get($config, accent));
}
&.mat-warn {
- @include _mat-datepicker-color(map.get($config, warn));
+ @include _color(map.get($config, warn));
}
}
@@ -245,7 +245,7 @@ $calendar-weekday-table-font-size: 11px !default;
}
}
-@mixin _mat-datepicker-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -258,7 +258,7 @@ $calendar-weekday-table-font-size: 11px !default;
@include color($color);
}
@if $density != null {
- @include _mat-datepicker-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 6af6f522b3eb..a58c7b2798fc 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -84,7 +84,7 @@ $calendar-range-end-body-cell-size:
}
}
-@mixin _mat-calendar-body-range-right-radius {
+@mixin _range-right-radius {
// Since the range background isn't a perfect circle, we need to
// resize the end so that it aligns with the main circle.
width: $calendar-range-end-body-cell-size;
@@ -97,7 +97,7 @@ $calendar-range-end-body-cell-size:
.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,
.mat-calendar-body-comparison-end::after,
.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
- @include _mat-calendar-body-range-right-radius;
+ @include _range-right-radius;
[dir='rtl'] & {
left: $calendar-body-cell-content-margin;
@@ -111,7 +111,7 @@ $calendar-range-end-body-cell-size:
[dir='rtl'] {
.mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {
- @include _mat-calendar-body-range-right-radius;
+ @include _range-right-radius;
}
}
diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss
index 82b9c7211475..e5e93951d093 100644
--- a/src/material/datepicker/date-range-input.scss
+++ b/src/material/datepicker/date-range-input.scss
@@ -4,7 +4,7 @@
$date-range-input-separator-spacing: 4px;
$date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing});
-@mixin _mat-date-range-input-placeholder-transition($property) {
+@mixin _placeholder-transition($property) {
transition: #{$property} variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
variables.$swift-ease-out-timing-function;
}
@@ -23,7 +23,7 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
// Text shown between the two inputs.
.mat-date-range-input-separator {
- @include _mat-date-range-input-placeholder-transition(opacity);
+ @include _placeholder-transition(opacity);
margin: 0 $date-range-input-separator-spacing;
}
@@ -65,7 +65,7 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
}
@include vendor-prefixes.input-placeholder {
- @include _mat-date-range-input-placeholder-transition(color);
+ @include _placeholder-transition(color);
}
.mat-form-field-hide-placeholder &,
diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss
index 09e56ed2cf45..720def5357f4 100644
--- a/src/material/dialog/_dialog-theme.scss
+++ b/src/material/dialog/_dialog-theme.scss
@@ -25,7 +25,7 @@
}
}
-@mixin _mat-dialog-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -38,7 +38,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-dialog-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss
index 47a697817ced..896d9ba2d45f 100644
--- a/src/material/divider/_divider-theme.scss
+++ b/src/material/divider/_divider-theme.scss
@@ -16,7 +16,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-divider-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -29,7 +29,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-divider-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss
index 499726974bda..941bda9ba79e 100644
--- a/src/material/form-field/_form-field-fill-theme.scss
+++ b/src/material/form-field/_form-field-fill-theme.scss
@@ -51,7 +51,7 @@
$fill-dedupe: 0;
// Applies a floating label above the form field control itself.
-@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)
scale($font-scale);
width: 100% / $font-scale + $fill-dedupe;
@@ -88,7 +88,7 @@ $fill-dedupe: 0;
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
- @include _mat-form-field-fill-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
$infix-margin-top);
}
@@ -97,7 +97,7 @@ $fill-dedupe: 0;
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-fill-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
$infix-margin-top);
}
diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss
index a32ffe195969..9f3c8ad96017 100644
--- a/src/material/form-field/_form-field-legacy-theme.scss
+++ b/src/material/form-field/_form-field-legacy-theme.scss
@@ -42,7 +42,7 @@
$legacy-dedupe: 0;
// Applies a floating label above the form field control itself.
-@mixin _mat-form-field-legacy-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
// We use perspective to fix the text blurriness as described here:
// http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
// This results in a small jitter after the label floats on Firefox, which the
@@ -60,7 +60,7 @@ $legacy-dedupe: 0;
}
// Same as mixin above, but omits the translateZ for printing purposes.
-@mixin _mat-form-field-legacy-label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
// This results in a small jitter after the label floats on Firefox, which the
// translateZ fixes.
transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
@@ -108,14 +108,14 @@ $legacy-dedupe: 0;
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
- @include _mat-form-field-legacy-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
// @breaking-change 8.0.0 will rely on AutofillMonitor instead.
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-legacy-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
@@ -123,7 +123,7 @@ $legacy-dedupe: 0;
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-legacy-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
}
@@ -154,14 +154,14 @@ $legacy-dedupe: 0;
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
- @include _mat-form-field-legacy-label-floating-print(
+ @include _label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
// @breaking-change 8.0.0 will rely on AutofillMonitor instead.
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-legacy-label-floating-print(
+ @include _label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
@@ -169,7 +169,7 @@ $legacy-dedupe: 0;
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-legacy-label-floating-print(
+ @include _label-floating-print(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
}
diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss
index 67d90eaf98a3..3e9dd487f944 100644
--- a/src/material/form-field/_form-field-outline-theme.scss
+++ b/src/material/form-field/_form-field-outline-theme.scss
@@ -74,7 +74,7 @@
$outline-dedupe: 0;
// Applies a floating label above the form field control itself.
-@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)
scale($font-scale);
width: 100% / $font-scale + $outline-dedupe;
@@ -118,7 +118,7 @@ $outline-dedupe: 0;
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
- @include _mat-form-field-outline-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
@@ -127,7 +127,7 @@ $outline-dedupe: 0;
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-outline-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index ecec990ccfec..6240f652e53f 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -123,7 +123,7 @@
$dedupe: 0;
// Applies a floating label above the form field control itself.
-@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)
scale($font-scale);
width: 100% / $font-scale + $dedupe;
@@ -197,7 +197,7 @@ $dedupe: 0;
.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
- @include _mat-form-field-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
@@ -205,7 +205,7 @@ $dedupe: 0;
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
- @include _mat-form-field-label-floating(
+ @include _label-floating(
$subscript-font-scale, $infix-padding, $infix-margin-top);
}
}
diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss
index 0b38ca0c55bc..703ada471f70 100644
--- a/src/material/grid-list/_grid-list-theme.scss
+++ b/src/material/grid-list/_grid-list-theme.scss
@@ -17,7 +17,7 @@
}
}
-@mixin _mat-grid-list-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -30,7 +30,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-grid-list-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss
index b70c78374fb4..be5d5be6e4d5 100644
--- a/src/material/icon/_icon-theme.scss
+++ b/src/material/icon/_icon-theme.scss
@@ -26,7 +26,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-icon-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -39,7 +39,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-icon-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 1e90686e2fb9..9cf96d919ea3 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -77,7 +77,7 @@
}
}
-@mixin _mat-input-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -90,7 +90,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-input-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index f5072b9eeabb..6cbe89e7fe5a 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -95,7 +95,7 @@
}
}
-@mixin _mat-list-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -108,7 +108,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-list-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index d1bf93020179..fd9a9addf947 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -55,7 +55,7 @@
}
}
-@mixin _mat-menu-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -68,7 +68,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-menu-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss
index 5e2d2f49fa00..356ff8639a10 100644
--- a/src/material/progress-bar/_progress-bar-theme.scss
+++ b/src/material/progress-bar/_progress-bar-theme.scss
@@ -64,7 +64,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-progress-bar-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -77,7 +77,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-progress-bar-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss
index 748660e57217..b81da47945c9 100644
--- a/src/material/progress-spinner/_progress-spinner-theme.scss
+++ b/src/material/progress-spinner/_progress-spinner-theme.scss
@@ -24,7 +24,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-progress-spinner-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -37,7 +37,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-progress-spinner-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index a84c40fcdcf0..e4b35deb3807 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -7,9 +7,8 @@
$stroke-rotate-fallback-duration: 10 * 1000ms !default;
$stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default;
-$_mat-progress-spinner-default-radius: 45px;
-$_mat-progress-spinner-default-circumference:
- variables.$pi * $_mat-progress-spinner-default-radius * 2;
+$_default-radius: 45px;
+$_default-circumference: variables.$pi * $_default-radius * 2;
.mat-progress-spinner {
display: block;
@@ -85,8 +84,8 @@ $_mat-progress-spinner-default-circumference:
}
@at-root {
- $start: (1 - 0.05) * $_mat-progress-spinner-default-circumference; // start the animation at 5%
- $end: (1 - 0.8) * $_mat-progress-spinner-default-circumference; // end the animation at 80%
+ $start: (1 - 0.05) * $_default-circumference; // start the animation at 5%
+ $end: (1 - 0.8) * $_default-circumference; // end the animation at 80%
$fallback-iterations: 4;
@keyframes mat-progress-spinner-stroke-rotate-100 {
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index 88c15ed2b5b8..668ca1d2ed5f 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -3,7 +3,7 @@
@use '../core/typography/typography';
@use '../core/typography/typography-utils';
-@mixin _mat-radio-color($palette) {
+@mixin _color($palette) {
&.mat-radio-checked .mat-radio-outer-circle {
border-color: theming.get-color-from-palette($palette);
}
@@ -30,15 +30,15 @@
.mat-radio-button {
&.mat-primary {
- @include _mat-radio-color($primary);
+ @include _color($primary);
}
&.mat-accent {
- @include _mat-radio-color($accent);
+ @include _color($accent);
}
&.mat-warn {
- @include _mat-radio-color($warn);
+ @include _color($warn);
}
// This needs extra specificity, because the classes above are combined
@@ -76,7 +76,7 @@
}
}
-@mixin _mat-radio-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -89,7 +89,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-radio-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss
index 35581dff2018..09c69578f7e1 100644
--- a/src/material/select/_select-theme.scss
+++ b/src/material/select/_select-theme.scss
@@ -79,7 +79,7 @@
}
}
-@mixin _mat-select-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -92,7 +92,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-select-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss
index 4267e73947a1..a0b2726c6e9b 100644
--- a/src/material/sidenav/_sidenav-theme.scss
+++ b/src/material/sidenav/_sidenav-theme.scss
@@ -77,7 +77,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-sidenav-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -90,7 +90,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-sidenav-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index e37a81ef93e8..e8ade454af1b 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -5,7 +5,7 @@
@use '../core/typography/typography';
@use '../core/typography/typography-utils';
-@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
+@mixin _checked-color($palette, $thumb-checked-hue) {
&.mat-checked {
.mat-slide-toggle-thumb {
background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);
@@ -47,14 +47,14 @@
$ripple-unchecked-color: theming.get-color-from-palette($foreground, base);
.mat-slide-toggle {
- @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
+ @include _checked-color($accent, $thumb-checked-hue);
&.mat-primary {
- @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
+ @include _checked-color($primary, $thumb-checked-hue);
}
&.mat-warn {
- @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
+ @include _checked-color($warn, $thumb-checked-hue);
}
&:not(.mat-checked) .mat-ripple-element {
@@ -82,7 +82,7 @@
}
}
-@mixin _mat-slide-toggle-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -95,7 +95,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-slide-toggle-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 2c9e93825dd6..1fb9df17f543 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -4,7 +4,7 @@
@use '../core/typography/typography';
@use '../core/typography/typography-utils';
-@mixin _mat-slider-inner-content-theme($palette) {
+@mixin _inner-content-theme($palette) {
.mat-slider-track-fill,
.mat-slider-thumb,
.mat-slider-thumb-label {
@@ -53,15 +53,15 @@
}
.mat-primary {
- @include _mat-slider-inner-content-theme($primary);
+ @include _inner-content-theme($primary);
}
.mat-accent {
- @include _mat-slider-inner-content-theme($accent);
+ @include _inner-content-theme($accent);
}
.mat-warn {
- @include _mat-slider-inner-content-theme($warn);
+ @include _inner-content-theme($warn);
}
.mat-slider:hover,
@@ -180,7 +180,7 @@
}
}
-@mixin _mat-slider-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -193,7 +193,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-slider-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
index 3b541cfd66bc..fabb1343d932 100644
--- a/src/material/snack-bar/_snack-bar-theme.scss
+++ b/src/material/snack-bar/_snack-bar-theme.scss
@@ -44,7 +44,7 @@
}
}
-@mixin _mat-snack-bar-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -57,7 +57,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-snack-bar-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss
index 48a077b2a723..b605a441906d 100644
--- a/src/material/sort/_sort-theme.scss
+++ b/src/material/sort/_sort-theme.scss
@@ -30,7 +30,7 @@
@mixin typography($config-or-theme) {}
-@mixin _mat-sort-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -43,7 +43,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-sort-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index dd21a44ea797..ade8f26d397f 100644
--- a/src/material/table/_table-theme.scss
+++ b/src/material/table/_table-theme.scss
@@ -50,7 +50,7 @@
}
}
-@mixin _mat-table-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -63,7 +63,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-table-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 95037f48f4f5..3a2063372931 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -58,13 +58,13 @@
@each $name, $color in $theme-colors {
// Set the foreground color of the tabs
&.mat-#{$name} {
- @include _mat-tab-label-focus($color);
- @include _mat-ink-bar($color);
+ @include _label-focus-color($color);
+ @include _ink-bar-color($color);
// Override ink bar when background color is the same
&.mat-background-#{$name} {
> .mat-tab-header, > .mat-tab-link-container {
- @include _mat-ink-bar($color, default-contrast);
+ @include _ink-bar-color($color, default-contrast);
}
}
}
@@ -73,20 +73,20 @@
@each $name, $color in $theme-colors {
// Set background color of the tabs and override focus color
&.mat-background-#{$name} {
- @include _mat-tab-label-focus($color);
- @include _mat-tabs-background($color);
+ @include _label-focus-color($color);
+ @include _tabs-background($color);
}
}
}
}
-@mixin _mat-ink-bar($color, $hue: default) {
+@mixin _ink-bar-color($color, $hue: default) {
.mat-ink-bar {
background-color: theming.get-color-from-palette($color, $hue);
}
}
-@mixin _mat-tab-label-focus($tab-focus-color) {
+@mixin _label-focus-color($tab-focus-color) {
.mat-tab-label,
.mat-tab-link {
&.cdk-keyboard-focused,
@@ -98,7 +98,7 @@
}
}
-@mixin _mat-tabs-background($background-color) {
+@mixin _tabs-background($background-color) {
// Note that these selectors target direct descendants so
// that the styles don't apply to any nested tab groups.
@@ -151,7 +151,7 @@
}
}
-@mixin _mat-tabs-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -164,7 +164,7 @@
@include color($color);
}
@if $density != null {
- @include _mat-tabs-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);
diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
index 7647760f931c..7fc4bac6674d 100644
--- a/src/material/toolbar/_toolbar-theme.scss
+++ b/src/material/toolbar/_toolbar-theme.scss
@@ -6,7 +6,7 @@
@use '../core/typography/typography-utils';
@use './toolbar-variables';
-@mixin _mat-toolbar-height($height) {
+@mixin _height($height) {
.mat-toolbar-multiple-rows {
min-height: $height;
}
@@ -15,12 +15,12 @@
}
}
-@mixin _mat-toolbar-color($palette) {
+@mixin _palette-styles($palette) {
background: theming.get-color-from-palette($palette);
color: theming.get-color-from-palette($palette, default-contrast);
}
-@mixin _mat-toolbar-form-field-overrides {
+@mixin _form-field-overrides {
.mat-form-field-underline,
.mat-form-field-ripple,
.mat-focused .mat-form-field-ripple {
@@ -53,18 +53,18 @@
color: theming.get-color-from-palette($foreground, text);
&.mat-primary {
- @include _mat-toolbar-color($primary);
+ @include _palette-styles($primary);
}
&.mat-accent {
- @include _mat-toolbar-color($accent);
+ @include _palette-styles($accent);
}
&.mat-warn {
- @include _mat-toolbar-color($warn);
+ @include _palette-styles($warn);
}
- @include _mat-toolbar-form-field-overrides;
+ @include _form-field-overrides;
}
}
@@ -92,13 +92,13 @@
@include compatibility.private-density-legacy-compatibility() {
// Set the default height for the toolbar.
- @include _mat-toolbar-height($height-desktop);
+ @include _height($height-desktop);
// As per specs, toolbars should have a different height in mobile devices. This has been
// specified in the old guidelines and is still observable in the new specifications by
// looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
@media (variables.$xsmall) {
- @include _mat-toolbar-height($height-mobile);
+ @include _height($height-mobile);
}
}
}
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index b25a49dd1232..be4db1dae20e 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -38,7 +38,7 @@ $handset-vertical-padding:
}
}
-@mixin _mat-tooltip-density($config-or-theme) {}
+@mixin _density($config-or-theme) {}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -51,7 +51,7 @@ $handset-vertical-padding:
@include color($color);
}
@if $density != null {
- @include _mat-tooltip-density($density);
+ @include _density($density);
}
@if $typography != null {
@include typography($typography);