mediawiki-skins-Vector/resources/skins.vector.styles/components/Logo.less
jdlrobson e12fe1dbb0 Logo scales with font-size
Bug: T291895
Depends-On: Ie86a5b59fbf93a400796a4cac3724207830092b5
Change-Id: I194a11316e8ac68319f41c6a79b2c9cd081a4b66
2021-09-28 21:44:53 +00:00

67 lines
1.7 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;
}
.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: @width-breakpoint-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: @width-breakpoint-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;
}