mediawiki-skins-Vector/resources/skins.vector.zebra.styles/components/PinnableElement.less
Jan Drewniak 5852e320a3 Create skins.vector.zebra.styles module
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.

Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.

The new module should compile without error and existing
styles should not be affected.

Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:12:53 -04:00

34 lines
1.2 KiB
Plaintext

@import '../../common/variables.less';
.vector-pinned-container .vector-pinnable-element {
// Make the heading border line up with the edge of the text
// (Whereas in a dropdown, the border lines up with the edge of the dropdown container).
.vector-pinnable-header,
.vector-menu-heading,
.mw-list-item a {
padding-left: 0;
padding-right: 0;
}
}
/**
* 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;
}
}
}