Scale server-rendered search box with browser font size

The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
This commit is contained in:
Nicholas Ray 2023-01-13 13:49:27 -07:00
parent ac87bd6c1b
commit 2b397d05d2
2 changed files with 8 additions and 3 deletions

View file

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "11.9kB"
"maxSize": "12 kB"
},
{
"resourceModule": "skins.vector.legacy.js",

View file

@ -12,7 +12,7 @@
@size-base: 32px;
@min-size-search-button: 30px;
@background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em );
@background-size-x-search-button: 20px;
// Search container
// We have to put those styles outside `.skin-vector-search-vue`,
@ -39,7 +39,12 @@
}
.vector-search-box-vue .vector-search-box-input {
height: @size-base;
height: auto;
// The following is copied directly from Codex.
min-height: @size-base;
line-height: 1.4285714;
padding-top: 4px;
padding-bottom: 4px;
}
.vector-search-box-vue .searchButton {