diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index aa7b90288c6a..b69642f2c6b9 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -10,12 +10,9 @@ @mixin _color-palette($color-palette) { @include mdc-radio-theme.theme(( selected-focus-icon-color: $color-palette, - selected-focus-state-layer-color: $color-palette, selected-hover-icon-color: $color-palette, - selected-hover-state-layer-color: $color-palette, selected-icon-color: $color-palette, selected-pressed-icon-color: $color-palette, - selected-pressed-state-layer-color: $color-palette, )); // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently. @@ -39,12 +36,9 @@ disabled-selected-icon-color: mdc-theme-color.$on-surface, disabled-unselected-icon-color: mdc-theme-color.$on-surface, unselected-focus-icon-color: $on-surface, - unselected-focus-state-layer-color: $on-surface, unselected-hover-icon-color: $on-surface, - unselected-hover-state-layer-color: $on-surface, unselected-icon-color: $on-surface, unselected-pressed-icon-color: $on-surface, - unselected-pressed-state-layer-color: $on-surface, )); &.mat-primary { diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html index e5165ebd2fa3..e81ed6778d94 100644 --- a/src/material-experimental/mdc-radio/radio.html +++ b/src/material-experimental/mdc-radio/radio.html @@ -19,7 +19,6 @@ <div class="mdc-radio__outer-circle"></div> <div class="mdc-radio__inner-circle"></div> </div> - <div class="mdc-radio__ripple"></div> <div mat-ripple class="mat-radio-ripple mat-mdc-focus-indicator" [matRippleTrigger]="formField" [matRippleDisabled]="_isRippleDisabled()" diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index fff2351c07cd..94e0f3424d01 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '@material/radio/radio' as mdc-radio; @use '@material/radio/radio-theme' as mdc-radio-theme; @use '@material/form-field' as mdc-form-field; @@ -7,22 +8,31 @@ @use '../../material/core/style/layout-common'; @include mdc-helpers.disable-fallback-declarations { - @include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query); + @include mdc-radio.static-styles($query: mdc-helpers.$mat-base-styles-query); @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query); } .mat-mdc-radio-button { - &:not(._mat-animation-noopable) { - @include mdc-helpers.disable-fallback-declarations { - @include mdc-radio.without-ripple($query: animation); - } - } - .mdc-radio { // MDC theme styles also include structural styles so we have to include the theme at least // once here. The values will be overwritten by our own theme file afterwards. @include mdc-helpers.disable-fallback-declarations { - @include mdc-radio-theme.theme-styles(mdc-radio-theme.$light-theme); + @include mdc-radio-theme.theme-styles(map.merge(mdc-radio-theme.$light-theme, ( + // Exclude the styles we don't need. + selected-focus-state-layer-color: null, + selected-focus-state-layer-opacity: null, + selected-hover-state-layer-color: null, + selected-hover-state-layer-opacity: null, + selected-pressed-state-layer-color: null, + selected-pressed-state-layer-opacity: null, + unselected-focus-icon-color: null, + unselected-focus-state-layer-color: null, + unselected-focus-state-layer-opacity: null, + unselected-hover-state-layer-color: null, + unselected-hover-state-layer-opacity: null, + unselected-pressed-state-layer-color: null, + unselected-pressed-state-layer-opacity: null, + ))); } } @@ -33,10 +43,19 @@ pointer-events: none; border-radius: 50%; - .mat-ripple-element:not(.mat-radio-persistent-ripple) { + .mat-ripple-element { opacity: mdc-radio-theme.$ripple-opacity; } } + + &._mat-animation-noopable { + .mdc-radio__background::before, + .mdc-radio__outer-circle, + .mdc-radio__inner-circle { + // Needs to be `!important`, because MDC's selectors are really specific. + transition: none !important; + } + } } // Element used to provide a larger tap target for users on touch devices.