mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less
Nicholas Ray c22eab914e Add minerva-animations-ready CSS class in Minerva
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.

However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.

MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.

Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
2020-01-09 13:58:37 -07:00

43 lines
972 B
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 @grayDrawerShadow;
.transform( translate( 100%, 0 ) );
.transition( transform @transition-duration-medium @transition-timing-function-menu; );
&.visible {
.transform( translate( 0, 0 ) );
}
}
@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;
}
}
}
}