mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 19:59:35 +00:00
a43d522331
* Don't hide language button This code can be removed now T287206 is resolved. Also simplify legacy logic - as the language menu is always a portlet there. Additional changes: * Create LanguageButtonDropdown component to distinguish this code from the LanguageButton in the sticky header. * Fixes a style in LanguageButtonDropdown.less which wasn't accounting for multiple vector-menu-content classes Bug: T320927 Bug: T325017 Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
115 lines
3.3 KiB
Plaintext
115 lines
3.3 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 );
|
|
}
|
|
}
|
|
}
|
|
|
|
// The `vector-menu-content` class is present twice in current implementation of language switcher
|
|
// (see FIXME in Dropdown/Open.mustache) so it is important we target the direct child.
|
|
> .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();
|
|
}
|
|
}
|