From 42f863a93664a1828987d750b7cdc4701b8e1768 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Fri, 8 Jul 2022 12:51:28 -0500
Subject: [PATCH] TOC: CSS clean up and spacing fix

- Update TOC bottom padding to match spec in T304166.
  Before (30px): https://phabricator.wikimedia.org/F35312302
  After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less

Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
---
 .../components/TableOfContents.less           | 69 ++++++++-----------
 .../components/TableOfContentsCollapsed.less  |  8 +--
 2 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
index 63c0426dc..1d029e6cf 100644
--- a/resources/skins.vector.styles/components/TableOfContents.less
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -1,14 +1,13 @@
 @import '../../common/variables.less';
 
-@fade-height: 40px;
-@vertical-padding: 20px;
-@right-padding: 12px;
-@toggle-icon-size: 1.834em;
+@sidebar-toc-fade-height: 30px;
+@sidebar-toc-vertical-padding: 20px;
+@sidebar-toc-right-padding: 12px;
+@toc-subsection-toggle-icon-size: 1.834em;
 
 .sidebar-toc {
-	display: none;
 	max-height: 75vh;
-	padding: @vertical-padding @right-padding @vertical-padding 32px;
+	padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding 32px;
 	box-sizing: border-box;
 	overflow: auto;
 	background-color: @border-color-sidebar;
@@ -29,11 +28,29 @@
 		display: none;
 	}
 
+	.sidebar-toc-toggle {
+		// For no-js users, toggling is disabled and icon is hidden
+		display: none;
+		position: absolute;
+		top: 1px; // visually center icon
+		left: ~'calc( -1 * @{toc-subsection-toggle-icon-size} - 1px )'; // leaves 6px between icon + text
+		width: @toc-subsection-toggle-icon-size; // ~22px @ 12
+		height: @toc-subsection-toggle-icon-size;
+		font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
+		transition: @transition-duration-base;
+		cursor: pointer;
+	}
+
 	.sidebar-toc-link {
 		word-break: break-word;
 		color: @color-link;
 	}
 
+	.sidebar-toc-list-item-active > .sidebar-toc-link {
+		// Highlight active section
+		color: @color-base;
+	}
+
 	.sidebar-toc-text {
 		padding: 4px  0;
 	}
@@ -45,24 +62,20 @@
 		line-height: 18px;
 	}
 
-	.sidebar-toc-contents {
-		padding-bottom: ~'calc( @{vertical-padding} / 2 )';
-	}
-
 	.sidebar-toc-list-item {
 		display: block;
 		position: relative;
 		list-style-type: none;
 		padding-left: 8px;
 
+		&.sidebar-toc-level-1 {
+			padding-left: 0;
+		}
+
 		a {
 			font-size: @font-size-base;
 		}
 	}
-
-	.sidebar-toc-list-item.sidebar-toc-level-1 {
-		padding-left: 0;
-	}
 }
 
 // T302076 Add scrollable indicator as fade
@@ -73,24 +86,13 @@
 	bottom: 0;
 	left: 0;
 	right: 0;
-	height: @fade-height;
+	height: @sidebar-toc-fade-height;
 	background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
 	background-repeat: no-repeat;
-	background-position: -@right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
+	background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
 	pointer-events: none; // Make the link below the fade clickable
 }
 
-// Highlight active section
-.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
-	color: @color-base;
-}
-
-.sidebar-toc .sidebar-toc-toggle {
-	// For no-js users, toggling is disabled and icon is hidden
-	display: none;
-	cursor: pointer;
-}
-
 // Collapse ToC sections by default, excluding no-js
 .client-js .sidebar-toc {
 	.sidebar-toc-level-1 .sidebar-toc-list-item {
@@ -102,14 +104,7 @@
 	}
 
 	.sidebar-toc-toggle {
-		position: absolute;
-		top: 1px; // visually center icon
-		left: ~'calc( -1 * @{toggle-icon-size} - 1px )'; // leaves 6px between icon + text
 		display: block;
-		width: @toggle-icon-size; // ~22px @ 12
-		height: @toggle-icon-size;
-		font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
-		transition: @transition-duration-base;
 	}
 
 	.sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle {
@@ -125,12 +120,6 @@
 	transform: rotate( 90deg );
 }
 
-@media ( min-width: @min-width-desktop ) {
-	.sidebar-toc {
-		display: block;
-	}
-}
-
 // T300975 following media query for TOC experiment treatment
 // class can be removed once associated A/B test is over.
 @media ( max-width: @max-width-tablet ) {
diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
index e9bbe05f8..a248f514b 100644
--- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
+++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
@@ -1,6 +1,6 @@
 @import '../../common/variables.less';
 
-@selector-collapsed-toc-button-checked: ~'#vector-toc-collapsed-checkbox:checked';
+@selector-collapsed-toc-closed: ~'#vector-toc-collapsed-checkbox:not( :checked )';
 
 #vector-toc-collapsed-button {
 	display: none;
@@ -56,9 +56,9 @@
 		}
 	}
 
-	@{selector-collapsed-toc-button-checked} ~ .mw-table-of-contents-container .sidebar-toc {
-		// Unhide the TOC when the button is checked
-		display: block;
+	@{selector-collapsed-toc-closed} ~ .mw-table-of-contents-container .sidebar-toc {
+		// Hide the TOC when the button is not checked
+		display: none;
 	}
 
 	.vector-below-page-title {