mediawiki-skins-Vector/resources/skins.vector.styles/layouts/toc/unpinned.less

@import '../../../common/variables.less';
@import '../../../common/mixins.less';

@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';

// FIXME: Move into .mixin-toc-unpinned() when PageTools feature is enabled everywhere
.vector-feature-page-tools-enabled .vector-unpinned-container .vector-toc {
	// Adjust TOC spacing when unpinned
	.vector-pinnable-header {
		padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
	}

	.vector-toc-contents {
		padding-right: @padding-horizontal-dropdown-menu-item;
		padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
	}
}

// TOC dropdown styles
#vector-toc-collapsed-button,
.vector-sticky-header-toc,
.vector-page-titlebar-toc {
	display: none;
	margin-right: 8px;
}

// TOC dropdown toggle styles
#vector-toc-collapsed-button,
body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
	@media ( max-width: @max-width-tablet ) {
		// Override the default button styles so the ToC button in the page titlebar is slightly shorter on small viewports
		padding: 7px 12px;
	}
}

// TOC styles when unpinned
.mixin-toc-unpinned() {
	display: block;

	> .vector-menu-content {
		// Override default dropdown max width
		max-width: none;
	}

	// Shared unpinned TOC styles, applies across all unpinned cases (page titlebar, sticky header, floating)
	.vector-toc {
		// T316056 Remove TOC menu fixed width and apply min/max-width
		width: max-content;
		min-width: 200px;
		// Collapsed TOC should be smaller than 85% of the content container (51em) and 75vw
		max-width: ~'min( 0.85 * @{max-width-content-container}, 75vw )'; // min( 51em, 75vw )
	}
}

// TOC styles when below page title
.mixin-toc-below-page-title {
	position: fixed;
	top: 12px;
	left: 12px;
	margin: 0;
	z-index: @z-index-menu;
}

.vector-feature-page-tools-disabled .vector-unpinned-container .vector-toc {
	box-sizing: content-box;
}

.client-js {
	@media ( max-width: @max-width-tablet ) {
		// Prevent layout shift from the TOC being in the sidebar before JS loads and
		// moves the TOC into the page titlebar on small screens
		#vector-toc-pinned-container .vector-toc {
			display: none;
		}

		// Hide pin ToC toggles on smaller resolution
		.vector-toc .vector-pinnable-header-toggle-button {
			display: none;
		}

		//
		// TOC in page titlebar on narrow screens
		//
		.vector-page-titlebar-toc {
			.mixin-toc-unpinned();
		}

		//
		// TOC in page titlebar on narrow screens below page title
		//
		.vector-below-page-title .vector-page-titlebar-toc {
			.mixin-toc-below-page-title();
		}
	}

	@media ( min-width: @min-width-desktop ) {
		//
		// TOC in page titlebar
		//
		// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 102 has been in prod for a week.
		.vector-toc-unpinned:not( .vector-sticky-header-visible ),
		&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) {
			.vector-page-titlebar-toc {
				.mixin-toc-unpinned();
			}
		}

		//
		// TOC in page titlebar below page title
		//
		// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 113 has been in prod for a week.
		.vector-toc-unpinned:not( .vector-sticky-header-visible ).vector-below-page-title,
		&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ).vector-below-page-title {
			.vector-page-titlebar-toc {
				.mixin-toc-below-page-title();
			}
		}

		//
		// TOC in sticky header
		//
		// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 124 has been in prod for a week.
		.vector-toc-unpinned.vector-sticky-header-visible,
		&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible {
			.vector-sticky-header-toc {
				.mixin-toc-unpinned();
			}
		}
	}
}

//
// No-js TOC
//
@media ( max-width: @max-width-tablet ) {
	.client-nojs {
		#vector-toc-collapsed-button {
			display: block;
		}

		#vector-toc-pinned-container {
			// Override TOC container's sticky positioning
			position: relative;
			.mixin-toc-unpinned();
		}

		.vector-toc {
			display: none;
			position: absolute;
			top: 36px; // TOC button height
			// FIXME: Don't use a magic number. This used to be tied to the private variable in core
			// @icon-padding-md so perhaps this needs to make use of the flush classes?
			left: -12px;
			margin-top: @padding-top-content; // Account for padding-top from .mw-body
			// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
			border: @border-width-base @border-style-base @border-color-base;
			z-index: @z-index-menu;

			.vector-pinnable-header,
			.vector-toc-contents {
				// FIXME: Remove !important after PageTools is enabled everywhere currently needed
				// to deal with selector specificity, overrides padding applied in PinnableHeader.less
				/* stylelint-disable-next-line declaration-no-important */
				padding-left: @padding-horizontal-dropdown-menu-item !important;
			}
		}

		@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
			// Hide the TOC when the button is not checked
			display: block;
		}
	}
}