mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-13 08:29:29 +00:00
b55d95c70c
Replacing the legacy Vector breakpoint tokens with the Codex standard ones. All names have been unified, only some legacy values remain for backwards compatibility. Also - replacing a wrongly applied min-width with the correct max-width token, - replacing a width with an equal value min-width one and - removing the now equal value mobile min-width one. Note that we can't do some reference magic here alike `@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as this would take the Codex value from skin variables and not the legacy value. Also note, that we could move all those Vector legacy definitions into Vector's 'mediawiki.skin.variables.less' file(s), but that would mean that extensions don't rely on the Codex default values, but on Vector's and we want latter to move to the standard, also in foresight of further standardization to build for all feature teams like a shared Grid. Bug: T331403 Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
124 lines
3.1 KiB
Plaintext
124 lines
3.1 KiB
Plaintext
.vector-toc {
|
|
.vector-pinnable-header {
|
|
padding-left: @toc-list-item-padding-start;
|
|
}
|
|
|
|
.vector-toc-numb {
|
|
display: none;
|
|
}
|
|
|
|
.vector-toc-toggle {
|
|
// For no-js users, toggling is disabled and icon is hidden
|
|
display: none;
|
|
transition: @transition-duration-base;
|
|
position: absolute;
|
|
left: -@size-toc-subsection-toggle/2;
|
|
// Visual centering.
|
|
top: 1px;
|
|
// Override .cdx-button styles
|
|
min-width: @size-toc-subsection-toggle; // ~22px @ 12
|
|
min-height: @size-toc-subsection-toggle;
|
|
padding: 0;
|
|
font-size: @size-toc-subsection-toggle-icon;
|
|
}
|
|
|
|
.vector-toc-link {
|
|
display: block;
|
|
word-break: break-word;
|
|
color: @color-link;
|
|
}
|
|
|
|
// Highlight and bold active sections, active top sections that are unexpanded
|
|
// and active top sections that are the only active element.
|
|
.vector-toc-list-item-active,
|
|
.vector-toc-level-1-active:not( .vector-toc-list-item-expanded ),
|
|
.vector-toc-list-item-active.vector-toc-level-1-active {
|
|
> .vector-toc-link {
|
|
// Highlight active section
|
|
color: @color-base;
|
|
font-weight: bold;
|
|
|
|
.vector-toc-text {
|
|
// Increase width to prevent line wrapping due to bold text
|
|
// Avoid applying on link element to avoid focus indicator changing size
|
|
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu} )';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Highlight active top sections that contain an active section
|
|
.vector-toc-level-1-active:not( .vector-toc-list-item-active ) > .vector-toc-link {
|
|
color: @color-base;
|
|
}
|
|
|
|
.vector-toc-text {
|
|
// Match .mixin-vector-dropdown-menu-item() vertical padding
|
|
padding: @padding-vertical-dropdown-menu-item 0;
|
|
}
|
|
|
|
.vector-toc-contents,
|
|
.vector-toc-list {
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.vector-toc-list-item {
|
|
position: relative;
|
|
list-style-type: none;
|
|
padding-left: @toc-list-item-padding-start;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Collapse ToC sections by default, excluding no-js
|
|
&.client-js .vector-toc {
|
|
.vector-toc-level-1 .vector-toc-list-item {
|
|
display: none;
|
|
}
|
|
|
|
.vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item {
|
|
display: block;
|
|
}
|
|
|
|
.vector-toc-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-toggle {
|
|
transform: rotate( 0deg );
|
|
}
|
|
}
|
|
|
|
&.client-js body.ltr .vector-toc .vector-toc-toggle {
|
|
transform: rotate( -90deg );
|
|
}
|
|
|
|
&.client-js body.rtl .vector-toc .vector-toc-toggle {
|
|
transform: rotate( 90deg );
|
|
}
|
|
|
|
// Ensure there is only 1 table of contents landmark at anytime
|
|
.vector-toc-landmark {
|
|
display: none;
|
|
}
|
|
|
|
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
|
|
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
|
|
&.vector-feature-toc-pinned-clientpref-1 .vector-column-start {
|
|
> .vector-toc-landmark {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// On smaller viewports the TOC will always be moved to the page titlebar via JS
|
|
// regardless of the TOC pinned classes
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
&.client-js .vector-page-titlebar .vector-toc-landmark {
|
|
display: block;
|
|
}
|
|
|
|
&.client-js .mw-table-of-contents-container.vector-toc-landmark {
|
|
display: none;
|
|
}
|
|
}
|