wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 18:29:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Support Vector 2022 at > 320px"

Browse source
This commit is contained in:
jenkins-bot 2024-05-21 14:23:09 +00:00 committed by Gerrit Code Review
parent 0f52e1e85a e3d2ab5031
commit 0f9ad1ba67
4 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/skins.vector.styles/components/Header.less
View file

@ -20,10 +20,13 @@
.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-breakpoint-tablet ) {
float: right;
}
@media ( min-width: @min-width-breakpoint-desktop ) {
// Override .cdx-button styles
display: none !important; /* stylelint-disable-line declaration-no-important */
@ -39,6 +42,11 @@
}
@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.
*/

6
resources/skins.vector.styles/components/Logo.less
View file

@ -22,15 +22,9 @@
// This will be ignored in flexbox browsers.
float: left;
margin-right: 10px;
// Hide mobile icon at lower resolutions and defer to wordmark
display: none;
@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
width: @size-mw-logo-icon;
height: @size-mw-logo-icon;
@media ( min-width: @min-width-breakpoint-tablet ) {
display: block;
}
}
.mw-logo-container {

11
resources/skins.vector.styles/layouts/screen.less
View file

@ -114,6 +114,17 @@ body {
background-color: @background-color-page-container;
}
@media ( max-width: @max-width-breakpoint-tablet ) {
.vector-header {
flex-flow: column;
}
.vector-header-start,
.vector-header-end {
width: 100%;
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container,
.vector-header-container .mw-header,

2
resources/skins.vector.styles/variables.less
View file

@ -13,7 +13,7 @@
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em );
@min-width-supported: unit( 300px / @font-size-browser, em );
// Sizing calculation primitives.
@font-size-root: 100%;