mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00

55 lines
1.2 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 ) );
}
}
}
.secondary-navigation-enabled {
.transparent-shield {
visibility: visible;
opacity: 0.5;
}
}