From 2c30410f32b1231b71bc09517eec8ff76ffe2586 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 27 May 2022 15:53:30 +0000 Subject: [PATCH 1/2] fix(material-experimental/mdc-radio): fix ripple color --- src/material-experimental/mdc-radio/radio.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index 5dc8b5b0afd7..edbb45658f48 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -86,6 +86,20 @@ } } +// This is necessary because we do not depend on MDC's ripple, but have our own that should be +// positioned correctly. This can be removed once we start using MDC's ripple implementation. +.mat-mdc-radio-checked .mdc-radio { + &:hover .mat-ripple-element { + background: var(--mdc-radio-selected-hover-icon-color); + } + &:focus .mat-ripple-element { + background: var(--mdc-radio-selected-focus-icon-color); + } + &:active .mat-ripple-element { + background: var(--mdc-radio-selected-pressed-icon-color); + } +} + // Element used to provide a larger tap target for users on touch devices. .mat-mdc-radio-touch-target { @include mdc-helpers.disable-fallback-declarations { From 00da158153a106fe0157609e285f194caa0354d4 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 2 Jun 2022 20:43:19 +0000 Subject: [PATCH 2/2] fix(material-experimental/mdc-radio): address feedback --- src/material-experimental/mdc-radio/radio.scss | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index edbb45658f48..43fefa470d1d 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -54,6 +54,10 @@ // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently. @include mdc-radio-theme.focus-indicator-color( var(--mat-mdc-radio-checked-ripple-color, transparent)); + + .mat-ripple-element { + background-color: var(--mat-mdc-radio-checked-ripple-color, transparent); + } } // This is necessary because we do not depend on MDC's ripple, but have our own that should be @@ -86,20 +90,6 @@ } } -// This is necessary because we do not depend on MDC's ripple, but have our own that should be -// positioned correctly. This can be removed once we start using MDC's ripple implementation. -.mat-mdc-radio-checked .mdc-radio { - &:hover .mat-ripple-element { - background: var(--mdc-radio-selected-hover-icon-color); - } - &:focus .mat-ripple-element { - background: var(--mdc-radio-selected-focus-icon-color); - } - &:active .mat-ripple-element { - background: var(--mdc-radio-selected-pressed-icon-color); - } -} - // Element used to provide a larger tap target for users on touch devices. .mat-mdc-radio-touch-target { @include mdc-helpers.disable-fallback-declarations {