checkboxes with checkmarks

This commit is contained in:
Felix Hamann 2019-02-04 21:06:00 +01:00
parent 36813d3717
commit df0cdc051e

View File

@ -244,39 +244,39 @@ input[type="checkbox"]:checked::after {
label::after { label::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 11px;
left: 3px;
display: block; display: block;
width: 18px; top: 12px;
left: 8px;
height: 2px; height: 2px;
width: 8px;
background-color: var(--color-font); background-color: var(--color-font);
transition: all .2s; transition: all .2s;
transform: scale(0.5, 0.1); opacity: 0.2;
} }
:checked + label { :checked + label {
background-color: var(--color-primary); background-color: var(--color-primary);
text-decoration: underline; }
:checked + label::before,
:checked + label::after {
opacity: 1;
} }
:checked + label::before { :checked + label::before {
background-color: white; background-color: white;
transform: scale(1, 1) rotate(45deg); transform: rotate(45deg);
left: 4px;
} }
:checked + label::after { :checked + label::after {
background-color: white; background-color: white;
transform: scale(1, 1) rotate(-45deg); transform: rotate(-45deg);
top: 11px;
width: 13px;
} }
} }
.radio label::before {
transform: scale(0.01, 0.01) rotate(45deg);
}
.radio label::after {
transform: scale(0.01, 0.01) rotate(-45deg);
}
.radio::before { .radio::before {
content: ''; content: '';
position: absolute; position: absolute;