mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 03:09:24 +00:00
bd05ff4ae5
Implements the zebra design update via the skins.vector.zebra.styles module. Refactors: - Moves common variable and mixin imports from individual files to skin.less file. - Applies font-sizes to menu containers instead of individual menu links. - Adds mixins for dropdown and content-box styles. - Unifies padding for pinned and unpinned menu states (including TOC). Bug: T332600 Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
37 lines
1.2 KiB
Plaintext
37 lines
1.2 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();
|
|
padding: @padding-vertical-dropdown-menu @padding-horizontal-dropdown-menu;
|
|
margin-bottom: @grid-column-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;
|
|
}
|
|
}
|
|
}
|