mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-03 02:06:43 +00:00
c22eab914e
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
43 lines
972 B
Plaintext
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;
|
|
}
|
|
}
|
|
}
|
|
}
|