mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less
jdlrobson e72c0d7ba4 Render main menu and shield on server side
This is a second attempt at I3892afb5ed3df628e2845043cf3bbc22a9928921
that is cached HTML friendly and won't cause T234599.

This time rather than solving the entire problem, we'll start rendering
the menu on the server, to allow us in future to drop the Menu code

Bug: T234650
Change-Id: Iea5406ef1c561f2907ec6132481007673aabf1e9
2019-10-04 19:35:28 +00:00

48 lines
1.1 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
/* stylelint-disable no-descending-specificity */
.notifications-overlay {
visibility: visible;
}
// needs to be more specific than .overlay rules
.notifications-overlay.navigation-drawer {
display: block;
width: auto;
right: 0;
box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
}
@media all and ( min-width: @width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
.notifications-overlay.navigation-drawer {
left: @rightDrawerLeftOffset;
.overlay-header {
margin: 0; // T210191
width: 100%; // T218731
// T170903
max-width: none;
.cancel {
// 0 because we want to have some tappable area to the left of the icon
left: 0;
}
}
}
}
.animations { // FIXME: Make animations a conditional class on the drawer itself
.notifications-overlay.navigation-drawer {
.transform( translate( 100%, 0 ) );
.transition( transform @menu-animation-duration @menu-animation-easing; );
&.visible {
.transform( translate( 0, 0 ) );
}
}
}