mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 12:09:30 +00:00
e3d2ab5031
In preparation for enabling responsive Vector on Wikifunctions, we lower the support threshold to 320px for Vector. Minor adjustments are made to the header to make it use two lines at lower resolutions. Fixes to tables to make them responsive will be made shortly as part of T330527 which will complete the responsive behaviour. Bug: T361573 Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
79 lines
1.8 KiB
Plaintext
79 lines
1.8 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;
|
|
// Ensures the button has a font size of 16px
|
|
font-size: unit( 16 / @font-size-browser, rem );
|
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
float: right;
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-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-breakpoint-desktop ) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
#p-search,
|
|
.vector-header-end {
|
|
.cdx-mixin-button-layout-flush( 'start', true );
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
}
|
|
}
|