src/modules/common/components/checkbox/checkbox.styles.less
@import (reference) '~assets/styles/shared';
.Checkbox {
cursor: pointer;
display: block;
font-size: 22px;
margin-bottom: 8px;
position: relative;
user-select: none;
}
.Checkbox__checkmark {
background-color: white;
border: 1px solid @color-lightergray;
border-radius: 1px;
height: 23px;
left: 0;
position: absolute;
top: 0;
width: 23px;
}
.Checkbox__checkmark:focus {
outline: none;
}
.Checkbox input {
visibility: hidden;
}
.Checkbox:hover input ~ .Checkbox__checkmark {
filter: brightness(95%);
}
.Checkbox input:checked ~ .Checkbox__checkmark {
background-color: @color-purple;
border: 0;
}
.Checkbox input:checked ~ .Checkbox__checkmark::after {
display: block;
}
.Checkbox__checkmark::after {
content: "";
display: none;
position: absolute;
}
.Checkbox .Checkbox__checkmark::after {
border: solid white;
border-width: 0 1px 1px 0;
height: 13px;
left: 8px;
top: 3px;
transform: rotate(45deg);
width: 7px;
}