@universal-material/web/navigation/side-navigation.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_navigation-width: 0;
    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);
    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);
    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));
    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);
    display: block;
    width: 100%;
    height: 100%;
    --u-app-bar-offset: var(--_navigation-width);
  }

  :host(.disable-transition) * {
    transition: none !important;
  }
  :host(.disable-transition) * ::slotted(u-top-app-bar) {
    transition: none !important;
  }

  .drawer {
    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  .drawer,
  .drawer u-elevation,
  .drawer .drawer-container {
    border-start-end-radius: var(--_navigation-drawer-corner-shape);
    border-end-end-radius: var(--_navigation-drawer-corner-shape);
  }
  .drawer.toggle u-elevation {
    --u-elevation-level: 1;
  }

  .drawer-container {
    height: 100%;
    overflow: hidden;
  }

  .scrim {
    --_modal-drawer-open-progress: 0;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100vw;
    height: 100vh;
    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
    pointer-events: none;
    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));
    transition: opacity 375ms linear;
  }
  .scrim.moving {
    transition: none;
  }
  .scrim.toggle {
    --_modal-drawer-open-progress: 1;
    pointer-events: auto;
  }

  @media (min-width: 840px) {
    .content slot {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
  }
  @media (min-width: 1200px) {
    .container {
      --_navigation-width: var(--_navigation-drawer-width);
    }
    .container:has(.drawer.toggle) {
      --_navigation-width: 0;
    }
    .drawer {
      border-radius: 0;
      inset-inline-start: 0;
    }
    .drawer.toggle {
      inset-inline-start: var(--_navigation-drawer-width-negative);
    }
    u-elevation,
    .scrim {
      display: none;
    }
  }
  .navigation {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    height: 100%;
    z-index: var(--u-side-navigation-z-index, 1030);
  }

  .drawer {
    position: absolute;
    inset-inline-start: var(--_navigation-drawer-width-negative);
    inset-block-start: 0;
    width: var(--_navigation-drawer-width);
    height: 100%;
    border-start-end-radius: var(--_navigation-drawer-corner-shape);
    border-end-end-radius: var(--_navigation-drawer-corner-shape);
    overflow: hidden;
  }
  .drawer.toggle {
    inset-inline-start: 0;
  }

  .grid {
    display: grid;
    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
    transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);
    --u-app-bar-offset: var(--_navigation-width);
  }

  @media (min-width: 1200px) {
    .drawer {
      inset-inline-start: 0;
    }
    .drawer.toggle {
      inset-inline-start: var(--_navigation-drawer-width-negative);
    }
  }
`;
//# sourceMappingURL=side-navigation.styles.js.map