mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-27 04:07:44 +00:00
595870baeb
Following Design Style Guide components sizing and Alex' feedback on task. Changing applied styles scope to non Vue.js enhanced, modern-only style of search component as well, in order to have clean appearance and transforming disruption free. Also changing em static values to LESS calculations for more developer friendliness and change background-size to be `em` as well for user-set typographic zoom preference ability. Bug: T269959 Change-Id: I157712721621344171a32a8887a5e20cc16cae0d
86 lines
2.8 KiB
Plaintext
86 lines
2.8 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 {
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
font-size: inherit;
|
|
}
|
|
|
|
#searchInput {
|
|
height: @size-base;
|
|
}
|
|
|
|
#searchButton {
|
|
background-size: @background-size-x-search-button auto;
|
|
min-height: @min-size-search-button;
|
|
}
|
|
|
|
// 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: unit( 36px / @font-size-browser / @font-size-base, em );
|
|
|
|
#searchInput {
|
|
padding-left: @size-search-figure;
|
|
|
|
// 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 {
|
|
// 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 );
|
|
}
|
|
}
|