wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 23:55:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix][a11y][Less] use percentage for sidebar button icon size

Browse source 
The sidebar button's icon previously used pixel dimensions while the
button itself uses ems. This caused the button to scale with the user's
font such that the icon is distorted and unrecognizable.

This patch drops the vertical margin and sets the icon height to 100%.
The width is proportionally constrained so the effect is that the icon
may grow with the button but the margin stays consistently at 12px.

This approach deviates from other items in the header (globe,
notifications) and tab bar (watchstar, search icon), that were 
historically implemented without the user text zoom capability in mind.

Bug: T246419
Change-Id: I2ae46fd49dcb619004587b8b3560b9115c3bdaaa
This commit is contained in:
Stephen Niedzielski 2020-05-29 11:59:40 -06:00 committed by Jdlrobson
parent a4a3c17a99
commit 909cbaac11
1 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/skins.vector.styles/Sidebar.less
View file

@ -38,11 +38,13 @@
border-radius: @border-radius-base;
&:before {
// Center it.
margin: 12px;
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
// As soon as mediawiki.ui is standardized, remove this override. See T191021.
min-width: 20px;
min-height: 20px;
height: 100%;
// Center it horizontally.
margin: 0 12px;
opacity: 0.87;
}