mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-13 08:29:29 +00:00
791b9bb0d5
Removes padding from the top and bottom of the .mw-body element so that the border of the sidebar menus align with border of the tab area. Also removes the bottom margin on the sidebar menus so that the bottom of the menus align with the bottom of the content. (This was an artifact from the gray background design). **Visual Changes** - The content will move up by 8px with this change. - The bottom of the TOC will also move down by 24px to align with the content. Bug: T351432 Change-Id: If0a8189b228ffb6fb63dfd8be40955653caa0b34
44 lines
1.3 KiB
Plaintext
44 lines
1.3 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;
|
|
// Height is viewport height - row gap above and below the container.
|
|
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
|
|
display: none;
|
|
|
|
// If there is no display grid support we remove pinnable elements
|
|
@supports ( display: grid ) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.vector-sticky-pinned-container {
|
|
// Applies styles for making a pinned element sticky
|
|
position: sticky;
|
|
top: @grid-row-gap;
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
/**
|
|
* 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.
|
|
*/
|
|
&.client-js .vector-pinned-container {
|
|
display: none;
|
|
}
|
|
}
|