diff --git a/app/assets/stylesheets/_autocomplete.scss b/app/assets/stylesheets/_autocomplete.scss new file mode 100644 index 000000000..585ba109c --- /dev/null +++ b/app/assets/stylesheets/_autocomplete.scss @@ -0,0 +1,44 @@ +// Ensure the autocomplete uses the correct typeface +.autocomplete__wrapper { + font-family: $govuk-font-family; +} + +.autocomplete__input { + font-family: inherit; +} + +// Style the autocomplete if there’s an error +.nhsuk-form-group--error { + .autocomplete__input { + border-color: $govuk-error-colour; + } + + .autocomplete__input--focused { + border-color: $govuk-input-border-colour; + } +} + +.autocomplete__dropdown-arrow-down { + // Ensure dropdown arrow can be clicked + // https://github.com/alphagov/accessible-autocomplete/issues/202 + pointer-events: none; + // Ensure dropdown arrow can be seen + z-index: 0; +} + +.autocomplete__input { + background-color: $color_nhsuk-white; +} + +.autocomplete__option { + margin-bottom: 0; +} + +.autocomplete__option-hint { + color: $nhsuk-secondary-text-color; + + .autocomplete__option:hover &, + .autocomplete__option:focus & { + color: $color_nhsuk-grey-5; + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8e13efa63..579107a62 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -33,6 +33,7 @@ $color_app-dark-orange: darken( // Application components @import "action_list"; +@import "autocomplete"; @import "button"; @import "button-group"; @import "card";