mediawiki-skins-Vector/resources/skins.vector.styles/components/LanguageButton.less
bwang 61e723c541 TOC: Ensure TOC spacing is correct when grid is enabled
Fix usage of CSS calc

Change-Id: I6dcf3751a4b478a14d8052a70720e138238203d3
2022-06-24 23:09:50 +00:00

122 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 'mediawiki.mixins.less';
// TODO: `#p-lang-btn` Can be removed after Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
// has been in prod for 5 days.
#p-lang-btn,
.vector-language-in-header-enabled .mw-portlet-lang {
// FIXME [review whether margin-top is needed] center vertically in heading.
margin-top: 2px;
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 {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
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;
.vector-menu-heading-label {
// Special treatment for language button, based on Vector font-size
font-size: @font-size-base;
}
&:after {
top: 0;
}
// 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 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;
}
}
// 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;
}
#p-lang-btn-sticky-header {
@button-padding: 12px;
@arrow-width: 18px;
position: relative;
padding-right: ~'calc( @{button-padding} + @{arrow-width} )';
white-space: nowrap;
&:after {
content: '';
background-image: url( ../common/images/arrow-down.svg );
background-position: 100% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: @button-padding;
bottom: 0;
width: @arrow-width;
// Modify the color of the image from the default #202122 to approx. #404244 to match the text.
opacity: 0.84;
}
}