mediawiki-skins-Vector/resources/skins.vector.styles/components/MainMenu.less

@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';

// Ensure there is only 1 main menu landmark at anytime
.vector-main-menu-landmark {
	.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-enabled .vector-header-start &,
	.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-main-menu-container & {
		display: none;
	}
}

.vector-main-menu {
	box-sizing: border-box;

	// Hide #p-navigation label
	#p-navigation .vector-menu-heading {
		display: none;
	}
}

.vector-feature-page-tools-enabled .vector-main-menu {
	// Match styles of .mw-list-item a in PinnableElement.less
	.vector-main-menu-action-opt-out a,
	.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
		.mixin-vector-dropdown-menu-item();
	}

	.vector-main-menu-action-opt-out a {
		font-weight: bold;
	}

	.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
		padding-top: 0;
	}

	.vector-language-sidebar-alert {
		// Override default .mw-message-box styles
		padding: 8px;
		margin: 0;
	}
}

// Main menu when pinned in the sidebar
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
	padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
	background-color: @background-color-secondary--modern;
	// Align text with page container
	margin-left: -@padding-horizontal-dropdown-menu-item;

	// Match styles of .mw-list-item a in PinnableElement.less
	.vector-main-menu-action-opt-out a,
	.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
		padding-left: 0;
		padding-right: 0;
	}
}

// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
	// TODO: Standardize dropdown min and max width
	width: 250px;

	.vector-language-sidebar-alert {
		margin-bottom: 6px;
	}
}

.vector-feature-page-tools-disabled {
	@media ( max-width: @max-width-tablet ) {
		.vector-main-menu {
			// Makes the sidebar full screen at lower resolutions.
			width: 100%;
		}
	}
	// Hide sidebar entirely when the checkbox is disabled
	@{selector-main-menu-closed} ~ .vector-main-menu-container .vector-main-menu {
		display: none;
	}
}

.vector-feature-page-tools-disabled .vector-main-menu {
	// Temporary magic number, will be calculated after TOC specs are finalized
	padding: 12px 19px 12px 9px;
	background-color: @background-color-secondary--modern;

	@media ( min-width: @min-width-desktop ) {
		// Magic number from the edge of the main menu to the start of the main menu text.
		margin-left: -28px;
	}
}

.vector-feature-page-tools-disabled .vector-main-menu-action {
	// Styles for MainMenuAction template.
	.vector-main-menu-action-item {
		// Align with the portal heading/links
		// `.portal` + `.portal .body`
		margin-top: 4px;
		margin-bottom: 4px;

		.vector-main-menu-action-heading {
			margin-bottom: 0.75em;
		}

		.vector-main-menu-action-content {
			> * {
				font-size: @font-size-portal-list-item;
			}

			> a {
				font-weight: bold;
			}
		}

		// T295555 style overrides for temporary language switch alert (can be removed later ).
		.vector-language-sidebar-alert {
			padding: 0.75em;
		}
	}
}

#mw-sidebar-button {
	&:before {
		/* @embed */
		.vector-feature-page-tools-disabled & {
			background-image: url( images/chevronHorizontal-ltr.svg );
		}

		.vector-feature-page-tools-disabled @{selector-main-menu-closed} ~ .mw-header & {
			/* @embed */
			background-image: url( images/menu.svg );
		}
	}

	&:hover {
		&:before {
			opacity: 1;
		}
	}
}