70 lines
2.2 KiB
Plaintext
70 lines
2.2 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`.
|
|
*/
|
|
|
|
// TODO: Parent class can be removed when $wgVectorUseCoreSearch is no longer supported.
|
|
.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: 2.57142857em;
|
|
|
|
// Derived from @size-base in WVUI
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#7
|
|
@size-base: 2.28571429em;
|
|
|
|
#searchform {
|
|
// compensates for the 14px base font size in Vector.
|
|
// Affects both server-version and WVUI.
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
#searchInput {
|
|
padding-left: @size-search-figure;
|
|
height: @size-base;
|
|
font-size: inherit;
|
|
// Recreate WVUI expanding input.
|
|
&:focus {
|
|
position: relative;
|
|
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation
|
|
padding-left: ~'calc(12px + 2.57142857em + 12px)';
|
|
width: ~'calc( 100% + 24px )';
|
|
left: ~'calc( -1 * 24px )';
|
|
}
|
|
}
|
|
|
|
// Move & resize search icon to match WVUI.
|
|
#searchButton {
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
top: 0;
|
|
// Override the default right & left position of the icon.
|
|
right: auto;
|
|
left: 0;
|
|
// Increase size to match WVUI.
|
|
width: @size-search-figure;
|
|
min-height: @size-base;
|
|
background-size: 20px auto;
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
font-size: inherit;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// WVUI override. Prevents the WVUI input border from animating
|
|
// when it gets inserted into the DOM while being focused.
|
|
.wvui-input__input:not( [ disabled ] ) {
|
|
.transition(none);
|
|
}
|
|
}
|