mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 18:05:19 +00:00
e7b4edf7a6
The Dropdown component should be considered the dropdown folder going forward. This should be distinguished as a different component that composes the Dropdown component Since the template itself is rather simple it seems preferable to have duplicate templates that describe the actual component (PageTools, VariantsDropdown and LanguageButton) MenuDropdown is renamed Dropdown and styles that don't correspond to the Dropdown component are moved to the relevant components. MenuContents mustache template (future component) is added to DRY up several of the new templates. Bug: T320927 Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
/**
|
|
* Targets all dropdown labels.
|
|
* - language variants, Actions menus
|
|
* - more menu, user menu
|
|
* - ULS button in sticky header
|
|
* FIXME: Drop .vector-menu-dropdown selector when cache clears.
|
|
*/
|
|
.vector-dropdown > .vector-menu-heading,
|
|
.vector-menu-dropdown > .vector-menu-heading {
|
|
display: flex;
|
|
|
|
&:after {
|
|
.mixin-vector-menu-heading-arrow();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Dropdown container
|
|
* FIXME: Drop .vector-menu-dropdown selector when cache clears.
|
|
*/
|
|
.vector-dropdown,
|
|
.vector-menu-dropdown {
|
|
> .vector-menu-content {
|
|
background-color: @background-color-base;
|
|
border: @border-width-base @border-style-base @border-color-base;
|
|
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
|
transition-property: opacity;
|
|
transition-duration: @transition-duration-base;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Dropdown menu items.
|
|
* FIXME: Drop .vector-menu-dropdown selector when cache clears.
|
|
* TODO: Can any of these unique classes be converted to use .mw-list-item instead?
|
|
* FIXME: `vector-dropdown-content` does not belong to the Dropdown component.
|
|
* At time of writing it is associated with the PinnableDropdownContent component. Revisit
|
|
* as part of I85aec387f87126a17e760fd9fd10e10572ff3152.
|
|
*/
|
|
.vector-dropdown-content .mw-list-item,
|
|
.vector-dropdown .mw-list-item,
|
|
.vector-menu-dropdown > .vector-menu-content .mw-list-item {
|
|
a {
|
|
.mixin-vector-dropdown-menu-item();
|
|
white-space: nowrap;
|
|
color: @color-link;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Dropdown headings.
|
|
*/
|
|
.vector-dropdown-content .vector-menu-heading {
|
|
.mixin-vector-dropdown-menu-item();
|
|
.mixin-vector-menu-heading();
|
|
}
|
|
|
|
/**
|
|
* Menus inside dropdowns (when a dropdown has multiple menus).
|
|
*/
|
|
.vector-dropdown-content {
|
|
.vector-menu {
|
|
border-top: @border-width-base @border-style-base @colorGray14;
|
|
}
|
|
|
|
// Remove the border for the first .vector-menu since
|
|
// it already exists on the pinnable header, or, when there's no
|
|
// pinnable header, a border exists on the dropdown container.
|
|
.vector-menu:first-child,
|
|
.vector-pinnable-header + .vector-menu {
|
|
border: 0;
|
|
}
|
|
}
|