From 85cce3dcaa51af5861989c6f942afe8f270fa85d Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 26 Nov 2018 09:54:19 -0800
Subject: [PATCH] Use `opacity` for a WikimediaUI aligned transition on opening
 menu

Replacing `display` with `visibility` and add a transition to
overflow menu.

Change-Id: Iaef15dcd342c15410c56e00988f130056fe269e2
---
 components/tabs.less | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/tabs.less b/components/tabs.less
index 4f863e44e..1c2e54c6a 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 /**
  * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
  */
@@ -148,19 +150,23 @@
 		padding: 0;
 		box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
 		text-align: left;
-		display: none;
+		opacity: 0;
+		visibility: hidden;
+		.transition( opacity 100ms );
 		// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
 		z-index: 2;
 	}
 
 	&:hover .menu {
-		display: block;
+		opacity: 1;
+		visibility: visible;
 	}
 
 	// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
 	// Support: IE8
 	.vectorMenuCheckbox:checked ~ .menu {
-		display: block;
+		opacity: 1;
+		visibility: visible;
 	}
 
 	// FIXME: `.vectorMenu ul` can be removed with purged HTML cache