mediawiki-skins-Vector/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
bwang b6e7b5e880 Fix sticky header searchbox width and misc searchbox CSS cleanup
Bug: T310366
Change-Id: Id403f818b19747e3279df3112d93301f31323f9d
2022-06-14 15:58:53 -05:00

136 lines
5.1 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;
// If this is a flex item, make sure it grows into available space.
flex-grow: 1;
> div {
max-width: @max-width-search;
}
}
// Typeahead search elements
.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;
}
.vector-search-box-vue .vector-search-box-input {
height: @size-base;
}
.vector-search-box-vue .searchButton {
background-size: @background-size-x-search-button auto;
}
// Only apply the following WVUI-related rules to clients who have js enabled.
.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;
}
.vector-search-box-input {
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: @border-width-base;
// 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;
}
&.vector-search-box-show-thumbnail {
> div {
// Ensure the input + search button = 500px when unfocused and `auto-expand-width` enabled (i.e. search in header)
// Also increases the width of the sticky header search, which has `auto-expand-width` disabled
max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em
}
&.vector-search-box-auto-expand-width .searchButton {
// Accounts for the margin that allocates space for the input expanding and
// 1px input border.
left: @size-search-expand + @border-width-base;
}
&.vector-search-box-auto-expand-width .vector-search-box-input {
margin-left: @size-search-expand;
width: ~'calc( 100% - @{size-search-expand} )';
}
// Recreate WVUI expanding input.
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input,
&.vector-search-box-auto-expand-width .vector-search-box-input:focus {
margin-left: 0;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
width: 100%;
}
// Reposition search icon for expanded input.
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input ~ .searchButton,
&.vector-search-box-auto-expand-width .vector-search-box-input:focus ~ .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: @size-search-expand / 2;
left: @space-icon-start + @border-width-base;
}
}
}