From 29c515ae3f694f8c051999195ca39cb1a05e2355 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Sat, 4 Nov 2017 20:29:49 -0700
Subject: [PATCH] Align VectorMenu items and unify `padding` with tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligning VectorMenu items horizontally with menu handle and
set `padding` consistently to `8px` – taking into account
different `font-size`.
Also removing unnecessary duplication of `margin-top` as `margin`
is set in same rule.

Bug: T179782
Change-Id: I30e9b4e50589ef09a0e5dcb0e6c4486e7779a39d
---
 components/tabs.less      | 10 +++++-----
 components/watchstar.less |  3 +--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/tabs.less b/components/tabs.less
index ab5f96b..d49f8c3 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -90,8 +90,8 @@ div.vectorTabs {
 			/* For IE6, overridden later to display:block by modern browsers */
 			display: inline-block;
 			height: 1.9em;
-			padding-left: 0.5em;
-			padding-right: 0.5em;
+			padding-left: 0.625em; // equals `8px` at computed `font-size` of `12.8px`
+			padding-right: 0.625em;
 			color: @menu-link-color;
 			cursor: pointer;
 			font-size: 0.8em;
@@ -155,7 +155,7 @@ div#mw-head div.vectorMenu h3 {
 	height: 2.5em;
 	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real
 	// border. It is necessary for `div.vectorMenu div.menu` dropdown to align well.
-	padding-right: 0.5em; // equals `8px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
+	padding-right: 0.5em; // equals `8px` at computed `font-size` of `14px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
 	margin-right: -1px;
 
 	.vector-nav-directionality & {
@@ -167,7 +167,7 @@ div.vectorMenu h3 {
 	span {
 		display: block;
 		font-size: 0.8em;
-		padding-left: 0.7em;
+		padding-left: 0.625em;
 		padding-top: 1.25em;
 		padding-right: 16px;
 		font-weight: normal;
@@ -242,7 +242,7 @@ div.vectorMenu li {
 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 div.vectorMenu li a {
 	display: inline-block;
-	padding: 0.5em;
+	padding: 0.625em;
 	white-space: nowrap;
 	color: @menu-link-color;
 	cursor: pointer;
diff --git a/components/watchstar.less b/components/watchstar.less
index a4315ec..da51133 100644
--- a/components/watchstar.less
+++ b/components/watchstar.less
@@ -9,10 +9,9 @@
 		margin: 0;
 		padding: 0;
 		display: block;
-		width: 26px;
+		width: 28px;
 		/* This hides the text but shows the background image */
 		padding-top: 3.1em;
-		margin-top: 0;
 		/* Only applied in IE6 */
 		_margin-top: -0.8em;
 		height: 0;