mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/MainMenu.less
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00

65 lines
1.2 KiB
Plaintext

// Component of ui.less
// FIXME: Move to components/
@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
/* 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;
}
}