more responsive forms and design update for forms. custom checkboxes
This commit is contained in:
Felix Hamann
parent
5695cbbed8
commit
8f2a632c8e
@ -161,12 +161,37 @@
|
||||
setup();
|
||||
}
|
||||
|
||||
window.utils.initializeCheckboxRadio = function(input, type) {
|
||||
|
||||
if (!input.parentElement.classList.contains(type)) {
|
||||
var parentEl = input.parentElement;
|
||||
var wrapper = document.createElement('div');
|
||||
var label = document.createElement('label');
|
||||
wrapper.classList.add(type);
|
||||
label.setAttribute('for', input.id);
|
||||
wrapper.appendChild(input);
|
||||
wrapper.appendChild(label);
|
||||
|
||||
parentEl.appendChild(wrapper);
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// initialize checkboxes
|
||||
Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
|
||||
window.utils.initializeCheckboxRadio(inp, 'checkbox');
|
||||
});
|
||||
|
||||
// initialize radios
|
||||
Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
|
||||
window.utils.initializeCheckboxRadio(inp, 'radio');
|
||||
});
|
||||
|
||||
// initialize file-upload-fields
|
||||
Array.from(document.querySelectorAll('input[type="file"]')).map(function(inp) {
|
||||
Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
|
||||
var formGroup = inp.parentNode;
|
||||
while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
|
||||
formGroup = formGroup.parentNode;
|
||||
@ -175,7 +200,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
|
||||
// initialize file-checkbox-fields
|
||||
Array.from(document.querySelectorAll('.js-file-checkbox')).map(function(inp) {
|
||||
Array.from(document.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
|
||||
window.utils.reactiveFileCheckbox(inp);
|
||||
});
|
||||
});
|
||||
|
||||
@ -8,33 +8,27 @@ form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 25% max-content;
|
||||
grid-auto-columns: 25%;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-gap: 5px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 17px 0;
|
||||
padding-left: 10px;
|
||||
align-items: baseline;
|
||||
border-left: 2px solid transparent;
|
||||
|
||||
+ .form-group {
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group__label {
|
||||
width: 25%;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-group {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 30px;
|
||||
align-items: baseline;
|
||||
margin-top: 17px;
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,28 +37,30 @@ input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="number"],
|
||||
input[type="email"] {
|
||||
input[type="email"],
|
||||
input[type*="date"],
|
||||
input[type*="time"] {
|
||||
/* from bulma.css */
|
||||
background-color: #fff;
|
||||
border-color: #dbdbdb;
|
||||
color: #363636;
|
||||
box-shadow: inset 0 2px 3px 1px rgba(50,50,50,.1);
|
||||
min-width: 400px;
|
||||
border-color: #dbdbdb;
|
||||
background-color: #f3f3f3;
|
||||
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
font-size: 1rem;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: calc(.375em - 1px);
|
||||
padding-left: calc(.625em - 1px);
|
||||
padding-right: calc(.625em - 1px);
|
||||
padding-top: calc(.375em - 1px);
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
padding: 4px 13px;
|
||||
}
|
||||
|
||||
input[type*="date"],
|
||||
input[type*="time"] {
|
||||
width: 50%;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.form-group--required {
|
||||
@ -111,25 +107,19 @@ input[type="email"]:focus {
|
||||
|
||||
/* TEXTAREAS */
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #363636;
|
||||
background-color: #f3f3f3;
|
||||
padding: 4px 13px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
display: inline-flex;
|
||||
font-size: 1rem;
|
||||
height: 170px;
|
||||
width: 400px;
|
||||
line-height: 1.5;
|
||||
padding-bottom: calc(.375em - 1px);
|
||||
padding-left: calc(.625em - 1px);
|
||||
padding-right: calc(.625em - 1px);
|
||||
padding-top: calc(.375em - 1px);
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
border-color: #dbdbdb;
|
||||
color: #363636;
|
||||
box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
|
||||
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
@ -224,31 +214,15 @@ input[type="checkbox"]:checked::after {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover label {
|
||||
background-color: var(--color-lighter);
|
||||
}
|
||||
|
||||
&:hover label::before {
|
||||
transform: scale(0.8, 0.4);
|
||||
}
|
||||
|
||||
:checked + label::before {
|
||||
transform: scale(1, 1) rotate(45deg);
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
}
|
||||
|
||||
.radio label::before {
|
||||
transform: scale(0.01, 0.01) rotate(45deg);
|
||||
}
|
||||
@ -268,18 +242,6 @@ input[type="checkbox"]:checked::after {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* REACTIVE LABELS */
|
||||
.reactive-label {
|
||||
cursor: text;
|
||||
color: var(--color-fontsec);
|
||||
transform: translate(0, 0);
|
||||
transition: all .1s;
|
||||
}
|
||||
.reactive-label--small {
|
||||
cursor: default;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
/* CUSTOM FILE INPUT */
|
||||
input[type="file"].js-file-input {
|
||||
color: white;
|
||||
|
||||
@ -5,7 +5,7 @@ $case formLayout
|
||||
$forall view <- views
|
||||
<div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
|
||||
$if not (Blaze.null $ fvLabel view)
|
||||
<label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
|
||||
<label .form-group__label for=#{fvId view}>#{fvLabel view}
|
||||
$# TODO: inputs should have proper placeholders
|
||||
$# TODO: can we wrap checkboxes in a <div.checkbox> and radio buttons in a <div.radio>?
|
||||
<div .form-group__input>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user