mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 03:34:25 +00:00
8a88f61e89
Pixel shows 15 regressions, these are expected changes that are fixing issues on specific viewports that fixes the following: [At exactly the tablet breakpoint] * the more menu dropdown was being shown at the same time as the other menu items, resulting in duplicates (see https://phabricator.wikimedia.org/F35285379) [At exactly the desktop breakpoint] * The table of contents AND the table of contents toggle button to the left of the title were showing (see https://phabricator.wikimedia.org/F35285392) * The sticky header was not showing * The fly out table of contents was showing instead of the sidebar table of contents on scroll * The top of the sidebar is brought into alignment with the tabs (see https://phabricator.wikimedia.org/F35285408) Bug: T310536 Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
71 lines
2 KiB
Plaintext
71 lines
2 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
.mw-logo {
|
|
.flex-display();
|
|
// If icon is not configured, ensure that the logo still takes up available
|
|
// space allocated by layout.
|
|
height: 100%;
|
|
// Center vertically.
|
|
align-items: center;
|
|
// Hamburger menu icon with padding (22px + 12px = 46px) + right margin (12px) + logo (222px @ 16) + space between
|
|
// logo and searchbox (28px) = 296px which equals the sum of widths of sidebar elements (i.e. TOC) when toggled.
|
|
// 226px @ 16 provides correct spacing between the right edge of logo container + left edge of searchbox input.
|
|
min-width: 13.875em; // 222px @ 16
|
|
}
|
|
|
|
.mw-logo-icon {
|
|
// For browsers which do not support flexbox we float left.
|
|
// 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-tablet ) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.mw-logo-container {
|
|
// For browsers which do not support flexbox we float left.
|
|
// This will be ignored in flexbox browsers.
|
|
// The two children `div`s will lay out in a row.
|
|
float: left;
|
|
// At mobile resolutions restrict logo to 120px to optimize for a 340px display (@min-width-supported)
|
|
// (based on https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)
|
|
// This accounts for up to 5 icons
|
|
// (Echo notifications x 2, search, hamburger and personal menu)
|
|
// where the icons have 44px each (44x5 = 220px)
|
|
max-width: 120px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
@media ( min-width: @min-width-tablet ) {
|
|
max-width: none;
|
|
|
|
img {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Note for 3rd parties where no wgLogos['wordmark'] is defined
|
|
// the site title is not clipped. We may need to revisit this later
|
|
// for projects with long site titles.
|
|
.mw-logo-wordmark {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mw-logo-tagline {
|
|
// For browsers which do not support flexbox.
|
|
display: block;
|
|
margin: 5px auto 0;
|
|
}
|