src/components/checkbox/styles.scss
@import 'styles/_global.scss';
$checkbox-small-size: 16px;
$checkbox-small-margin: 5px;
$checkbox-normal-size: 20px;
$checkbox-normal-margin: 10px;
.checkbox {
font-size: 0;
cursor: pointer;
color: $c-black;
position: relative;
display: inline-block;
vertical-align: middle;
transition: color .1s ease;
&_small {
min-width: $checkbox-small-size;
min-height: $checkbox-small-size;
line-height: $checkbox-small-size;
}
&_normal {
min-width: $checkbox-normal-size;
min-height: $checkbox-normal-size;
line-height: $checkbox-normal-size;
}
}
.input {
position: absolute;
top: -15px;
left: -15px;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
.label {
position: relative;
display: inline-block;
vertical-align: middle;
}
.status {
&:after,
&:before {
content: '';
position: absolute;
}
&:before {
top: 0;
left: 0;
background-color: $c-white;
border: 1px solid $c-whisper;
}
&:after {
content: '';
position: absolute;
opacity: 0;
border-image: none;
border-color: #222;
border-style: solid;
transform: rotate(-45deg);
transition: opacity .1s linear;
}
&_dark {
&:before {
border-color: #ccb661;
}
}
}
.checkbox_small > .label {
font-size: 1.2rem;
padding-left: $checkbox-small-size + $checkbox-small-margin;
}
.checkbox_small > .status {
&:before {
width: $checkbox-small-size;
height: $checkbox-small-size;
}
&:after {
top: 5px;
left: 4px;
width: 9px;
height: 5px;
border-width: 0 0 2px 2px;
}
}
.checkbox_normal > .label {
font-size: 1.4rem;
padding-left: $checkbox-normal-size + $checkbox-normal-margin;
}
.checkbox_normal > .status {
&:before {
width: $checkbox-normal-size;
height: $checkbox-normal-size;
}
&:after {
top: 6px;
left: 5px;
width: 11px;
height: 6px;
border-width: 0 0 2px 2px;
}
}
.input:checked + .status {
&:after {
opacity: 1;
}
}