55 lines
1022 B
Plaintext
55 lines
1022 B
Plaintext
.input-checkbox {
|
|
border: .125em solid @base-color;
|
|
background: none;
|
|
position: relative;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
cursor: pointer;
|
|
|
|
&:active:not(:checked) {
|
|
background-color: fade(@base-color, 25%);
|
|
}
|
|
|
|
&:checked {
|
|
background: @base-color;
|
|
|
|
&::after,
|
|
&::before {
|
|
top: 1em;
|
|
left: .5em;
|
|
opacity: 0;
|
|
border: .1em solid @accent-text-color;
|
|
background-color: @accent-text-color;
|
|
animation: fadeIn 125ms linear;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
&::before {
|
|
width: .5em;
|
|
}
|
|
|
|
&::after {
|
|
width: .85em;
|
|
animation-delay: 125ms;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 1em fade(@base-color, 30%);
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
padding-left: 2.5em;
|
|
|
|
.setting-title, .setting-description {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|