diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss index 16c706fbac83..0e438094eef7 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss +++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss @@ -6,7 +6,7 @@ $config: mat-get-color-config($config-or-theme); @include mat-using-mdc-theme($config) { @include mdc-menu-surface-core-styles($mat-theme-styles-query); - @include mdc-list-without-ripple($mat-theme-styles-query); + @include mdc-list-deprecated-without-ripple($mat-theme-styles-query); } } @@ -18,7 +18,7 @@ .mat-mdc-autocomplete-panel { // Note that we include this private mixin, because the public one adds // a bunch of styles that we aren't using for the autocomplete panel. - @include mdc-list-base_($mat-typography-styles-query); + @include mdc-list-deprecated-base_($mat-typography-styles-query); } } } diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss index 2de757dd9b6c..dcde40752a3d 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.scss +++ b/src/material-experimental/mdc-autocomplete/autocomplete.scss @@ -19,7 +19,7 @@ // Note that we include this private mixin, because the public // one adds a bunch of styles that we aren't using for the menu. - @include mdc-list-base_($query: structure); + @include mdc-list-deprecated-base_($query: structure); @include cdk-high-contrast(active, off) { outline: solid 1px; } diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss index 60e3b46b3136..a771bd6a8ccb 100644 --- a/src/material-experimental/mdc-button/button.scss +++ b/src/material-experimental/mdc-button/button.scss @@ -1,3 +1,5 @@ +@use '@material/button/button'; + @import '@material/button/mixins.import'; @import '@material/button/variables.import'; @import '@material/ripple/mixins.import'; @@ -10,20 +12,32 @@ .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button { @include mat-private-button-interactive(); @include mat-private-button-disabled(); +} + +// MDC expects button icons to contain this HTML content: +// ```html +// favorite +// ``` +// However, Angular Material expects a `mat-icon` instead. The following +// mixins will style the icons appropriately. +.mat-mdc-button { + .mat-icon { + @include button.icon(); + } + .mdc-button__label + .mat-icon { + @include button.icon-trailing(); + } +} - // MDC expects button icons to contain this HTML content: - // ```html - // favorite - // ``` - // However, Angular Material expects a `mat-icon` instead. The following - // will extend the `mdc-button__icon` styling to the mat icon. Note that - // the extended styles inherently only match icons that nest themselves in - // a parent `mdc-button`. - // - // TODO(mmalerba): Have MDC create a mixin for this so we don't have to rely on extending their - // class. +.mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button { + // Icons inside contained buttons have different styles due to increased button padding .mat-icon { - @extend .mdc-button__icon; + @include button.icon(); + @include button.icon-contained(); + } + + .mdc-button__label + .mat-icon { + @include button.icon-contained-trailing(); } } diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index dee79df87107..28eff8f71190 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -13,8 +13,8 @@ // Since this will usually be rendered in an overlay, // we have explicitly set the default color. @include mdc-theme-prop(color, text-primary-on-background); - @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color, - $query: $mat-theme-styles-query); + @include mdc-list-deprecated-item-disabled-text-color( + $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query); } } } diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 2994f60606b3..e53c48a892f6 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -14,8 +14,8 @@ // Since this will usually be rendered in an overlay, // we have explicitly set the default color. @include mdc-theme-prop(color, text-primary-on-background); - @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color, - $query: $mat-theme-styles-query); + @include mdc-list-deprecated-item-disabled-text-color( + $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query); &:hover:not(.mdc-list-item--disabled), &:focus:not(.mdc-list-item--disabled), @@ -29,15 +29,18 @@ } .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { - @include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query); + @include mdc-list-deprecated-item-primary-text-ink-color( + primary, $query: $mat-theme-styles-query); } .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { - @include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query); + @include mdc-list-deprecated-item-primary-text-ink-color( + secondary, $query: $mat-theme-styles-query); } .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { - @include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query); + @include mdc-list-deprecated-item-primary-text-ink-color( + error, $query: $mat-theme-styles-query); } } } diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss index 4f010fd690a8..693df64db37c 100644 --- a/src/material-experimental/mdc-core/option/optgroup.scss +++ b/src/material-experimental/mdc-core/option/optgroup.scss @@ -3,11 +3,11 @@ @import '../../mdc-helpers/mdc-helpers'; .mat-mdc-optgroup-label { - @include mdc-list-item-base_; - @include mdc-list-list-item-padding-variant( - $mdc-list-textual-variant-config, $query: $mat-base-styles-query); - @include mdc-list-list-item-height-variant( - $mdc-list-textual-variant-config, $query: $mat-base-styles-query); - @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity, - $query: $mat-base-styles-query); + @include mdc-list-deprecated-item-base_; + @include mdc-list-deprecated-list-item-padding-variant( + $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + @include mdc-list-deprecated-list-item-height-variant( + $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + @include mdc-list-deprecated-item-disabled-text-opacity( + $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query); } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index fa271199a3d1..0c5d1a4b5ca7 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -7,17 +7,17 @@ .mat-mdc-option { // Note that we include this private mixin, because the public // one adds a bunch of styles that we aren't using for the menu. - @include mdc-list-item-base_; - @include mdc-list-list-item-padding-variant( - $mdc-list-textual-variant-config, $query: $mat-base-styles-query); - @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity, - $query: $mat-base-styles-query); + @include mdc-list-deprecated-item-base_; + @include mdc-list-deprecated-list-item-padding-variant( + $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query); + @include mdc-list-deprecated-item-disabled-text-opacity( + $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query); @include user-select(none); // Set the `min-height` here ourselves, instead of going through // the `mdc-list-list-item-height-variant` mixin, because it sets a `height` // which doesn't work well with multi-line options. - min-height: map-get($mdc-list-textual-variant-config, single-line-height); + min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height); // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo // element that will stretch the option to the correct height. See: @@ -35,20 +35,20 @@ // Note that we bump the padding here, rather than padding inside the // group so that ripples still reach to the edges of the panel. .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) { - padding-left: $mdc-list-side-padding * 2; + padding-left: $mdc-list-deprecated-side-padding * 2; [dir='rtl'] & { - padding-left: $mdc-list-side-padding; - padding-right: $mdc-list-side-padding * 2; + padding-left: $mdc-list-deprecated-side-padding; + padding-right: $mdc-list-deprecated-side-padding * 2; } } .mat-pseudo-checkbox { - margin-right: $mdc-list-side-padding; + margin-right: $mdc-list-deprecated-side-padding; [dir='rtl'] & { margin-right: 0; - margin-left: $mdc-list-side-padding; + margin-left: $mdc-list-deprecated-side-padding; } } diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index 6b596b0fc1aa..b768b7dde3bf 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -120,9 +120,9 @@ $mat-typography-2018-level-mappings: ( // variables with no fallback value, which breaks some builds. $result: (); @each $property, $value in $result-with-nulls { - @if $value != null { + //@if $value != null { $result: map-merge($result, ($property: $value)); - } + //} } @return $result; } diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss index b0d6e1ff8694..c254e4c85b59 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.scss +++ b/src/material-experimental/mdc-list/_list-option-theme.scss @@ -13,8 +13,8 @@ } &.mdc-list-item--selected { - @include mdc-list-item-primary-text-ink-color($color); - @include mdc-list-item-graphic-ink-color($color); + @include mdc-list-deprecated-item-primary-text-ink-color($color); + @include mdc-list-deprecated-item-graphic-ink-color($color); &::before { @include mdc-theme-prop(background, $color); diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 1299c23da730..972b1e073c6b 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/src/material-experimental/mdc-list/_list-theme.scss @@ -18,7 +18,7 @@ @include mat-mdc-private-interactive-list-item-state-colors($config); @include mat-using-mdc-theme($config) { - @include mdc-list-without-ripple($query: $mat-theme-styles-query); + @include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query); .mat-mdc-list-option { @include mat-mdc-private-list-option-color-override(primary); @@ -35,7 +35,7 @@ @mixin mat-mdc-list-density($config-or-theme) { $density-scale: mat-get-density-config($config-or-theme); $height: density.prop-value( - $density-config: $mdc-list-single-line-density-config, + $density-config: $mdc-list-deprecated-single-line-density-config, $density-scale: $density-scale, $property-name: height, ); @@ -45,7 +45,7 @@ // the styles should actually only affect single-line list items. This has been reported as // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737. .mat-mdc-list-item-single-line { - @include mdc-list-single-line-height($height); + @include mdc-list-deprecated-single-line-height($height); } @include mat-mdc-private-list-option-density-styles($density-scale); @@ -54,7 +54,7 @@ @mixin mat-mdc-list-typography($config-or-theme) { $config: mat-get-typography-config($config-or-theme); @include mat-using-mdc-typography($config) { - @include mdc-list-without-ripple($query: $mat-typography-styles-query); + @include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query); @include mat-mdc-private-list-option-typography-styles(); } } diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss index 72410643d660..ae6ba2c88977 100644 --- a/src/material-experimental/mdc-list/list.scss +++ b/src/material-experimental/mdc-list/list.scss @@ -2,7 +2,7 @@ @import '@material/list/variables.import'; @import '../mdc-helpers/mdc-helpers'; -@include mdc-list-without-ripple($query: $mat-base-styles-query); +@include mdc-list-deprecated-without-ripple($query: $mat-base-styles-query); // MDC expects the list element to be a `