better fitting styling for custom checkboxes and radio buttons

This commit is contained in:
Felix Hamann 2018-06-23 21:18:05 +02:00
parent e7d31c0efb
commit 2a57acc99e
2 changed files with 14 additions and 21 deletions

View File

@ -6,7 +6,7 @@
.checkbox {
display: inline-block;
margin: 0 10px;
margin-left: 5px;
}
}
@ -34,4 +34,5 @@
.file-input__list {
margin-left: 15px;
margin-top: 10px;
font-weight: 600;
}

View File

@ -180,9 +180,10 @@ input[type="checkbox"]:checked::after {
label {
display: block;
height: 30px;
width: 30px;
background-color: var(--color-grey);
height: 24px;
width: 24px;
background-color: #f3f3f3;
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
border-radius: 4px;
color: white;
cursor: pointer;
@ -192,25 +193,14 @@ input[type="checkbox"]:checked::after {
label::after {
content: '';
position: absolute;
top: 14px;
left: 5px;
top: 11px;
left: 3px;
display: block;
width: 20px;
height: 20px;
background-color: white;
width: 18px;
height: 2px;
background-color: var(--color-font);
transition: all .2s;
}
label::before {
width: 20px;
height: 2px;
transform: scale(0.1, 0.1);
}
label::after {
width: 20px;
height: 2px;
transform: scale(0.1, 0.1);
transform: scale(0.5, 0.1);
}
:checked + label {
@ -219,10 +209,12 @@ input[type="checkbox"]:checked::after {
}
:checked + label::before {
background-color: white;
transform: scale(1, 1) rotate(45deg);
}
:checked + label::after {
background-color: white;
transform: scale(1, 1) rotate(-45deg);
}
}