Style the language button

For now the core button mixins are used. In the longer
term we should aim to leverage wvui.

Bug: T268241
Change-Id: I334af039567c52462bcb4c15f07242c6de8eeace
This commit is contained in:
jdlrobson 2021-02-01 15:13:58 -08:00 committed by DannyS712
parent d50eef9cf6
commit 98e7bce753
2 changed files with 14 additions and 1 deletions

View File

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "9.6 kB"
"maxSize": "9.7 kB"
},
{
"resourceModule": "skins.vector.styles.responsive",

View File

@ -3,17 +3,30 @@
// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.mw-body-header .mw-portlet-lang {
.mw-ui-button-states();
h3 {
// In future this should use wvui
.mw-ui-button();
padding-right: 40px;
// make sure label is center aligned.
display: flex;
align-items: center;
&:after {
top: 0;
}
}
.vector-menu-content {
top: auto;
right: 0;
// align borders of open menu align with button
box-sizing: border-box;
}
.after-portlet {
// ensure there is a visual separation between the language links and additional links.
margin-top: 8px;
}
}