mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 18:57:04 +00:00
326e11dfbf
We have many styles related to the layout and visibility of search that are only useful in the context of the main header. Since many of these elements have classes that will also be in the sticky header, we should scope these rules to the main header so that we avoid an uphill battle of styles trying to override eachother. Additional changes: * We previously had a mix of #p-search and .vector-search-box selectors for the same element in the CSS. Header.less now only uses .vector-searchbox to avoid specificity wars. * Removed nearly all of the #p-search rules previously found on L147 - L167 in screen.less after observing nothing relatively bad happening when they were removed. Bug: T289724 Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
126 lines
4.5 KiB
Plaintext
126 lines
4.5 KiB
Plaintext
@import '../../common/variables.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.
|
|
.vector-search-box {
|
|
// Use Vector's base font-size, as this is a component outside of `.vector-body`.
|
|
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;
|
|
}
|
|
|
|
// Only apply the following WVUI-related rules to clients who have js enabled.
|
|
// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseWvuiSearch 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;
|
|
}
|
|
|
|
// Move & resize search icon to match WVUI.
|
|
#searchButton,
|
|
#mw-searchButton {
|
|
// T270202: Act like a an inert element instead of a submit button before
|
|
// WVUI loads to discourage people clicking on it since it is a submit
|
|
// button styled to look like WVUI's inert start icon. Note, ideally these
|
|
// submit buttons should be changed to inert elements like span to be
|
|
// semantically correct.
|
|
pointer-events: none;
|
|
// Override the default right & left position of the icon.
|
|
right: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
// Accounts for the 1px input border. Derived from
|
|
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/input/Input.vue#163
|
|
left: 1px;
|
|
// Increase size to match WVUI.
|
|
width: @size-search-figure;
|
|
}
|
|
|
|
// 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 );
|
|
}
|
|
|
|
// FIXME: .p-search--show-thumbnail selector is for cached HTML relating to T276566.
|
|
.p-search--show-thumbnail,
|
|
.vector-search-box-show-thumbnail {
|
|
// Recreate WVUI expanding input.
|
|
#searchInput:focus {
|
|
position: relative;
|
|
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
|
|
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
|
|
width: ~'calc( 100% + @{size-search-expand} )';
|
|
left: ~'calc( -1 * @{size-search-expand} )';
|
|
}
|
|
|
|
// Reposition search icon for expanded input.
|
|
#searchInput:focus ~ #searchButton,
|
|
#searchInput:focus ~ #mw-searchButton {
|
|
// Derived from
|
|
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
|
|
// (12px of space between the border and the icon) with 1px to account for the focused input border.
|
|
@space-icon-start: 12px;
|
|
left: -@size-search-expand + @space-icon-start + @border-width-base;
|
|
}
|
|
|
|
// Update search loader to match width and position of WVUI expanding input.
|
|
#simpleSearch.search-form__loader:after {
|
|
width: ~'calc( 100% + @{size-search-expand} )';
|
|
left: ~'calc( -1 * @{size-search-expand} )';
|
|
padding-left: @size-search-expand;
|
|
}
|
|
}
|
|
}
|