mediawiki-skins-Vector/resources/skins.vector.styles/layouts/toc/unpinned.less
Moh'd Khier Abualruz f83cca3cc5 [Zebra] Merge skins.vector.zebra.styles module into skins.vector.styles
Merges all of the styles in the Zebra module into the default styles.

- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.

Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
2024-01-09 15:46:11 +01:00

101 lines
2.2 KiB
Plaintext

// TOC styles when unpinned
.mixin-toc-unpinned() {
margin-right: 8px;
.vector-dropdown-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-dropdown;
}
&.client-js {
@media ( max-width: @max-width-breakpoint-tablet ) {
//
// 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-breakpoint-desktop ) {
//
// TOC in page titlebar
//
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) {
.vector-page-titlebar-toc {
.mixin-toc-unpinned();
}
}
//
// TOC in page titlebar below page title
//
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ).vector-below-page-title {
.vector-page-titlebar-toc {
.mixin-toc-below-page-title();
}
}
//
// TOC in sticky header
//
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible {
.vector-sticky-header-toc {
.mixin-toc-unpinned();
}
}
}
}
&.client-nojs {
//
// No-JS TOC in page titlebar
//
&.vector-feature-toc-pinned-clientpref-0 {
.vector-page-titlebar-toc {
.mixin-toc-unpinned();
}
}
//
// Applies simplified TOC styles to No-JS pinned TOC on narrow viewports
//
@media ( max-width: @max-width-breakpoint-tablet ) {
&.vector-feature-toc-pinned-clientpref-1 {
.vector-sticky-pinned-container {
position: static;
}
#vector-toc-pinned-container {
max-height: 200px;
}
}
}
}