golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

[styles] LanguageButton: Amend icon color by setting opacity 

Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
This commit is contained in:
Volker E 2021-03-22 15:59:18 -07:00 committed by Jdlrobson
parent 06f82148a9
commit 5a1a382c17
4 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/skins.vector.styles/LanguageButton.less
View File

@ -1,9 +1,16 @@
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
@import '../../variables.less';
@import 'mediawiki.mixins.less';
// mw-body-header class can be removed when language button is the default.
// `.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-icon:before {
margin-right: 8px;
// Put icon on correct standard normal state color.
opacity: 0.87;
}
.vector-menu-heading {
// Special treatment for language button, based on Vector font-size
font-size: @font-size-base;
@ -13,6 +20,7 @@
padding: 4px 30px 4px 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;
&:after {
@ -24,7 +32,7 @@
top: auto;
right: 0;
// align borders of open menu align with button
box-sizing: border-box;
.box-sizing( border-box );
max-height: 65vh;
overflow: scroll;
border-top-width: 1px;

2
skin.json
View File

@ -131,7 +131,7 @@
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
"useDataURI": false,
"defaultColor": "#54595d",
"defaultColor": "#000",
"class": "ResourceLoaderOOUIIconPackModule",
"variants": [],
"icons": [

16
skinStyles/mediawiki.ui.icon.less
View File

@ -1,10 +1,10 @@
// The .mw-page-container class is used to restrict this to the modern Vector.
// This element is not needed in legacy Vector.
// Override core's `.mw-ui-icon` which defaults to 24x24.
// The Design Style Guide and its icons are now set to 20x20.
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
@import '../variables.less';
.mw-portlet-lang .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;
margin-right: 8px;
background-size: unit( @size-icon / @font-size-base, em ) auto;
width: unit( @size-icon / @font-size-base, em );
height: unit( @size-icon / @font-size-base, em );
}

6
variables.less
View File

@ -56,6 +56,12 @@
@line-height-footer-buttons: 2;
@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
@size-icon: unit( 20 / @font-size-browser, em );
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
// FIXME: Use global variable since Echo and CentralNotice use this variable
@border-color-content: #a7d7f9;
// Due to darker background gradient, border needs to be darkened for aligned visual perception.