mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/MainMenu.less
Stephen Niedzielski bfdfc1165c [UI] [menu] slide the main menu over the page
Slide the main menu over the page instead of sliding the page over the
menu. Also, use viewport units for the main and notification menus.

Note, this lays foundation work for T225213.

Bug: T206354
Change-Id: I14b67d1e97b84086ea13e28df8148824a1f493e3
2019-08-12 18:22:45 +00:00

65 lines
1.2 KiB
Plaintext

// Component of ui.less
// FIXME: Move to components/
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
/* stylelint-disable no-descending-specificity */
// .menu
#mw-mf-page-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
min-width: 275px;
@media screen and ( min-width: @width-breakpoint-tablet ) {
min-width: @width-breakpoint-mobile;
}
// It should always be possible to dismiss the menu by tapping outside of it.
max-width: 80%;
z-index: @z-indexDrawer;
// Add vertical scrollbar as needed.
overflow-y: auto;
background-color: @primaryNavBackgroundColor;
.transform( translate( -100%, 0 ) );
ul {
padding-bottom: 22px;
}
}
.primary-navigation-enabled {
overflow: hidden;
// Necessary to disable scrolling on Android and iOS devices.
touch-action: none;
}
.animations {
// .menu
#mw-mf-page-left {
.transition( transform @menu-animation-duration @menu-animation-easing; );
}
&.primary-navigation-enabled {
// .menu
#mw-mf-page-left {
.transform( translate( 0, 0 ) );
}
.transparent-shield {
visibility: visible;
opacity: 0.5;
}
}
}
// Special:MobileMenu
.navigation-full-screen {
// .menu
#mw-mf-page-left {
max-width: none;
transform: none;
}
}