src/scss/radiobutton.scss
/**
* http://www.google.com/design/spec/components/switches.html#switches-radio-button
*/
/**
* Implementation from http://wtfforms.com/
*/
.mdc-RadioButton {
display: flex;
flex-direction: column;
}
.mdc-RadioButton-item {
display: flex;
align-items: center;
flex: 0 1 48px;
position: relative;
}
.mdc-RadioButton-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.mdc-RadioButton-label {
color: rgba(0, 0, 0, 0.54);
margin-left: 10px;
}
.mdc-RadioButton-icon {
line-height: 0;
fill: rgba(0, 0, 0, 0.54);
transition: all 0.15s ease;
}
.mdc-RadioButton-item--keyboard .mdc-RadioButton-icon {
box-shadow: 0 0 0 8px rgba(27, 50, 95, 0.12);
border-radius: 100%;
background-color: rgba(27, 50, 95, 0.12);
}
/**
* checked
*/
.mdc-RadioButton-input:checked ~ .mdc-RadioButton-icon,
.mdc-RadioButton-input:checked ~ .mdc-RadioButton-label {
color: $blue-dark;
fill: $blue-dark;
}
/**
* disabled
*/
.mdc-RadioButton-input:disabled ~ .mdc-RadioButton-icon,
.mdc-RadioButton-input:disabled ~ .mdc-RadioButton-label {
fill: rgba(0, 0, 0, 0.26);
color: rgba(0, 0, 0, 0.26);
}
.mdc-RadioButton--keyboard .mdc-RadioButton-input:checked ~ .mdc-RadioButton-icon {
box-shadow: 0 0 0 8px rgba(27, 50, 95, 0.12);
border-radius: 100%;
background-color: rgba(27, 50, 95, 0.12);
}