mediawiki-skins-Vector/resources/skins.vector.styles/layouts/toc/pinned.less
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00

49 lines
1.8 KiB
Plaintext

@import '../../../common/variables.less';
@import '../../../common/mixins.less';
.mw-table-of-contents-container {
// Needed for Grid-based layout
align-self: start;
height: 100%;
}
@media ( min-width: @min-width-desktop ) {
&.vector-feature-toc-pinned-enabled #mw-panel-toc {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
// inside of the panel from being rendered outside of its bounding box, even when they would
// be positioned there using absolute positioning, negative margin, transforms, etc.
// That's why the negative margins have to be applied here, instead of on #vector-toc.
contain: paint;
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
}
#vector-toc-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
}
&.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
#vector-toc-pinned-container .vector-toc {
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
.mixin-vector-scroll-indicator();
}
}