Merge "Use opacity for a WikimediaUI aligned transition on opening menu"

This commit is contained in:
jenkins-bot 2019-01-10 07:04:38 +00:00 committed by Gerrit Code Review
commit b4355e039f

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) * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
*/ */
@ -149,19 +151,23 @@
padding: 0; padding: 0;
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
text-align: left; 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) // Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
z-index: 2; z-index: 2;
} }
&:hover .menu { &: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 // This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
// Support: IE8 // Support: IE8
.vectorMenuCheckbox:checked ~ .menu { .vectorMenuCheckbox:checked ~ .menu {
display: block; opacity: 1;
visibility: visible;
} }
// FIXME: `.vectorMenu ul` can be removed with purged HTML cache // FIXME: `.vectorMenu ul` can be removed with purged HTML cache