mediawiki-skins-Vector/resources/skins.vector.styles/components/PageTools.less
Volker E b55d95c70c styles: Replace legacy Vector breakpoint tokens where applicable
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
2023-10-25 22:03:46 +00:00

45 lines
1.3 KiB
Plaintext

// Ensure there is only 1 page tools landmark at anytime
&.vector-feature-page-tools-pinned-enabled .vector-page-toolbar-container .vector-page-tools-landmark,
&.vector-feature-page-tools-pinned-disabled .vector-column-end .vector-page-tools-landmark {
display: none;
}
.vector-column-end {
// T327460: Prevent subpixel rendering issues associated with the text and Chrome.
contain: paint;
.vector-page-tools-landmark {
position: sticky;
top: 0;
margin-top: @margin-top-pinned-page-tools;
}
}
#vector-page-tools-pinned-container .vector-page-tools {
width: 140px;
// Match spacing of TOC and main menu
margin-left: @padding-horizontal-dropdown-menu-item;
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
overflow-y: auto;
box-sizing: border-box;
padding-top: @padding-top-pinned-element;
// Add fade indicator.
.mixin-vector-scroll-indicator();
}
// Ensure collapsible items are visible on lower resolutions
.vector-page-tools .vector-more-collapsible-item {
display: block;
@media ( min-width: @min-width-breakpoint-tablet ) {
display: none;
}
}
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-page-tools .vector-has-collapsible-items {
@media ( max-width: @max-width-breakpoint-mobile ) {
display: block;
}
}