mediawiki-skins-Vector/resources/skins.vector.styles/components/LanguageButton.less
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00

84 lines
2.2 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 'mediawiki.mixins.less';
// TODO: `#p-lang-btn` Can be changed to `.mw-portlet-lang` when languages-in-header is the default.
#p-lang-btn {
.box-sizing( border-box );
height: @height-lang-button;
.mw-ui-icon:before {
// Put icon on correct standard normal state color.
opacity: 0.87;
}
.vector-menu-heading {
font-size: initial;
// reset padding styles in MenuDropdown.less with right padding for arrow.
padding-right: 30px;
padding-left: 8px;
// 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;
// mw-ui-icon resets the button border.
border: 1px solid transparent;
// center vertically in heading.
margin-top: 2px;
span {
// Special treatment for language button, based on Vector font-size
font-size: @font-size-base;
}
&:after {
top: 0;
}
}
.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: scroll;
border-top-width: 1px;
// Adds to the show/hide technique in MenuDropdown.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;
}
}
// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.client-js #p-lang-btn {
// When the ext.uls.interface module is loaded, we hide the fallback menu and checkbox.
&.vector-menu-hide-dropdown {
.vector-menu-content {
display: none;
}
}
}
// 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;
}