mediawiki-skins-Vector/resources/skins.vector.styles/components/Dropdown.less
Moh'd Khier Abualruz f83cca3cc5 [Zebra] Merge skins.vector.zebra.styles module into skins.vector.styles
Merges all of the styles in the Zebra module into the default styles.

- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.

Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
2024-01-09 15:46:11 +01: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-x: hidden;
overflow-y: auto;
z-index: @z-index-dropdown;
.mixin-vector-dropdown-menu();
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;
}
}