fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better fitting styling for custom checkboxes and radio buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
templates/multiFileField.lucius
View File

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

32
templates/standalone/inputs.lucius
View File

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