mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 03:09:24 +00:00
036e1295ec
- Refactor the TOC toggle button position - Move the TOC/pinnable scrollable element from `.vector-pinnable-element` to `.vector-pinned-container` and `.vector-dropdown-content`. - Applies The Fade™️, as well as a vh max-height, to both pinned menus and dropdowns. Changes the way The Fade™️ is positioned by using position:sticky so that it can be applied to dropdowns, sidebar menus as well as all ToC permutations. Bug: T335155 Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
/**
|
|
* PinnableElement
|
|
* Pinned containers are typically dropdown menus that have been
|
|
* placed in a sidebar column, e.g. page tools menu, main menu.
|
|
*/
|
|
|
|
.vector-pinnable-element {
|
|
font-size: @font-size-dropdown;
|
|
}
|
|
|
|
.vector-pinned-container {
|
|
.mixin-vector-content-box();
|
|
.mixin-vector-scrollable-with-fade();
|
|
// Border-box changes the height calculation.
|
|
box-sizing: border-box;
|
|
padding: @padding-vertical-dropdown-menu @padding-horizontal-dropdown-menu;
|
|
margin-bottom: @grid-column-gap;
|
|
// Height is viewport height - row gap above and below the container.
|
|
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
|
|
}
|
|
|
|
// Applies styles for making a pinned element sticky
|
|
.vector-sticky-pinned-container {
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
position: sticky;
|
|
top: @grid-row-gap;
|
|
}
|
|
|
|
/**
|
|
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
|
|
* elements collapse (become unpinned) at this resolution via PinnableElement.js.
|
|
* Although this is handled in JS, this rule prevents the pinned menu from
|
|
* appearing on pageload, at low resolutions, before the JS kicks in.
|
|
*
|
|
* When JS is disabled, we still want to hide the pinned containers at lower resolutions
|
|
* to fallback to the gradeC, single column layout.
|
|
*/
|
|
@media ( max-width: @max-width-tablet ) {
|
|
// .client-js and .client-nojs selectors needed to increase specificity to override gradeC.less
|
|
// Prefered to using !important as this still needs to be overridable to handle
|
|
// the anon, no-js TOC case found in layouts/toc/unpinned.less
|
|
&.client-js,
|
|
&.client-nojs {
|
|
.vector-pinned-container {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|