// Forms // ==========================================================================
// Contents: // // 1. Helpers // 2. Form wrappers // 3. Form labels // 4. Form hints // 5. Form controls // 6. Form control widths // 7. Browser accessibility fixes
// 1. Helpers // ==========================================================================
// Fieldset is used to group more than one .form-group fieldset {
@extend %contain-floats; width: 100%;
}
// Hack to let legends or elements within legends have margins in webkit browsers legend {
overflow: hidden;
}
// Fix left hand gap in IE7 and below @include ie-lte(7) {
legend { margin-left: -7px; }
}
// Remove margin under textarea in Chrome and FF textarea {
display: block;
}
// 2. Form wrappers // ==========================================================================
.form-section, .form-group {
@extend %contain-floats; @include box-sizing(border-box);
}
// Form section is used to wrap .form-group and has twice its margin .form-section {
margin-bottom: $gutter; @include media(tablet) { margin-bottom: $gutter * 2; }
}
// Form group is used to wrap label and input pairs .form-group {
margin-bottom: $gutter-half; @include media(tablet) { margin-bottom: $gutter; }
}
// Form group related is used to reduce the space between label and input pairs .form-group-related {
margin-bottom: 10px; @include media(tablet) { margin-bottom: 20px; }
}
// Form group compound is used to reduce the space between label and input pairs .form-group-compound {
margin-bottom: 10px;
}
// 3. Form labels // ==========================================================================
// Form labels, or for legends styled to look like labels // TODO: Amend so there is only one label style .form-label, .form-label-bold {
display: block; color: $text-colour; padding-bottom: 2px;
}
.form-label {
@include core-19;
}
.form-label-bold {
@include bold-19;
}
// Used for the 'or' in between block label options .form-block {
float: left; clear: left; margin-top: -5px; margin-bottom: 5px; @include media(tablet) { margin-top: 0; margin-bottom: 10px; }
}
// 4. Form hints // ==========================================================================
// Form hints and example text are light grey and sit above a form control .form-hint {
@include core-19; display: block; color: $secondary-text-colour; font-weight: normal; margin-top: -2px; padding-bottom: 2px;
}
.form-label .form-hint, .form-label-bold .form-hint {
margin-top: 0; padding-bottom: 0;
}
// 5. Form controls // ==========================================================================
// By default, form controls are 50% width for desktop, // and 100% width for mobile .form-control {
@include box-sizing(border-box); @include core-19; width: 100%; padding: 5px 4px 4px; // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) // as background-color and color need to always be set together, color should not be set either border: 2px solid $text-colour; // TODO: Remove 50% width set for tablet and up // !! BREAKING CHANGE !! @include media(tablet) { width: 50%; }
}
// Allow a qualifying element, remove rounded corners from inputs and textareas // scss-lint:disable QualifyingElement input.form-control, textarea.form-control {
// Disable inner shadow and remove rounded corners -webkit-appearance: none; border-radius: 0;
}
textarea.form-control {
// Disable opacity and background image for Firefox opacity: 1; background-image: none;
} // scss-lint:enable QualifyingElement
// 6. Form control widths // ==========================================================================
// TODO: Update these // Form control widths
.form-control-3-4 {
width: 100%; @include media(tablet) { width: 75%; }
}
.form-control-2-3 {
width: 100%; @include media(tablet) { width: 66.66%; }
}
.form-control-1-2 {
width: 100%; @include media(tablet) { width: 50%; }
}
.form-control-1-3 {
width: 100%; @include media(tablet) { width: 33.33%; }
}
.form-control-1-4 {
width: 100%; @include media(tablet) { width: 25%; }
}
.form-control-1-8 {
width: 100%; @include media(tablet) { width: 12.5%; }
}
// 7. Browser accessibility fixes // ==========================================================================
option:active, option:checked, select:focus::-ms-value {
color: $white; background-color: $govuk-blue;
}