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

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

// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Top of sidebar TOC border horizontally aligns with page title underline rule.
@top-margin-sidebar-toc_title_inline: 3.5em;
// Top of sidebar TOC border normal spacing.
@top-margin-sidebar-toc: 1.5em;
// Top of sidebar main menu border horizontally aligns with top of tool tabs above page title.
@top-margin-sidebar-content: -2.5em;

.mw-sidebar {
	width: @width-grid-column-one;
	// To avoid the white part of the gradient colliding with the sidebar links
	// we apply top and bottom padding.
	padding: 8px 0 40px @padding-left-sidebar;
	background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% );
	box-sizing: border-box;

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

// Update styling when TOC is enabled
.vector-toc-enabled {
	.mw-sidebar {
		width: @width-sidebar;
		// Temporary magic number, will be calculated after TOC specs are finalized
		padding: 12px 19px 12px 9px;
		margin-top: @top-margin-sidebar-content;
		background-image: none;
		background-color: @border-color-sidebar;

		@media ( min-width: @width-breakpoint-desktop-wide ) {
			width: @width-sidebar-wide;
		}
	}

	.sidebar-toc {
		margin-top: @top-margin-sidebar-toc_title_inline;
	}

	.mw-sidebar,
	.sidebar-toc {
		margin-left: 0;

		@media ( min-width: @width-breakpoint-desktop-wide ) {
			margin-left: @margin-start-sidebar-content;
		}
	}

	// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.
	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container {
		.sidebar-toc {
			margin-top: @top-margin-sidebar-toc;
		}

		@media ( max-width: @width-breakpoint-desktop ) {
			.mw-sidebar {
				margin-top: 0;
				margin-left: 0;
			}

			.sidebar-toc {
				display: none;
				margin-top: 0;
			}
		}
	}

	// T305069 When scrolling down, override the top margin of the sticky TOC
	// so that the top of sticky TOC remains at the top of the viewport with normal padding.
	&.vector-sticky-header-visible .sidebar-toc {
		margin-top: @top-margin-sidebar-toc;
	}
}

.mw-sidebar-action {
	// Align with the portal heading/links
	// `.portal` + `.portal .body`
	margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;

	// Styles for SidebarAction template.
	.mw-sidebar-action-item {
		h3.mw-sidebar-action-heading {
			display: block;
			background-image: url( ../common/images/portal-separator.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
			background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 100% @border-width-base;
			color: @color-base--subtle;
			margin: 0.75em 0;
			border: 0;
			padding: 0.3em 0;
			font-size: @font-size-nav-main-heading;
			font-weight: normal;
			cursor: default;
		}

		.mw-sidebar-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 {
		// Equals `#555`, closest to `#54595d` on background-color `#fff`.
		opacity: 0.67;
		/* @embed */
		background-image: url( images/chevronHorizontal-ltr.svg );

		#mw-sidebar-checkbox:not( :checked ) ~ .mw-header & {
			/* @embed */
			background-image: url( images/menu.svg );
		}
	}

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

// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
// checkbox input for the menu panel.
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
	// Turn off presentation so that screen readers get the same effect as visually hiding.
	// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
	// instead to avoid hidden rendering.
	visibility: hidden;
	opacity: 0;
	transform: translateX( -100% );
}

@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
	.mw-sidebar {
		background: @background-color-page-container;
		border-right: 1px solid @border-color-sidebar;
	}
}

// Disable transitions on page load. No-JS users will unfortunately miss out. A similar pattern is
// used in Minerva's DropDownList. See enableCssAnimations() in skin.vector.js/index.js for context
// and additional details on how this class is added.
.vector-animations-ready {
	// Enable transition on all widths by default.
	.mw-sidebar {
		transition-property: transform, opacity, visibility;
		transition-duration: @transition-duration-base;
		transition-timing-function: ease-out;
	}

	@media ( max-width: @width-breakpoint-tablet ) {
		.mw-sidebar {
			transition: none;
		}
	}

	// Enable sidebar button transitions.
	#mw-sidebar-button {
		transition-property: background-color, border-color, box-shadow;
		transition-duration: @transition-duration-base;
	}
}