diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index 5b07f4fcd41..aba23a2fc1c 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -76,7 +76,7 @@ } .mdc-checkbox__mixedmark { - @include mdc-theme-prop(background-color, $color); + @include mdc-theme-prop(border-color, $color); } } @@ -365,9 +365,11 @@ @mixin mdc-checkbox__mixedmark_ { width: 100%; - height: floor($mdc-checkbox-mark-stroke-size); + height: 0; transform: scaleX(0) rotate(0deg); transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform); + border-width: floor($mdc-checkbox-mark-stroke-size) / 2; + border-style: solid; opacity: 0; } diff --git a/packages/mdc-radio/_mixins.scss b/packages/mdc-radio/_mixins.scss index 18df1067aab..3144dc2ba27 100644 --- a/packages/mdc-radio/_mixins.scss +++ b/packages/mdc-radio/_mixins.scss @@ -34,7 +34,7 @@ @mixin mdc-radio-ink-color($color) { // stylelint-disable-next-line selector-max-specificity .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle { - @include mdc-theme-prop(background-color, $color); + @include mdc-theme-prop(border-color, $color); } } diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss index 3a70277863a..c6bda221699 100644 --- a/packages/mdc-radio/mdc-radio.scss +++ b/packages/mdc-radio/mdc-radio.scss @@ -41,7 +41,7 @@ cursor: pointer; /* @alternate */ - will-change: opacity, transform, border-color, background-color, color; + will-change: opacity, transform, border-color, color; // Container for radio circles and ripple. &__background { @@ -88,7 +88,9 @@ width: 100%; height: 100%; transform: scale(0, 0); - transition: mdc-radio-exit(transform), mdc-radio-exit(background-color); + transition: mdc-radio-exit(transform), mdc-radio-exit(border-color); + border-width: 10px; + border-style: solid; border-radius: 50%; } @@ -124,7 +126,7 @@ } .mdc-radio__inner-circle { - transition: mdc-radio-enter(transform), mdc-radio-enter(background-color); + transition: mdc-radio-enter(transform), mdc-radio-enter(border-color); } } } @@ -138,7 +140,7 @@ + .mdc-radio__background { .mdc-radio__inner-circle { transform: scale(.5); - transition: mdc-radio-enter(transform), mdc-radio-enter(background-color); + transition: mdc-radio-enter(transform), mdc-radio-enter(border-color); } } } @@ -153,7 +155,7 @@ } .mdc-radio__inner-circle { - background-color: $mdc-radio-circle-color; + border-color: $mdc-radio-circle-color; } } }