When the user clicks .pxh-drawer-toggle__link
or .pxh-view-header-drawer-toggle__link
…
.pxh-overlay
and toggle the class pxh-overlay--hidden
on it// Base styles for the overlay to display when
// pxh-drawer is toggled open on mobile and tablet.
.pxh-overlay {
z-index: 500;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 200ms ease-in-out;
}
// Modifier class that hides the overlay.
.pxh-overlay--hidden {
pointer-events: none;
background-color: rgba(0, 0, 0, 0);
}
// From the @lg (desktop) breakpoint and wider,
// prevent the overlay from being shown at all.
@include mq($from: lg) {
.pxh-overlay--hidden\@lg {
pointer-events: none;
background-color: rgba(0, 0, 0, 0);
}
}