// scss-lint:disable QualifyingElement
// Inline icons courtsey of Dan Klammer // Released under the MIT license. // danklammer.com/bytesize-icons/
form {
text-decoration: none;
}
.form-group:not(:last-child) {
margin-bottom: 1rem;
}
.form-input {
position: relative; display: block; max-width: 100%; padding: .7rem .8rem; font-size: $body-font-size; line-height: 1.6rem; color: $black; background: $white; background-image: none; border: .1rem solid $form-border-color; border-radius: .3rem; outline: 0; appearance: none; &:focus, &:hover { border-color: $primary-info; }
}
.form-label {
display: block; margin-bottom: .5rem; line-height: $base-line-height;
}
.form-select {
padding: .5rem .8rem; font-size: $body-font-size; vertical-align: middle; border: .1rem solid $form-border-color; border-radius: .3rem; outline: 0; appearance: none; &:not([multiple]) { padding-right: 2.4rem; background: $white url('data:image/svg+xml;utf8,#{$form-select-icon}') no-repeat right .75rem center / .8rem 1rem; } &:focus, &:hover { border-color: $primary-info; }
}
.form-checkbox, .form-radio, .form-switch {
input { display: none; }
}
.form-checkbox, .form-radio {
position: relative; display: inline-block; padding: .4rem .5rem; line-height: 1.8rem; cursor: pointer; .form-icon { position: relative; top: .08rem; left: -.5rem; display: inline-block; width: 1.4rem; height: 1.4rem; font-size: 1.4rem; line-height: 2.4rem; vertical-align: top; border: .1rem solid $form-border-color; outline: none; transition: all .15s ease; } &:hover .form-icon { border-color: darken($form-border-color, 10%); } input { &:focus + .form-icon { border-color: $primary-info; } &:checked + .form-icon { background: $primary-info; border-color: $primary-info; } &:active + .form-icon { background: lighten($form-border-color, 5%); } &:active:checked + .form-icon { background: lighten($primary-info, 10%); border-color: lighten($primary-info, 10%); } }
}
.form-checkbox {
.form-icon { border-radius: .2rem; } input { &:checked + .form-icon { &::after { position: relative; top: -35%; padding-right: 1.4rem; content: ""; background: url('data:image/svg+xml;utf8,#{$form-checkbox-icon}') no-repeat .8rem / .8rem; background-position: center; } } }
} .form-radio {
.form-icon { border-radius: 1rem; } input:checked + .form-icon { &::after { position: relative; top: -34%; padding-right: 1.4rem; content: ""; background: url('data:image/svg+xml;utf8,#{$form-radio-icon}') no-repeat .8rem / .8rem; background-position: center; } }
}
.form-switch {
position: relative; display: inline-block; padding: .3rem 2rem .3rem .5rem; line-height: 2rem; cursor: pointer; .form-icon { position: relative; top: 0; left: -.5rem; display: inline-block; width: 2.8rem; height: 1.6rem; padding: 0; line-height: 2.6rem; vertical-align: top; background: $form-border-color; border: .125rem solid $form-border-color; border-radius: .9rem; outline: none; &::after { position: relative; top: 0; left: 0; display: block; width: 1.6rem; height: 1.6rem; content: ""; background: $white; border-radius: .8rem; transition: left .15s ease; } } input { &:checked + .form-icon { background: $primary-info; border-color: $primary-info; &::after { left: 1.2rem; } } &:active + .form-icon { &::after { background: lighten($form-border-color, 20%); } } }
}
.form-file::-webkit-file-upload-button {
visibility: hidden;
}
.form-file {
width: 100%;
}
.form-file::before {
display: inline-block; padding: 5px 8px; font-size: .8rem; font-weight: bold; color: $body-light-color; white-space: nowrap; cursor: pointer; content: "Select a file"; user-select: none; border: 1px solid $form-border-color; border-radius: 3px; outline: none;
}
.form-file:hover::before {
border-color: $primary-info;
}
.form-file:focus {
outline: none;
}
.form-file:active::before {
border-color: darken($primary-info, 10%);
}
input::-webkit-slider-thumb {
width: 15px; height: 15px; margin-top: -5px; cursor: pointer; background: #fff; border: 1px solid $form-border-color; border-radius: 1rem; appearance: none;
}
input::-webkit-slider-runnable-track {
height: 5px; background: lighten($form-border-color, 10%); border: 0; border-radius: 3px;
}
input:focus::-webkit-slider-runnable-track {
background: $form-border-color;
}