mediawiki-skins-Vector/resources/skins.vector.zebra.styles/components/Dropdown.less
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00

74 lines
1.6 KiB
Plaintext

/**
* Dropdown container
*/
.vector-dropdown {
position: relative;
/**
* Dropdown toggle buttons. Doesn't apply to icon only buttons like the main menu dropdown.
* - language variants, Actions menus
* - more menu, user menu
* - ULS button in sticky header
*/
.vector-dropdown-label:not( .cdx-button--icon-only ) {
.mixin-vector-arrowed-dropdown-toggle();
}
/**
* Invisible checkbox covering the dropdown toggle button.
*/
.vector-dropdown-checkbox {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: @z-index-stacking-1;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
// Hide and show menu content based off checked status.
&:checked ~ .vector-dropdown-content {
opacity: 1;
visibility: visible;
height: auto;
}
}
// Dropdown menu container. Hidden by default until checkbox is checked.
.vector-dropdown-content {
position: absolute;
top: 100%;
left: -@border-width-base;
opacity: 0;
height: 0;
visibility: hidden;
overflow: hidden;
z-index: @z-index-dropdown;
.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;
margin: @padding-vertical-dropdown-menu-item 0;
border-bottom: @border-width-base @border-style-base @border-color-content-box;
}
.vector-pinnable-element .mw-list-item,
.vector-dropdown-content .mw-list-item {
padding: 0;
a {
.mixin-vector-dropdown-menu-item();
color: @color-link;
}
}