mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 11:58:44 +00:00
0fdd4a99ac
`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.
This commit:
* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".
* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.
* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.
[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)
Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
103 lines
3.4 KiB
Plaintext
103 lines
3.4 KiB
Plaintext
@import 'SearchBox.less';
|
|
|
|
/**
|
|
* Minimal styling for initial no-JS server-rendered
|
|
* search form, which gets replaced by WVUI on focus.
|
|
* Most values are hard-coded since they aim to
|
|
* mimic WVUI-specific variables and disable the
|
|
* ResourceLoader LESS transformation of `calc`.
|
|
*/
|
|
|
|
// Derived from @size-base in WVUI
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#7
|
|
@size-base: unit( 32px / @font-size-browser / @font-size-base, em );
|
|
|
|
@min-size-search-button: 30px;
|
|
@background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em );
|
|
|
|
// Search container
|
|
// We have to put those styles outside `.skin-vector-search-vue`,
|
|
// as we can't address no-JS modern and Vue enhanced otherwise.
|
|
#p-search {
|
|
// Use Vector's base font-size, as this is a component outside of `.mw-body-content`.
|
|
font-size: @font-size-base;
|
|
// Support IE 9-11, Trident cuts values 2 digits after decimal point.
|
|
// `calc` enables to set correct calculation in place again. See T102364.
|
|
font-size: @font-size-base--trident-hack;
|
|
}
|
|
|
|
// Typeahead search elements
|
|
#searchInput,
|
|
#searchButton,
|
|
#mw-searchButton {
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
font-size: inherit;
|
|
}
|
|
|
|
#searchInput {
|
|
height: @size-base;
|
|
}
|
|
|
|
#searchButton,
|
|
#mw-searchButton {
|
|
background-size: @background-size-x-search-button auto;
|
|
min-height: @min-size-search-button;
|
|
}
|
|
|
|
// Only apply the following WVUI-related rules to clients who have js enabled.
|
|
// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseCoreSearch is no longer supported.
|
|
.client-js .skin-vector-search-vue {
|
|
// Derived from @size-search-figure in WVUI
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21
|
|
@size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em );
|
|
|
|
.wvui-typeahead-search__suggestion,
|
|
.wvui-typeahead-search__suggestions__footer {
|
|
// Remove link underline on hover that is applied by mediawiki.skinning/elements.css.
|
|
text-decoration: none;
|
|
}
|
|
|
|
#searchform-suggestions li {
|
|
// Remove margin-bottom on li elements that is applied by mediawiki.skinning/elements.css.
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#searchInput {
|
|
padding-left: @size-search-figure;
|
|
// Derived from @padding-input-text in WVUI's Input component.
|
|
padding-right: 8px;
|
|
|
|
// Recreate WVUI expanding input.
|
|
&:focus {
|
|
position: relative;
|
|
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
|
|
padding-left: ~'calc( 12px + @{size-search-figure} + 12px )';
|
|
width: ~'calc( 100% + 24px )';
|
|
left: ~'calc( -1 * 24px )';
|
|
}
|
|
}
|
|
|
|
// Move & resize search icon to match WVUI.
|
|
#searchButton,
|
|
#mw-searchButton {
|
|
// Override the default right & left position of the icon.
|
|
right: auto;
|
|
left: 0;
|
|
// Increase size to match WVUI.
|
|
width: @size-search-figure;
|
|
}
|
|
|
|
// Reposition search icon for expanded input.
|
|
#searchInput:focus ~ #searchButton {
|
|
// Derived from
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/components/typeahead-search/TypeaheadSearch.vue#610
|
|
left: -12px;
|
|
}
|
|
|
|
// Reset WVUI. Prevents the input border from animating
|
|
// when it gets inserted into the DOM while being focused.
|
|
.wvui-input__input:not( [ disabled ] ) {
|
|
.transition( none );
|
|
}
|
|
}
|