mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 02:37:05 +00:00
f4befc068d
I accidentally enabled this on tablet breakpoint.
Follow up to e3d2ab5031
The Pixel UI report should only surface changes on mobile - all
of these are improvements as it means the whole UI is visible in
the viewport.
Bug: T361573
Change-Id: I8aa5699a8fe959c1595d74c03f19c14856f6470f
81 lines
1.9 KiB
Plaintext
81 lines
1.9 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-mobile ) {
|
|
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-mobile ) {
|
|
#p-search,
|
|
.vector-header-end {
|
|
.cdx-mixin-button-layout-flush( 'start', true );
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-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;
|
|
}
|
|
}
|
|
}
|
|
}
|