wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 17:40:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

search: Use relative sizing for the search icon

Browse source 
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:
Roan Kattouw 2023-01-26 15:36:58 -08:00 committed by Catrope
parent 61901f8b2d
commit 3541a9a28f
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View file

@ -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 {