mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-14 19:26:42 +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
113 lines
3.1 KiB
Plaintext
113 lines
3.1 KiB
Plaintext
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
|
|
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Note vector-feature-language-in-header-enabled class is not used here as that class
|
|
// only applies to main page.
|
|
// This must be limited to vector-page-titlebar as the mw-portlet-lang class is shared with
|
|
// the language portlet that can display in the sidebar.
|
|
.vector-page-titlebar .mw-portlet-lang {
|
|
// FIXME [review whether margin-top is needed] center vertically in heading.
|
|
margin-top: 2px;
|
|
box-sizing: border-box;
|
|
height: @height-button-lang;
|
|
flex-shrink: 0;
|
|
|
|
// The language button is a BUTTON ICON not a standalone ICON so different rules apply
|
|
// It might make sense to have a mw-ui-icon-flush-right-button class in core to replace this.
|
|
&.mw-ui-icon-flush-right {
|
|
// This number should be synced with the value in:
|
|
// https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less#L33
|
|
margin-right: -12px;
|
|
}
|
|
|
|
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
|
|
// the button altogether.
|
|
.mw-portlet-lang-heading-0 {
|
|
.client-nojs & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vector-menu-heading {
|
|
// Prevent select of span text "X languages"
|
|
user-select: none;
|
|
// Remove opacity on language button (it applies to more menu because of label color).
|
|
opacity: 1;
|
|
|
|
.vector-menu-heading-label {
|
|
// Special treatment for language button, based on Vector font-size
|
|
font-size: @font-size-base;
|
|
}
|
|
|
|
// T291286: Temporarily use progressive ULS style
|
|
&.mw-ui-progressive.mw-ui-quiet {
|
|
.mw-ui-icon:before {
|
|
// Ensure inverted language icon is white
|
|
opacity: 1;
|
|
}
|
|
|
|
&:after {
|
|
// Invert arrow color
|
|
background-image: url( ../common/images/arrow-down-progressive.svg );
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
input:active + .vector-menu-heading {
|
|
&.mw-ui-progressive.mw-ui-quiet {
|
|
.mw-ui-icon {
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
filter: brightness( 0 ) invert( 1 );
|
|
}
|
|
|
|
&:after {
|
|
background-image: url( ../common/images/arrow-down-invert.svg );
|
|
}
|
|
}
|
|
}
|
|
|
|
.vector-menu-content {
|
|
top: auto;
|
|
left: -@border-width-base;
|
|
right: -@border-width-base;
|
|
// align borders of open menu align with button
|
|
box-sizing: border-box;
|
|
max-height: 65vh;
|
|
overflow: auto;
|
|
|
|
// Adds to the show/hide technique in Dropdown.less with
|
|
// display to prevent rendering and long scrolling on Main page
|
|
display: none;
|
|
|
|
li a {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.vector-menu-checkbox:checked ~ .vector-menu-content {
|
|
display: block;
|
|
}
|
|
|
|
.after-portlet {
|
|
// ensure there is a visual separation between the language links and additional links.
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
// Hides language button with CSS, ensures language button is in DOM for temporary JS hack for interwiki links
|
|
// Temporary solution to T287206, can be removed when ULS dialog includes interwiki links
|
|
#p-lang-btn.mw-portlet-empty {
|
|
display: none;
|
|
}
|
|
|
|
.mw-interlanguage-selector {
|
|
display: flex;
|
|
|
|
&:after {
|
|
.mixin-vector-menu-heading-arrow();
|
|
}
|
|
}
|