Use `opacity` for a WikimediaUI aligned transition on opening menu

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

Change-Id: Iaef15dcd342c15410c56e00988f130056fe269e2
This commit is contained in:
Volker E 2018-11-26 09:54:19 -08:00
parent b9555e4bb3
commit 85cce3dcaa
1 changed files with 9 additions and 3 deletions

View File

@ -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