SCSS
$checkbox-background: #FAFAFA;
$checkbox-border: #DDD;
$checkbox-fill: #A475E4;
$checkbox-size: 20px;
.checkbox {
width: $checkbox-size;
height: $checkbox-size;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: top;
&::before {
content: '';
border-radius: 2px;
border: 1px solid $checkbox-border;
background: $checkbox-background;
width: 100%;
height: 100%;
position: absolute;
top: 0;
box-sizing: border-box;
pointer-events: none;
z-index: 0;
}
}
.checkbox-input {
opacity: 0;
z-index: 2;
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
&:focus {
outline: none;
}
}
.checkbox-fill {
background: $checkbox-fill;
width: 0;
height: 0;
border-radius: 2px;
transition: width 0.2s ease-in, height 0.2s ease-in;
pointer-events: none;
z-index: 1;
}
.checkbox-input:checked ~ .checkbox-fill {
width: calc(100% - 4px);
height: calc(100% - 4px);
transition: width 0.2s ease-out, height 0.2s ease-out;
}
1 Response