mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 09:55:42 +00:00
72120a36a0
Before Vue/WVUI lazy loads, we have intermediate search components that are rendered on the server and that need to be styled based on the `autoExpandWidth` prop passed to the search component. This commit refactors VueEnhancedSearchBox to use this class if present. Additionaly: * Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302 * Replace `vector-search-box-show-thumbnail` class with `.vector-search-box-auto-expand-width` class in Header.less now that the class has been cached in the HTML. Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b Bug: T297531 Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
93 lines
2.7 KiB
Plaintext
93 lines
2.7 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
|
@padding-vertical-header: 0.125em;
|
|
@margin-top-header: 0.625em;
|
|
@margin-bottom-header: 0.3125em;
|
|
|
|
// Logo sizes per specification in T245190.
|
|
@height-logo-icon: 3.125em;
|
|
|
|
// Canonical version of spec: T270202
|
|
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
|
|
@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
|
|
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
|
|
|
|
.mw-header {
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-height: @height-logo-icon;
|
|
margin: @margin-top-header 0 @margin-bottom-header;
|
|
padding: @padding-vertical-header 0;
|
|
// Vertical centering of header elements (IE>=11), requires flex.
|
|
// Non-flex fallback for IE<=9: float rule on the child elements.
|
|
.flex-display();
|
|
flex-wrap: nowrap;
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
|
|
.vector-search-box {
|
|
float: left;
|
|
z-index: @z-index-menu;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
@margin-start-search: 40px;
|
|
|
|
.vector-search-box {
|
|
margin-left: unit( @margin-start-search / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
|
|
margin-right: @margin-end-search;
|
|
|
|
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
|
width: 13.2em;
|
|
// Support: Modern browsers, responsive width.
|
|
width: 20vw;
|
|
max-width: 100%;
|
|
min-width: @min-width-search-desktop;
|
|
flex-basis: @min-width-search;
|
|
|
|
> div {
|
|
max-width: @max-width-search;
|
|
}
|
|
|
|
&.vector-search-box-auto-expand-width {
|
|
margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em
|
|
|
|
> div {
|
|
max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggles the visibility of the search box at lower resolutions.
|
|
*/
|
|
@media ( max-width: @width-breakpoint-desktop ) {
|
|
&.vector-header-search-toggled {
|
|
#mw-sidebar-button,
|
|
.mw-logo,
|
|
.search-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.vector-search-box-collapses > div {
|
|
display: block;
|
|
}
|
|
|
|
.vector-search-box {
|
|
// T284242#7206507: Widen the suggestion results to the edge of the search
|
|
// button at small resolutions.
|
|
position: relative;
|
|
margin-left: @padding-horizontal-tabs;
|
|
margin-right: @margin-end-search;
|
|
}
|
|
|
|
.wvui-typeahead-search__wrapper {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
}
|