src/scss/checkbox.scss
/**
* http://www.google.com/design/spec/components/switches.html#switches-checkbox
*/
.mdc-Checkbox {
/* for absolute positioned .mdc-Checkbox-focus div */
position: relative;
height: 48px;
display: flex;
align-items: center;
&-icon {
padding: 10px;
padding-left: 0;
line-height: 0;
outline: 0;
fill: rgba(0, 0, 0, 0.54);
@include medium {
padding: 5px;
padding-left: 0;
}
}
&-label {
color: rgba(0, 0, 0, 0.54);
}
/**
* focus
*/
&-focus {
position: absolute;
/* 48px - 18px = 30px / 2 = 15px */
top: 15px;
left: 3px;
/* use the same width as svg path element for checkbox icon */
width: 18px;
height: 18px;
border-radius: 50%;
display: none;
transition: all 0.15s ease;
}
&-input {
position: absolute;
left: 0;
opacity: 0;
z-index: -1;
/**
* checked
*/
&:checked ~ .mdc-Checkbox {
&-icon,
&-label {
color: $blue-dark;
fill: $blue-dark;
}
}
&:checked.mdc-Checkbox-input--keyboard ~ .mdc-Checkbox-focus {
box-shadow: 0 0 0 8px rgba($blue-dark, 0.12);
background-color: rgba($blue-dark, 0.12);
display: block;
}
&:not(:checked).mdc-Checkbox-input--keyboard ~ .mdc-Checkbox-focus {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.12);
background-color: rgba(0, 0, 0, 0.12);
display: block;
}
/**
* disabled
*/
&:disabled ~ .mdc-Checkbox {
&-icon,
&-label {
fill: rgba(0, 0, 0, 0.26);
color: rgba(0, 0, 0, 0.26);
}
}
}
}