Ensure focused search input in header renders consistently across breakpoints #1317
Conversation
There was a problem hiding this comment.
Looks good. Thanks for the extra tweaks
Do we need to review against .nhsuk-input for anything else?
E.g. The type scale aware nhsuk-font(19) or appearance reset
.nhsuk-input {
-moz-appearance: none; // [1]
-webkit-appearance: none; // [1]
appearance: none; // [1]
border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color; // [2]
border-radius: 0;
box-sizing: border-box;
min-height: 40px;
margin-top: 0;
padding: nhsuk-spacing(1);
width: 100%;
@include nhsuk-font(19);
&:focus {
@include nhsuk-focused-input;
}
}
|
@paulrobertlloyd Did you look at the grey border that probably needs turning off? 
|
paulrobertlloyd
force-pushed
the
header-search-fixes
branch
from
e56321c to
2b1dd38
Compare
|
@colinrotherham Have added |
paulrobertlloyd
force-pushed
the
header-search-fixes
branch
from
2b1dd38 to
bfc7000
Compare
paulrobertlloyd
force-pushed
the
header-search-fixes
branch
from
bfc7000 to
944fad0
Compare
colinrotherham
force-pushed
the
header-search-fixes
branch
from
dd034d3 to
521458d
Compare
| @@ -552,7 +552,7 @@ $_header-item-padding: 12px; | |||
| } | |||
|
|
|||
| .nhsuk-header__navigation-container { | |||
| border-top-color: $color_nhsuk-grey-5; | |||
| border-color: $color_nhsuk-grey-4; | |||
There was a problem hiding this comment.
@paulrobertlloyd On the blue nav this border colour has much stronger contrast
Are you happy if we do the same for the white one—picking the darker grey?
| // 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; | ||
| } |
There was a problem hiding this comment.
@paulrobertlloyd I've switched to ::before with a regular border here
Testing in older Safari showed that outline: 1px… didn't follow border-radius 😭
We also only need to offset the vertical height (making it appear taller, but not wider)
| // Adjust optical alignment due to the handle appearing | ||
| // to push the magnifying glass circle to the top left | ||
| margin: 0 -2px -2px 0; |
There was a problem hiding this comment.
Hope this is alright?
Although perfectly aligned, the magnifying glass seemed pushed into the top left
Similarly we had a 2px transparent border on the left which needed to be offset back to 12px
| padding-right: $_header-item-padding; | ||
| padding-left: $_header-item-padding - $nhsuk-border-width-form-element; |
There was a problem hiding this comment.
-
✅ Right padding was good
We've already used-2pxmargin to hide the 2px transparent border -
❌ Left padding appeared 2px too wide (14px not 12px)
For comparison see screenshot in comment above
| // 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; | ||
| } | ||
|
|
There was a problem hiding this comment.
When text is entered we should remove the "clear" icon
Although the icon wasn't visible by default, space was still reserved for it
colinrotherham
force-pushed
the
header-search-fixes
branch
from
521458d to
6589c0b
Compare
|
|
Thanks so much for the extra polish @colinrotherham! |
Fixes #1058 (comment)
Description
@640px:
@641px
Bit less CSS too, so you know it’s right 😉
Checklist