141 lines
5.3 KiB
Plaintext
141 lines
5.3 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
|
|
// FIXME: remove ID selectors when cache has cleared.
|
|
#searchInput,
|
|
#searchButton,
|
|
#mw-searchButton,
|
|
.vector-search-box-vue .vector-search-box-input,
|
|
.vector-search-box-vue .searchButton {
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
font-size: inherit;
|
|
}
|
|
|
|
// FIXME: remove #searchInput selector when cache has cleared.
|
|
.vector-search-box-vue .vector-search-box-input,
|
|
#searchInput {
|
|
height: @size-base;
|
|
}
|
|
|
|
// FIXME: Remove searchButton when cache has cleared.
|
|
.vector-search-box-vue .searchButton,
|
|
#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
|
|
// OR .vector-search-box-vue is in cached HTML.
|
|
.client-js .skin-vector-search-vue,
|
|
.client-js .vector-search-box-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;
|
|
}
|
|
|
|
.wvui-typeahead-search__suggestions li {
|
|
// Remove margin-bottom on li elements that is applied by mediawiki.skinning/elements.css.
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// FIXME: Remove #searchInput selector when cache has cleared.
|
|
.vector-search-box-input,
|
|
#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 {
|
|
// 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.
|
|
// FIXME: Remove #searchInput selector when cache has cleared.
|
|
.vector-search-box-input:focus,
|
|
#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.
|
|
// FIXME: Remove #searchInput selectors when cache has cleared.
|
|
.vector-search-box-input:focus ~ .searchButton,
|
|
#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.
|
|
// FIXME: Remove #simpleSearch selector when cache has cleared.
|
|
#simpleSearch.search-form__loader:after,
|
|
.vector-search-box-inner.search-form__loader:after {
|
|
width: ~'calc( 100% + @{size-search-expand} )';
|
|
left: ~'calc( -1 * @{size-search-expand} )';
|
|
padding-left: @size-search-expand;
|
|
}
|
|
}
|
|
}
|