remove the distraction on hover and focus of input elements
Zach Hay made an astute report on the search form; that when the focus or hover action happened on an input or text element, (like the search box), the box slightly moves, which is a tad distracting he found. (I'll make a GIF of this late,r but I have a video recorded);
I hadn't really noticed it before, saw if other systems did it (USDS, deque) they did not... I compared our styling with theirs; and realized that I was increasing the border-width of the element
on focus and hover; USDS had used outline property instead on their input elements and that deque had changed the border-color and added a box-shadow (deque's input elements did not have a specific height); neither had this jarring motion on it;
GOV.UK was a bit more complicated for inputs: used border-radius of 0;
height (in rem); and on focus/hover, used outline.
(first off our parent theme; declares no outline outline on focus and hover actions (pseudo-classes actually) for all input and textarea elements); (no specific input types)*** just
input:focus,
textarea:focus {
outline: none;
}
https://gitlab.com/cpl/tempera/blob/d787e07e7d5ddf7ed21fb309eb5b244d7f84cec5/style.css#L448
then, at https://gitlab.com/cpl/tempera/blob/d787e07e7d5ddf7ed21fb309eb5b244d7f84cec5/includes/custom-styles.php#L202 parent theme declares the background color.
So, initially, I just changed the hover/focus pseudo-classes for input and textarea to use outline property instead of border done in tempera-nocopyrt@4f1882ac
BUT: A] I noticed there were thickness inconsistency between the search box and and other input elements;
and I mentioned in this in the cleveland-tech fed channel; and led me down a rabbit-hole for a couple hours to try to see what was the issue was; (I should have stopped myself earlier on)
but https://codepen.io/gsgarces/pen/NWWoXKK had made a better test case than I did and observed that when the height property is NOT set for an input selector then jiggling action will occur (as shown in TC-issue-159-original.gif) when the user hovers or focuses on the element. (using the "min-height" property does not work )