From 909cbaac11285234458cb7adcaae5192b32ba4fe Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Fri, 29 May 2020 11:59:40 -0600 Subject: [PATCH] [fix][a11y][Less] use percentage for sidebar button icon size 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 --- resources/skins.vector.styles/Sidebar.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index 859154f5c..782a63b29 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/Sidebar.less @@ -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; }