Browse Source

feat: add search icon to accessible autocomplete, make hint text aligned correctly

pull/954/head
natdeanlewissoftwire 3 years ago
parent
commit
609bc7cd96
  1. 10
      app/frontend/styles/_accessible-autocomplete.scss

10
app/frontend/styles/_accessible-autocomplete.scss

@ -5,12 +5,22 @@
.autocomplete__input {
font-family: inherit;
background-image: url("data:image/svg+xml,%3Csvg class='app-search__icon' width='20' height='20' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3E%3Ccircle cx='12.0161' cy='11.0161' r='8.51613' stroke='currentColor' stroke-width='3'%3E%3C/circle%3E%3Cline x1='17.8668' y1='17.3587' x2='26.4475' y2='25.9393' stroke='currentColor' stroke-width='3'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1em 1em;
background-position: 7px center;
padding-left: govuk-spacing(6) !important;
}
.autocomplete__option__append {
font-weight: bold;
}
.autocomplete__hint {
font-family: inherit;
padding-left: govuk-spacing(6) !important;
}
.autocomplete__option__hint {
display: block;
color: $govuk-secondary-text-colour;

Loading…
Cancel
Save