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

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

@height-collapsed-toc-button: 36px;
@padding-top-content-px: unit( @padding-top-content * @font-size-browser, px );
@selector-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
// Use calc so that the same max width can apply even when the TOC is in different containers
@max-width-collapsed-toc: 0.85 * @max-width-content-container; // 51em

.mixin-toc-dropdown-button() {
	display: none;
	margin-right: 4px;
	z-index: @z-index-menu;
	// Override background color for when the TOC button overlaps content
	// as a fixed element when the page is scrolled down.
	background-color: @background-color-base;
}

#vector-toc-collapsed-button {
	.mixin-toc-dropdown-button();
}

@media ( max-width: @max-width-tablet ) {
	.client-nojs {
		#vector-toc-collapsed-button {
			display: block;
			// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
			padding: 7px 12px;

			&:hover,
			&:active {
				background-color: @colorGray15;
			}
		}

		#vector-toc-pinned-container {
			// Override TOC container's sticky positioning
			position: relative;
		}

		.sidebar-toc {
			display: none;
			position: absolute;
			width: auto;
			min-width: 200px;
			// using min() so that the TOC menu doesn't fully cover the text even on small viewports
			max-width: ~'min( @{max-width-collapsed-toc}, 75vw )';
			top: @height-collapsed-toc-button; // 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-px; // 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;
		}

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

.vector-page-titlebar-toc {
	.mixin-toc-dropdown-button();

	&.ve-active {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}

	.vector-menu-heading {
		// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
		@media ( max-width: @max-width-tablet ) {
			padding: 7px 12px;
		}
	}
}

// Shared collapsed TOC styles, applies across all cases (page titlebar, sticky header, floating)
.mixin-toc-collapsed() {
	// T316056 Use max-content because collapsed TOC is absolutely positioned, width is relative to the collapsed TOC button
	// max-content doesn't account for padding even when we use box-sizing, so use content-box instead
	// and manually account for horizontal padding in the max width
	width: max-content;
	box-sizing: content-box;

	// T316056 Remove TOC menu fixed width and apply min/max-width
	// Account for padding so that the TOC has an effective max width of @max-width-collapsed-toc, or 51em
	@sidebar-toc-left-padding-em: unit( @sidebar-toc-left-padding / @font-size-browser, em );
	@sidebar-toc-right-padding-em: unit( @sidebar-toc-right-padding / @font-size-browser, em );
	@max-width-collapsed-toc-content-box: @max-width-collapsed-toc - @sidebar-toc-right-padding-em - @sidebar-toc-left-padding-em;
	min-width: 200px - @sidebar-toc-right-padding - @sidebar-toc-left-padding;
	// using min() so that the TOC menu doesn't fully cover the text even on small viewports
	max-width: ~'min( @{max-width-collapsed-toc-content-box}, 75vw )';
}

// TOC styles when in page titlebar
.mixin-toc-collapsed-page-titlebar() {
	.vector-page-titlebar-toc {
		display: block;

		.sidebar-toc {
			.mixin-toc-collapsed();
		}
	}
}

.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 .sidebar-toc {
			display: none;
		}

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

		//
		// TOC in page titlebar on narrow screens
		//
		.mixin-toc-collapsed-page-titlebar();

		//
		// TOC floating on narrow screens when below page title
		//
		.vector-below-page-title {
			.vector-page-titlebar-toc {
				position: fixed;
				top: 0;
				left: 0;
				margin: 0;
			}
		}
	}

	@media ( min-width: @min-width-desktop ) {
		//
		// TOC in page titlebar
		//
		.vector-toc-unpinned:not( .vector-sticky-header-visible ) {
			.mixin-toc-collapsed-page-titlebar();
		}

		//
		// TOC in sticky header
		//
		.vector-toc-unpinned.vector-sticky-header-visible .sidebar-toc {
			.mixin-toc-collapsed();
		}
	}
}