form{
margin-bottom: 1.5em; .double{ display: flex; justify-content: space-between; .half { max-width: 48%; } }
}
.form{
margin-left: auto; margin-right: auto;
}
label{
margin-bottom: 2pt; display: block; text-align: left; color: $text; font-size: 0.9em; padding-left: 10pt;
}
// Plain inputs and textarea input {
&[type="email"], &[type="number"], &[type="search"], &[type="text"], &[type="tel"], &[type="url"], &[type="password"], { appearance: none; border: 1px solid $line; width: 100%; transition: 0.7s; color: $text-dark; font-family: $font; font-weight: $normal; padding: 10pt 20pt; border-radius: $radius; background-color: $background-alt; margin-bottom: 1.4em; display: block; &:focus{ border-color: transparentize($primary,0.5); outline: 0; background-color: $background; } }
}
textarea{
appearance: none; border: 1px solid $line; width: 100%; transition: 0.7s; color: $text-dark; font-family: $font; font-weight: $normal; padding: 12pt 24pt; border-radius: $radius; background-color: $background-alt; margin-bottom: 1.4em; display: block; resize: none; min-height: 8em; outline:0; &:focus{ border-color: transparentize($primary,0.5); outline: 0; background-color: $background; }
}
// Select select{
border: 1px solid $line; width: 100%; transition: 0.7s; color: $text-dark; font-family: $font; font-weight: $normal; padding: 10pt 20pt; margin-bottom: 1.4em; display: block; border-radius: $radius; background-color: $background-alt; outline: 0; -webkit-appearance: none; -moz-appearance: none; // Appearance for IE 10/11 &::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */ } // Caret down background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-caret-down fa-w-10 fa-3x"><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" class=""></path></svg>'); background-repeat: no-repeat; background-position: 95% center; background-size: 0.8em;
}
// Placeholders ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size: .9em; opacity: .65; color: $text;
} :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: .9em; opacity: .65; color: $text;
} ::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: .9em; opacity: .65; color: $text;
} :-ms-input-placeholder { /* Internet Explorer 10-11 + lt if placeholders.js */
font-size: .9em; opacity: .65; color: $text;
}
// Radio => Thanks to Materialize CSS => materializecss.com/forms.html /* Remove default Radio Buttons */ [type=“radio”]:not(:checked), [type=“radio”]:checked {
position: absolute; left: -9999px; visibility: hidden; transition: .28s ease;
}
// Labels [type=“radio”]:not(:checked) + label, [type=“radio”]:checked + label {
position: relative; padding-left: 2em; cursor: pointer; display: inline-block; height: 1.7em; line-height: 1.7em; transition: .28s ease; -khtml-user-select: none; user-select: none;
}
- type=“radio”
-
+ label:before,
- type=“radio”
-
+ label:after {
content: ''; position: absolute; left: 0; top: 0; margin: 3px; width: 1.2em; height: 1.2em; z-index: 0; transition: .28s ease;
}
/* Unchecked styles */ [type=“radio”]:not(:checked) + label:before {
transition: .28s ease; border-radius: 50%; border: 1px solid $text;
} [type=“radio”]:not(:checked) + label:after {
transition: .28s ease; border-radius: 50%; border: 1px solid $text; z-index: -1; transform: scale(0);
}
/* Checked styles */ [type=“radio”]:checked + label:before {
border-radius: 50%; border: 1px solid transparent;
} [type=“radio”]:checked + label:after {
border-radius: 50%; border: 1px solid $primary; background-color: $primary; z-index: 0; transform: scale(1.02);
}
/* Disabled style */ [type=“radio”]:disabled:not(:checked) + label:before, [type=“radio”]:disabled:checked + label:before {
background-color: transparent; border-color: $line; cursor: default;
} [type=“radio”]:disabled + label {
color: $line; cursor: default;
} [type=“radio”]:disabled:not(:checked) + label:before {
border-color: $line;
} [type=“radio”]:disabled:checked + label:after {
background-color: $line; border-color: $text;
}
// Checkbox [type=“checkbox”]:not(:checked), [type=“checkbox”]:checked {
position: absolute; left: -9999px; visibility: hidden;
}
- type=“checkbox”
-
{
// Text Label Style + label { position: relative; padding-left: 2em; cursor: pointer; display: inline-block; height: 25px; line-height: 25px; font-size: 0.9em; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; } /* checkbox aspect */ + label:before { content: ''; position: absolute; top: 0; left: 3px; width: 15px; height: 15px; z-index: 0; border: 1px solid $text; border-radius: 1px; margin-top: 4px; transition: .2s; } &:not(:checked):disabled + label:before { border: none; background-color: $line; }
}
[type=“checkbox”]:checked {
+ label:before { top: -2px; left: -2px; width: 10px; height: 18px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid $success; border-bottom: 2px solid $success; transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100%; } &:disabled + label:before { border-right: 2px solid $line; border-bottom: 2px solid $line; }
}