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

6
templates/widgets/modal.hamlet
View File

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