mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/MainMenu.less

// Component of ui.less
// FIXME: Discuss the components folder with team and possibly move to components/
@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';

// stylelint-disable no-descending-specificity, selector-max-id

// .menu
#mw-mf-page-left {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 275px;
	visibility: hidden;

	@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;
	}
}

// TODO: combined with `.mw-mf-page-center__mask` & create a separate "masks" module.
.main-menu-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	bottom: 0;
	background: @semiTransparent;
	z-index: @z-indexAboveContent;
	// don't use display: none because it's not animatable
	visibility: hidden;
}

#main-menu-input:checked ~ .main-menu-mask {
	visibility: visible;
	opacity: 0.5;
}

#main-menu-input:checked ~ #mw-mf-page-left {
	visibility: visible;
	box-shadow: 1px 0 8px 0 @grayDrawerShadow;
	.transform( translate( 0, 0 ) );
}

// Without the minerva-animations-ready class, the main menu can appear and
// perform its exit animation when the page loads in chrome (and possibly
// others).
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189
.minerva-animations-ready {
	#mw-mf-page-left {
		.transition(
			// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
			// cannot be animated initially as it causes a flash on page load in Chromium due to
			// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
			opacity @transition-duration-medium @transition-timing-function-menu,
			visibility @transition-duration-medium @transition-timing-function-menu,
			transform @transition-duration-medium @transition-timing-function-menu; );
	}

	.main-menu-mask {
		.transition(
			opacity @transition-duration-base @transition-timing-function-menu,
			visibility 0ms linear @transition-duration-base;
		);
	}

	#main-menu-input:checked ~ .main-menu-mask {
		.transition( opacity @transition-duration-base @transition-timing-function-menu;);
	}
}

// Special:MobileMenu
.navigation-full-screen {
	// .menu
	#mw-mf-page-left {
		max-width: none;
		.transform( none );
	}
}