From feb025d8a16ae9b3adc7121366b6d2eb82531da3 Mon Sep 17 00:00:00 2001 From: Volker E Date: Wed, 27 May 2020 20:18:56 -0700 Subject: [PATCH] Horizontally and vertically align menu icon to design templates Put icon on one line with sidebar contents horizontally and with logo vertically. Bug: T246419 Change-Id: I6876e6f39a5f804ad4459cd9721c796ae7a8e3fb --- resources/skins.vector.styles/Sidebar.less | 6 +++--- variables.less | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index f751657..859154f 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/Sidebar.less @@ -21,9 +21,9 @@ .mw-checkbox-hack-button { // The icon is only 44px tall but the header is 50px. Offset by the difference from the logo // icon and center with respect to the header. - top: @height-logo-icon - @size-sidebar-button + ( @height-header - @height-logo-icon ) / 2; - // Some made up value to be revised by Alex. - left: 10px; + top: @margin-top-header + ( ( @height-logo-icon - @size-sidebar-button ) / 2 ); + // FIXME: Replace by proper calculation and variable. + left: 14px; } .mw-checkbox-hack-button { diff --git a/variables.less b/variables.less index 5b82fa5..92a1184 100644 --- a/variables.less +++ b/variables.less @@ -61,6 +61,7 @@ @line-height-footer-info: 1.4; @line-height-footer-buttons: 2; +@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`. // 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. @@ -138,5 +139,3 @@ // Transitions @transition-duration-base: 100ms; - -@size-sidebar-button: 2.75em; // 44px