// Form validation // ==========================================================================
// Use .form-group-error to add a red border to the left of a .form-group .form-group-error {
margin-right: 15px; border-left: 4px solid $error-colour; padding-left: 10px; @include media(tablet) { border-left: 5px solid $error-colour; padding-left: $gutter-half; }
}
// Use .form-control-error to add a red border to .form-control .form-control-error {
border: 4px solid $error-colour;
}
// Error messages should be red and bold .error-message {
@include bold-19; color: $error-colour; display: block; clear: both; margin: 0; padding: 2px 0;
}
.form-label .error-message, .form-label-bold .error-message {
padding-top: 4px; padding-bottom: 0;
}
// Summary of multiple error messages .error-summary {
// Error summary has a border on all sides border: 4px solid $error-colour; margin-top: $gutter-half; margin-bottom: $gutter-half; padding: $gutter-half 10px; @include media(tablet) { border: 5px solid $error-colour; margin-top: $gutter; margin-bottom: $gutter; padding: $gutter-two-thirds $gutter-half $gutter-half; } @include ie-lte(6) { zoom: 1; } // Use the GOV.UK outline focus style &:focus { outline: 3px solid $focus-colour; } .error-summary-heading { margin-top: 0; } p { margin-bottom: 10px; } .error-summary-list { padding-left: 0; li { @include media(tablet) { margin-bottom: 5px; } } a { color: $error-colour; font-weight: bold; text-decoration: underline; } }
}