@function mdc-radio-enter($name) {
@return mdc-animation-enter($name, $mdc-radio-transition-duration);
}
@function mdc-radio-exit($name) {
@return mdc-animation-exit($name, $mdc-radio-transition-duration);
}
// postcss-bem-linter: define radio
.mdc-radio {
display: inline-block;
position: relative;
box-sizing: border-box;
width: $mdc-radio-touch-area;
height: $mdc-radio-touch-area;
padding: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
cursor: pointer;
will-change: opacity, transform, border-color, background-color, color;
// Container for radio circles and ripple.
&__background {
display: inline-block;
position: absolute;
width: $mdc-radio-ui-pct;
height: $mdc-radio-ui-pct;
box-sizing: border-box;
&::before {
@include mdc-theme-prop(background-color, primary);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0, 0);
transition: mdc-radio-exit(opacity), mdc-radio-exit(transform);
border-radius: 50%;
content: "";
opacity: 0;
pointer-events: none;
}
}
&__outer-circle {
@include mdc-theme-prop(border-color, text-secondary-on-light);
@include mdc-theme-dark(".mdc-radio") {
@include mdc-theme-prop(border-color, text-secondary-on-dark);
}
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: mdc-radio-exit(border-color);
border-width: 2px;
border-style: solid;
border-radius: 50%;
box-sizing: border-box;
}
&__inner-circle {
@include mdc-theme-prop(background-color, text-secondary-on-light);
@include mdc-theme-dark(".mdc-radio") {
@include mdc-theme-prop(background-color, text-secondary-on-dark);
}
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0, 0);
transition: mdc-radio-exit(transform), mdc-radio-exit(background-color);
border-radius: 50%;
box-sizing: border-box;
}
&__native-control {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
cursor: inherit;
opacity: 0;
z-index: 1;
}
}
.mdc-radio__native-control:checked,
.mdc-radio__native-control:disabled {
+ .mdc-radio__background {
transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
.mdc-radio__outer-circle {
transition: mdc-radio-enter(border-color);
}
.mdc-radio__inner-circle {
transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
}
}
}
.mdc-radio--disabled {
cursor: default;
pointer-events: none;
}
.mdc-radio__native-control:checked {
+ .mdc-radio__background {
.mdc-radio__outer-circle {
@include mdc-theme-prop(border-color, primary);
}
.mdc-radio__inner-circle {
@include mdc-theme-prop(background-color, primary);
transform: scale(.5);
transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
}
}
}
.mdc-radio__native-control:disabled,
fieldset:disabled .mdc-radio__native-control,
[aria-disabled="true"] .mdc-radio__native-control {
+ .mdc-radio__background {
cursor: default;
.mdc-radio__outer-circle {
border-color: rgba(black, .26);
@include mdc-theme-dark(".mdc-radio") {
border-color: rgba(white, .3);
}
}
.mdc-radio__inner-circle {
background-color: rgba(black, .26);
@include mdc-theme-dark(".mdc-radio") {
background-color: rgba(white, .3);
}
}
}
}
.mdc-radio__native-control:focus {
+ .mdc-radio__background::before {
transform: scale(2.8, 2.8);
transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
opacity: .26;
}
}
// postcss-bem-linter: end
.mdc-radio.mdc-ripple-upgraded {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
@include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
.mdc-radio__background::before {
content: none;
}
}