Language button - design fixes

* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)

Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
This commit is contained in:
jdlrobson 2021-02-04 18:14:21 -08:00 committed by Jdlrobson
parent 0e0d04b92b
commit 0e0ec99c81
2 changed files with 13 additions and 2 deletions

View File

@ -6,9 +6,10 @@
.mw-ui-button-states();
.vector-menu-heading {
color: inherit;
// In future this should use wvui
.mw-ui-button();
padding-right: 40px;
padding-right: 30px;
// make sure label is center aligned.
display: flex;
align-items: center;
@ -23,11 +24,18 @@
right: 0;
// align borders of open menu align with button
box-sizing: border-box;
max-height: 65vh;
overflow: scroll;
border-top-width: 1px;
li a {
font-size: inherit;
}
}
.after-portlet {
// ensure there is a visual separation between the language links and additional links.
margin-top: 8px;
margin-top: 10px;
}
}

View File

@ -3,4 +3,7 @@
.mw-page-container .mw-ui-icon:before {
// mw-ui-icon in core defaults to 24x24. The style guide now requests 20x20.
background-size: 20px auto;
width: 20px;
height: 20px;
min-height: 20px;
}