mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
search: Use relative sizing for the search icon
Only do this when JS is enabled and the Vue search (Codex TypeaheadSearch) is going to be loaded. Without this, when viewing Vector with an increased browser font size, Codex's icon scales up but ours doesn't, causing the icon to grow and jump when Codex loads. Set the icon's size in relative units (em instead of px), and change the background position so it stays in the same place. Change-Id: Ie0b33797f9da75dc758a8afbe58eb004d90f3776
This commit is contained in:
parent
61901f8b2d
commit
3541a9a28f
|
@ -59,6 +59,10 @@
|
||||||
// Derived from text input start icon padding in Codex.
|
// Derived from text input start icon padding in Codex.
|
||||||
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/text-input/TextInput.vue#257
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/text-input/TextInput.vue#257
|
||||||
@padding-left-start-icon: 36px;
|
@padding-left-start-icon: 36px;
|
||||||
|
// Derived from the @size-icon-medium token in Codex. 14px is the base font size in Vector.
|
||||||
|
@size-icon-medium: unit( 20 / 14, em );
|
||||||
|
// Derived from icon positioning in Codex. This is essentially (@padding-left-start-icon - @size-icon-medium)/2
|
||||||
|
@position-left-icon: 8px;
|
||||||
|
|
||||||
.vector-typeahead-search {
|
.vector-typeahead-search {
|
||||||
// Hide the button, only show it on hover or when the input or the button itself is focused
|
// Hide the button, only show it on hover or when the input or the button itself is focused
|
||||||
|
@ -144,6 +148,12 @@
|
||||||
width: @padding-left-start-icon;
|
width: @padding-left-start-icon;
|
||||||
// Set opacity to match icon color from Codex (0.51 approximates #72777d)
|
// Set opacity to match icon color from Codex (0.51 approximates #72777d)
|
||||||
opacity: @opacity-base--disabled;
|
opacity: @opacity-base--disabled;
|
||||||
|
// Use relative sizing for the icon
|
||||||
|
background-size: @size-icon-medium auto;
|
||||||
|
// Make sure the icon is positioned consistently with Codex; if we don't do this, it'll
|
||||||
|
// be centered which will be different from Codex's positioning if the text size zoom
|
||||||
|
// is not 100%
|
||||||
|
background-position-x: @position-left-icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vector-search-box-input:focus ~ .searchButton {
|
.vector-search-box-input:focus ~ .searchButton {
|
||||||
|
|
Loading…
Reference in a new issue