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

fix for custom checkboxes. see test-modal

Browse Source
This commit is contained in:
Felix Hamann 2018-03-30 01:23:17 +02:00
parent 49d5008f0e
commit c07a219485
2 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
templates/standalone/inputs.lucius
View File

@ -138,7 +138,6 @@ input[type="checkbox"]:checked::after {
.checkbox, .checkbox,
.radio { .radio {
position: relative; position: relative;
margin: 3px;
> [type="checkbox"], > [type="checkbox"],
> [type="radio"] { > [type="radio"] {
@ -147,8 +146,9 @@ input[type="checkbox"]:checked::after {
> label { > label {
display: block; display: block;
padding: 7px 13px 7px 30px; height: 30px;
background-color: var(--darkbase); width: 30px;
background-color: var(--greybase);
border-radius: 4px; border-radius: 4px;
color: white; color: white;
cursor: pointer; cursor: pointer;
@ -158,8 +158,8 @@ input[type="checkbox"]:checked::after {
> label::after { > label::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 15px; top: 14px;
left: 4px; left: 5px;
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -170,13 +170,13 @@ input[type="checkbox"]:checked::after {
> label::before { > label::before {
width: 20px; width: 20px;
height: 2px; height: 2px;
transform: scale(0.8, 0.1); transform: scale(0.1, 0.1);
} }
> label::after { > label::after {
width: 20px; width: 20px;
height: 2px; height: 2px;
transform: scale(0.8, 0.1); transform: scale(0.1, 0.1);
} }
> :checked + label { > :checked + label {
@ -184,12 +184,27 @@ input[type="checkbox"]:checked::after {
text-decoration: underline; text-decoration: underline;
} }
&:hover > label::before, &:hover > label {
background-color: var(--lighterbase);
}
&:hover > label::before {
transform: scale(0.8, 0.4);
}
> :checked + label::before { > :checked + label::before {
transform: scale(1, 1) rotate(45deg); transform: scale(1, 1) rotate(45deg);
} }
&:hover > label::after, > :checked + label:hover::after,
> :checked + label:hover::before {
transform: scale(1, 1) rotate(0deg);
}
&:hover > label::after {
transform: scale(0.8, 0.4);
}
> :checked + label::after { > :checked + label::after {
transform: scale(1, 1) rotate(-45deg); transform: scale(1, 1) rotate(-45deg);
} }
@ -248,25 +263,34 @@ input[type="file"].js-file-input {
outline: 0; outline: 0;
border: 0; border: 0;
} }
.file-input__container { .file-input__container,
.file-checkbox__container {
grid-column-start: 2; grid-column-start: 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.file-input__label, .file-input__label,
.file-input__remover { .file-input__remover,
.file-checkbox__label,
.file-checkbox__remover {
display: block; display: block;
border-radius: 2px; border-radius: 2px;
padding: 5px 13px; padding: 5px 13px;
color: var(--whitebase); color: var(--whitebase);
cursor: pointer; cursor: pointer;
} }
.file-input__label { .file-input__label,
.file-checkbox__label {
text-align: left; text-align: left;
position: relative; position: relative;
height: 30px; height: 30px;
} }
.file-input__label.btn { .file-checkbox__label {
background-color: var(--greybase);
text-decoration: line-through;
}
.file-input__label.btn,
.file-checkbox__label.btn {
padding: 5px 13px; padding: 5px 13px;
} }
.file-input__label::after, .file-input__label::after,
@ -288,6 +312,9 @@ input[type="file"].js-file-input {
.file-input__label::before { .file-input__label::before {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.file-checkbox__checkbox {
margin-left: 10px;
}
.file-input__remover { .file-input__remover {
display: none; display: none;
width: 40px; width: 40px;
@ -309,6 +336,15 @@ input[type="file"].js-file-input {
.file-input__container--valid > .file-input__label { .file-input__container--valid > .file-input__label {
background-color: var(--lightbase); background-color: var(--lightbase);
} }
.file-checkbox__container--valid > .file-checkbox__label {
text-decoration: none;
background-color: var(--lighterbase);
&:hover {
background-color: var(--greybase);
text-decoration: line-through;
}
}
.file-input__container--valid > .file-input__label::before, .file-input__container--valid > .file-input__label::before,
.file-input__container--valid > .file-input__label::after { .file-input__container--valid > .file-input__label::after {
content: none; content: none;
@ -317,7 +353,8 @@ input[type="file"].js-file-input {
display: block; display: block;
} }
@media (max-width: 999px) { @media (max-width: 999px) {
.file-input__container { .file-input__container,
.file-checkbox__container {
grid-column-start: 1; grid-column-start: 1;
} }
} }

6
templates/widgets/modal.hamlet
View File

@ -9,7 +9,9 @@
<label .reactive-label for="inp2">Kürzel <label .reactive-label for="inp2">Kürzel
<input type="text" id="inp2"> <input type="text" id="inp2">
<div .form-group> <div .form-group>
<label .reactive-label for="inp3">Semester <label .reactive-label for="inp3">Aktiv?
<input type="text" id="inp3"> <div .checkbox>
<input .js-file-checkbox id="inp3" name="f2" type="checkbox">
<label for="inp3">
<div .form-group> <div .form-group>
<input type="submit" value="Submit"> <input type="submit" value="Submit">