diff --git a/backstop.config.js b/backstop.config.js index 28043bc3ae..ccda54e95e 100644 --- a/backstop.config.js +++ b/backstop.config.js @@ -594,6 +594,17 @@ module.exports = { viewports.get('large-desktop') ] }, + { + clickSelector: '.nhsuk-header__search-input', + label: 'Header with search (focused search input)', + url: `${BASE_URL}/components/header/header-search.html`, + viewports: [ + viewports.get('mobile'), + viewports.get('tablet'), + viewports.get('desktop'), + viewports.get('large-desktop') + ] + }, { label: 'Header with account (logged in)', url: `${BASE_URL}/components/header/header-account-logged-in.html`, @@ -687,6 +698,18 @@ module.exports = { viewports.get('large-desktop') ] }, + { + clickSelector: '.nhsuk-header__search-input', + label: 'Header organisational with white header (focused search input)', + url: `${BASE_URL}/components/header/header-org-white.html`, + onReadyScript: 'playwright/onReadyResize.js', + viewports: [ + viewports.get('mobile'), + viewports.get('tablet'), + viewports.get('desktop'), + viewports.get('large-desktop') + ] + }, { label: 'Header organisational with white header, navigation', url: `${BASE_URL}/components/header/header-org-white-nav.html`, diff --git a/packages/components/header/_index.scss b/packages/components/header/_index.scss index 1582be8921..da603fb3d4 100644 --- a/packages/components/header/_index.scss +++ b/packages/components/header/_index.scss @@ -3,6 +3,8 @@ @use "../../core/settings" as *; @use "../../core/tools" as *; +$_header-item-padding: 12px; + //// /// Header component /// @@ -85,24 +87,44 @@ /// Account .nhsuk-header__account { - background: nhsuk-shade($color_nhsuk-blue, 20%); + position: relative; border-radius: $nhsuk-border-radius; flex-grow: 1; - outline: 1px solid nhsuk-shade($color_nhsuk-blue, 20%); margin-bottom: 1px; - @include nhsuk-media-query($from: tablet) { - align-self: start; - } - .nhsuk-icon__user { height: 24px; width: 24px; flex-shrink: 0; } + + &, + &::before { + background-color: nhsuk-shade($color_nhsuk-blue, 20%); + } + + // Expand header account by 1px to ensure the search + // input does not appear to be taller when inline + &::before { + content: ""; + display: block; + position: absolute; + top: -1px; + right: 0; + bottom: -1px; + left: 0; + border: 1px solid nhsuk-shade($color_nhsuk-blue, 20%); + border-radius: $nhsuk-border-radius + 1px; + } + + @include nhsuk-media-query($from: tablet) { + align-self: start; + } } .nhsuk-header__account-list { + position: relative; + z-index: 1; display: flex; flex-wrap: wrap; gap: 1px; @@ -113,14 +135,13 @@ } .nhsuk-header__account-item { - background-color: nhsuk-shade($color_nhsuk-blue, 20%); display: flex; flex-grow: 1; gap: nhsuk-spacing(2); margin: 0; outline: 1px solid $color_nhsuk-blue; overflow-wrap: anywhere; - padding: nhsuk-spacing(2) 12px; + padding: nhsuk-spacing(2) $_header-item-padding; @include nhsuk-font(16); &:nth-last-child(2) { @@ -159,11 +180,16 @@ flex-grow: 1; position: relative; z-index: 13; + @include nhsuk-print-hide; .nhsuk-icon__search { height: 28px; width: 28px; + + // Adjust optical alignment due to the handle appearing + // to push the magnifying glass circle to the top left + margin: 0 -2px -2px 0; } } @@ -171,26 +197,21 @@ display: flex; height: 100%; overflow: visible; - - @include nhsuk-media-query($until: tablet) { - position: relative; - } } -.nhsuk-header__search-input { - border: 1px solid $color_nhsuk-white; +// 1. Disable default search input appearance +.nhsuk-header__search-input.nhsuk-input { + border-color: transparent; border-radius: $nhsuk-border-radius 0 0 $nhsuk-border-radius; - font-size: $nhsuk-base-font-size; height: 40px; - padding: 0 12px; + margin-right: -$nhsuk-border-width-form-element; + padding-right: $_header-item-padding; + padding-left: $_header-item-padding - $nhsuk-border-width-form-element; width: 100%; + @include nhsuk-font-size(16); &:focus { - border: nhsuk-spacing(1) solid $nhsuk-focus-text-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; - outline: $nhsuk-focus-width solid transparent; - outline-offset: $nhsuk-focus-width; - padding: 0 9px; + z-index: 10; } &::placeholder { @@ -198,8 +219,19 @@ opacity: 1; // Fixes low contrast of placeholder text in firefox } + // Hide search input clear button (IE) + &::-ms-clear { + display: none; + } + + // Hide search input icon and cancel button (WebKit, Blink) + &::-webkit-search-decoration, + &::-webkit-search-cancel-button { + appearance: none; + } + @include nhsuk-media-query($until: tablet) { - border-radius: $nhsuk-border-radius; + font-size: inherit; } } @@ -208,18 +240,12 @@ border: 0; border-radius: 0 $nhsuk-border-radius $nhsuk-border-radius 0; color: $color_nhsuk-blue; + flex-shrink: 0; height: nhsuk-spacing(6); line-height: 1; - outline: none; margin: 0; width: 44px; - - @include nhsuk-media-query($until: tablet) { - position: absolute; - right: 0; - top: 0; - z-index: 9; - } + z-index: 9; &:hover { background-color: $color_shade_nhsuk-blue-35; @@ -235,6 +261,7 @@ &:focus { background-color: $nhsuk-focus-color; box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color; + @include nhsuk-focused-button; } } @@ -447,8 +474,15 @@ } .nhsuk-header__account, - .nhsuk-header__account-item { + .nhsuk-header__account::before { background-color: $color_nhsuk-grey-5; + } + + .nhsuk-header__account::before { + border-color: $color_nhsuk-grey-4; + } + + .nhsuk-header__account-item { outline-color: $color_nhsuk-grey-4; } @@ -456,11 +490,15 @@ @include nhsuk-link-style-no-visited-state; } - .nhsuk-header__search-input { + .nhsuk-header__search-input.nhsuk-input { border-color: $color_nhsuk-grey-3; + border-width: 1px; + margin-right: -1px; &:focus { border-color: $nhsuk-focus-text-color; + border-width: 2px; + margin-right: -2px; } } @@ -513,7 +551,7 @@ } .nhsuk-header__navigation-container { - border-top-color: $color_nhsuk-grey-5; + border-color: $color_nhsuk-grey-4; border-top-width: 1px; } diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk index 2daea6d61c..a27ec00354 100644 --- a/packages/components/header/template.njk +++ b/packages/components/header/template.njk @@ -69,7 +69,7 @@
- +