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

// Component of ui.less
// FIXME: Move to components/
@import 'minerva.variables';
@import 'minerva.mixins';

/* stylelint-disable no-descending-specificity */

/* Left menu */
@menuSectionPadding: 22px;
@menuBorderColor: #252525;
@menuLinkLineHeight: 24px;
@menuItemFontSize: 0.875em;
@menuItemBackgroundColor: @skinContentBgColor;

@pageLeftListDarkBorderColor: #3e3e3e;
@pageLeftListMediumBorderColor: #5c5c5c;
@pageLeftListLightBorderColor: #717171;

#mw-mf-viewport {
	position: relative;
	height: 100%;
}

#mw-mf-page-center {
	width: 100%;
	position: relative;
}

// needs to be more specific than .overlay rules
.notifications-overlay.navigation-drawer {
	right: 0;
	height: 100%;
	width: auto;
	box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
}

nav {
	background-color: @primaryNavBackgroundColor;
	float: left;
	min-height: 100%;

	.secondary-action {
		border: 0;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		padding-right: 0;
		border-left: 1px solid @grayMediumLight;
	}

	.primary-action {
		// 1px for the logout icon border-left
		margin-right: @iconSize + @iconGutterWidth * 2;
	}

	ul {
		padding-bottom: @menuSectionPadding;

		&:first-child {
			li:first-child {
				border-top: 0;
			}
		}

		li {
			background-color: @menuItemBackgroundColor;
			position: relative; // ensure the logout link in beta can be position absolute
			border-top: 1px solid @colorGray14;
			// offset the border for the icon by 1px
			margin-top: -1px;
			font-size: @menuItemFontSize;

			&:first-child {
				border-top: 0;
			}

			a {
				color: @colorGray5;
				display: block;
				padding: @menuLinkLineHeight / 2 10px @menuLinkLineHeight / 2 15px;

				&:hover {
					box-shadow: inset 4px 0 0 0 @colorProgressive;
					text-decoration: none;
				}

				&:visited,
				&:active {
					color: @colorGray5;
				}

				&.mw-ui-icon {
					font-weight: bold;
					line-height: 1.857; // equals `26px` at `font-size: 14px` above

					&:before {
						font-size: 16px;
					}
				}
			}
		}

		&.hlist {
			li {
				background-color: transparent;
				border: 0;
				margin: 0;
				font-size: 0.75em; // equals `12px` at base `font-size: 16px`

				a {
					color: @colorProgressive;
					padding: 0.7em 12px;

					&:hover {
						background-color: transparent;
						box-shadow: none;
					}
				}
			}
		}
	}
}

.navigation-enabled {
	#mw-mf-viewport {
		// disable horizontal scrolling
		overflow: hidden;
		// the two following properties are needed to override the height set
		// by position: fixed fallback on scroll event
		min-height: 100%;
		height: auto !important;
	}

	#mw-mf-page-center {
		// Since we change the color of the body tag above we need to ensure the content has a white background
		background: #fff;
		position: absolute;
		height: 100%;
		// Overriden in mainmenuAnimation
		left: @menuWidth;
	}

	.navigation-drawer,
	.transparent-shield {
		visibility: visible;
	}

	.transparent-shield {
		background: @semiTransparent;
		opacity: 0.5;
		.transition( opacity 0.25s ease-in-out );
	}
}

.primary-navigation-enabled {
	background-color: @primaryNavBackgroundColor;

	nav {
		width: @menuWidth;
	}

	// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
	.drawer .position-fixed {
		left: @menuWidth !important;
	}
}

@media all and ( min-width: @deviceWidthTablet ) {
	@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
	.secondary-navigation-enabled {
		#mw-mf-page-center {
			left: -@rightDrawerWidth !important;
			right: @rightDrawerWidth !important;
			width: auto;
			.main-header-button {
				visibility: hidden;
			}
		}
	}

	.notifications-overlay.navigation-drawer {
		left: @rightDrawerLeftOffset;
	}
}

// animated version
@duration: 0.25s;
@easing: ease-in-out;

// FIXME: Cleanup animation css
.animations {
	#mw-mf-page-center {
		min-height: 100%;

		// *2 to avoid weird glitch of left nav flickering after closing
		@transition: @duration @easing, height 0s ( @duration * 2 );
		.transition-transform( @transition );
	}

	nav {
		width: @menuWidth;

		.transition( visibility 0s @duration );
	}

	// FIXME: Make animations a conditional class on the drawer itself
	.notifications-overlay.navigation-drawer {
		display: block;

		// +2% to accommodate for the border/box-shadow
		.transform( translate( 102%, 0 ) );
		.transition-transform( @duration @easing, visibility 0s @duration; );

		&.visible {
			.transform( translate( 0, 0 ) );
		}
	}
}

.navigation-enabled.animations {
	// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
	.drawer .position-fixed,
	#mw-mf-page-center {
		.transition-transform( @duration @easing );
	}
}

.primary-navigation-enabled.animations {
	// FIXME: Menu shouldn't need to know about drawers
	.drawer .position-fixed,
	#mw-mf-page-center {
		// override non-animated version
		left: 0 !important;
		.transform( translate( @menuWidth, 0 ) );
	}

	nav {
		// make menu scrollable when open (on small screens)
		position: static;
		.transition( none );
	}
}

.secondary-navigation-enabled.animations {
	#mw-mf-page-center {
		// override non-animated version
		left: 0 !important;
		.transform( translate( -@rightDrawerWidth, 0 ) );
		width: 100%;
	}
}

@media all and ( min-width: @deviceWidthTablet ) {
	.navigation-enabled {
		#mw-mf-page-center {
			left: @menuWidthTablet;
		}
	}

	.primary-navigation-enabled {

		&.animations {
			// FIXME: Menu shouldn't need to know about drawers
			.drawer .position-fixed,
			#mw-mf-page-center {
				.transform( translate( @menuWidthTablet, 0 ) );
			}
		}

		nav {
			width: @menuWidthTablet;
		}

		// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
		.drawer .position-fixed {
			left: @menuWidthTablet !important;
		}
	}
}