mediawiki-skins-Vector/resources/skins.vector.zebra.styles/components/Dropdown.less
Jan Drewniak 036e1295ec [Zebra] Unify ToC & menu scroll behaviour
- 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
2023-05-04 16:19:00 -04:00

36 lines
755 B
Plaintext

/**
* Targets all dropdown labels.
* - language variants, Actions menus
* - more menu, user menu
* - ULS button in sticky header
*/
.vector-dropdown > .vector-menu-heading:not( .mw-ui-icon-element ) {
display: flex;
&::after {
.mixin-vector-menu-heading-arrow();
}
}
/**
* Dropdown container
*/
.vector-dropdown .vector-dropdown-content {
.mixin-vector-dropdown-menu();
.mixin-vector-scrollable-with-fade();
max-height: 75vh;
}
.vector-pinnable-element .vector-menu-heading {
color: @color-subtle;
font-weight: normal;
cursor: default;
padding: @padding-vertical-dropdown-menu-item 0;
}
.vector-pinnable-element .mw-list-item a,
.vector-dropdown-content .mw-list-item a {
.mixin-vector-dropdown-menu-item();
color: @color-link;
}