mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-13 17:57:06 +00:00
96136a0e2d
Depends-On: Id08590f6a3fbbfda8226f2899f50f0b64cbb1481 Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa Bug: T191021
99 lines
2.6 KiB
Plaintext
99 lines
2.6 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;
|
|
// Hack: mw-ui-icon is not designed to be used with mw-ui-button
|
|
// Must disable min-height of mw-ui-button
|
|
min-height: 22px;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
// Disable border-radius when dropdown menu open
|
|
.client-nojs {
|
|
#p-lang-btn:hover .vector-menu-heading,
|
|
.vector-menu-checkbox:checked + .vector-menu-heading {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
// The `.mw-interlanguage-selector` is toggled off through js if the
|
|
// `ext.uls.interface` module is not being loaded.
|
|
.mw-interlanguage-selector {
|
|
// Remove the ULS language icon provided by ext.uls.compactlinks.less as we
|
|
// are already providing no-js users an icon.
|
|
background-image: none;
|
|
}
|
|
|
|
// When the ext.uls.interface module is loaded, we hide the fallback menu and
|
|
// checkbox.
|
|
&.vector-menu--hide-dropdown {
|
|
.vector-menu-checkbox,
|
|
.vector-menu-content {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|