mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 02:37:05 +00:00
71 lines
1.6 KiB
Plaintext
71 lines
1.6 KiB
Plaintext
.mw-header {
|
|
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
|
.flex-display();
|
|
flex-wrap: nowrap;
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
|
|
.vector-header-start,
|
|
.vector-header-end {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.vector-header-end {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.search-toggle {
|
|
// At lower resolutions the search input is hidden and a toggle is shown
|
|
display: inline-flex;
|
|
float: right;
|
|
// Ensures the button has a font size of 16px
|
|
font-size: unit( 16 / @font-size-browser, rem );
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
// Override .cdx-button styles
|
|
display: none !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
}
|
|
|
|
.vector-typeahead-search-container {
|
|
display: none;
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
/**
|
|
* Toggles the visibility of the search box at lower resolutions.
|
|
*/
|
|
&.vector-header-search-toggled {
|
|
.vector-header-start,
|
|
.search-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.vector-typeahead-search-container {
|
|
display: block;
|
|
// Override default max width at lower resolutions
|
|
max-width: none;
|
|
}
|
|
|
|
.vector-search-box {
|
|
// T284242#7206507: Widen the suggestion results to the edge of the search
|
|
// button at small resolutions.
|
|
position: relative;
|
|
}
|
|
|
|
// Since the end button's corner is now right above the menu's corner, don't use a
|
|
// rounded corner here (T310525)
|
|
.cdx-typeahead-search--expanded .cdx-search-input__end-button {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|