Predix

Notifications
There are no new notifications.

Overlay

Javascript:

When the user clicks .pxh-drawer-toggle__link or .pxh-view-header-drawer-toggle__link

  • Find .pxh-overlay and toggle the class pxh-overlay--hidden on it

Sass:

// 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);
    }
  }