$form-border-color: $base-border-color; $form-border-color-hover: darken($base-border-color, 10); $form-border-color-focus: $base-accent-color; $form-border-radius: $base-border-radius; $form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06); $form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7); $form-font-size: $base-font-size; $form-font-family: $base-font-family;
fieldset {
background: lighten($base-border-color, 10); border: 1px solid $base-border-color; margin: 0 0 ($base-line-height / 2) 0; padding: $base-line-height;
}
input, label, select {
display: block; font-family: $form-font-family; font-size: $form-font-size;
}
label {
font-weight: bold; margin-bottom: $base-line-height / 4; &.required:after { content: "*"; } abbr { display: none; }
}
textarea, #{$all-text-inputs}, select {
@include box-sizing(border-box); @include transition(border-color); background-color: white; border-radius: $form-border-radius; border: 1px solid $form-border-color; box-shadow: $form-box-shadow; font-family: $form-font-family; font-size: $form-font-size; margin-bottom: $base-line-height / 2; padding: ($base-line-height / 3) ($base-line-height / 3); width: 100%; &:hover { border-color: $form-border-color-hover; } &:focus { border-color: $form-border-color-focus; box-shadow: $form-box-shadow-focus; outline: none; }
}
textarea {
resize: vertical;
}
input {
@include appearance(none);
}
display: inline; margin-right: $base-line-height / 4;
}
input {
width: 100%;
}
select {
width: auto; max-width: 100%; margin-bottom: $base-line-height;
}
button, input {
@extend %button; @include appearance(none); cursor: pointer; user-select: none; vertical-align: middle; white-space: nowrap;
}