Merge "Remove tablet specific styles for collapsed TOC, and misc CSS clean up"

resources/common/variables.less

@@ -126,7 +126,6 @@
 @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
 
 // Sidebar
-@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
 @width-sidebar-px: 220;
 @width-sidebar-px-wide: 244;
 @margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );

resources/skins.vector.styles/components/Sidebar.less

@@ -6,19 +6,14 @@
 // 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.
+// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
 @top-margin-sidebar-toc_title_inline: 3.5em;
-// Top of sidebar TOC border normal spacing.
+// Default spacing separating the sidebar TOC from the main menu or viewport
 @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
@@ -27,6 +22,15 @@
 	}
 }
 
+// FIXME: Delete this selector when .vector-toc-enabled is removed (T310527)
+body:not( .vector-toc-enabled ) .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% );
+}
+
 // FIXME: Can be removed when "VectorTitleAboveTabs" is enabled and old layout is removed.
 .vector-article-toolbar + .mw-sidebar {
 	margin-top: @top-margin-sidebar-content;
@@ -34,6 +38,15 @@
 
 // Update styling when TOC is enabled
 .vector-toc-enabled {
+	.mw-sidebar,
+	.sidebar-toc {
+		margin-left: 0;
+
+		@media ( min-width: @min-width-desktop-wide ) {
+			margin-left: @margin-start-sidebar-content;
+		}
+	}
+
 	.mw-sidebar {
 		width: @width-sidebar;
 		// Temporary magic number, will be calculated after TOC specs are finalized
@@ -46,41 +59,29 @@
 		}
 	}
 
-	.sidebar-toc {
+	/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
-		margin-top: @top-margin-sidebar-toc_title_inline;
+	@{selector-workspace-container-sidebar-open} {
-	}
-
-	.mw-sidebar,
-	.sidebar-toc {
-		margin-left: 0;
-
-		@media ( min-width: @min-width-desktop-wide ) {
-			margin-left: @margin-start-sidebar-content;
-		}
-	}
-
-	@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
-	// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.
-	@{selector-checkbox-hack} {
-		.sidebar-toc {
-			margin-top: @top-margin-sidebar-toc;
-		}
-
 		@media ( max-width: @max-width-tablet ) {
 			.mw-sidebar {
 				margin-top: 0;
-				margin-left: 0;
+			}
+		}
+	}
+}
+
+// FIXME: Merge margin-top styles with above when .vector-toc-enabled is removed (T310527)
+.sidebar-toc {
+	.vector-toc-enabled & {
+		margin-top: @top-margin-sidebar-toc_title_inline;
 	}
 
-			.sidebar-toc {
+	.vector-toc-enabled @{selector-workspace-container-sidebar-open} & {
-				display: none;
+		// Main menu is open
-			}
+		margin-top: @top-margin-sidebar-toc;
-		}
 	}
 
-	// T305069 When scrolling down, override the top margin of the sticky TOC
+	.vector-toc-enabled.vector-sticky-header-visible & {
-	// so that the top of sticky TOC remains at the top of the viewport with normal padding.
+		// Sticky header is visible
-	&.vector-sticky-header-visible .sidebar-toc {
 		margin-top: @top-margin-sidebar-toc;
 	}
 }
@@ -147,7 +148,7 @@
 
 // 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 {
+@{selector-workspace-container-sidebar-closed} .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.

resources/skins.vector.styles/components/TableOfContentsCollapsed.less

@@ -77,23 +77,3 @@
 		}
 	}
 }
-
-@media ( min-width: @min-width-tablet ) and ( max-width: @max-width-tablet ) {
-	body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc {
-		// Adjust TOC for when the main menu is open, which pushes the page title to the right
-		left: 22px;
-	}
-
-	@{selector-collapsed-toc-button-checked} {
-		// Apply float styles to the TOC and main menu to ensure the absolute positioned TOC
-		// can remain in the correct location even when the main menu is open
-		& ~ .mw-table-of-contents-container {
-			clear: none;
-			float: left;
-		}
-
-		& ~ #mw-navigation .mw-sidebar {
-			float: left;
-		}
-	}
-}

resources/skins.vector.styles/layouts/screen.less

@@ -8,10 +8,10 @@
 @import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
-@selector-workspace-container-sidebar-open: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
+@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
-@selector-workspace-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-workspace-container';
+@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
-@selector-sidebar-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container';
+@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container';
-@selector-sidebar-no-toc-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
+@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
 
 // Sidebar
 @width-grid-column-one: 11em;
@@ -198,16 +198,17 @@ body {
 .mw-table-of-contents-container {
 	// stylelint-disable-next-line plugin/no-unsupported-browser-features
 	position: sticky;
-	float: left;
+
-	// Defaults to -2em to account for the TOC's top margin
+	// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
-	// ensuring the TOC is 1.5em (24px) from the top of the viewport
+	// we account for the TOC's top margin
-	// unless .mw-sticky-header-element overrides it.
+	top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em
-	top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )';
+	// When main menu is open the TOC's top margin is reduced
 	@{selector-workspace-container-sidebar-open} & {
-		top: 0;
+		top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0
 	}
 
 	.vector-layout-legacy & {
+		float: left;
 		clear: both;
 	}
 }
@@ -312,17 +313,18 @@ body {
 	padding-bottom: 82px;
 }
 
+// FIXME: Delete when .vector-toc-enabled is removed (T310527)
 // We want it to appear like the sidebar is going into/coming out of
 // `.mw-page-container`, but we can't use `overflow: hidden` on
 // `.mw-page-container` because that will cut off the sidebar. Therefore, we
 // calculate the maximum distance from the start of `mw-page-container` to the
 // start of the sidebar.
-#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
+@{selector-workspace-container-sidebar-closed} .mw-sidebar {
 	transform: translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 );
 }
 
 // Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
-.vector-toc-enabled #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
+.vector-toc-enabled @{selector-workspace-container-sidebar-closed} .mw-sidebar {
 	display: none;
 }
 
@@ -414,8 +416,6 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
 	@{selector-workspace-container-sidebar-open} {
 		#mw-panel {
 			width: 100%;
-			position: relative;
-			left: 0;
 		}
 
 		// !important as we always want to disable the margin-left on these elements