@universal-material/web/menu/menu.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --u-elevation-level: var(--u-menu-elevation-level, 2);
    display: block;
    width: 0;
  }

  :host([positioning=relative]) {
    position: relative;
  }

  :host([positioning=fixed]) {
    position: fixed;
  }

  .ref {
    position: absolute;
    inset-inline-start: 0;
    pointer-events: none;
  }

  .content {
    width: 100%;
    padding-block: var(--u-menu-padding, 8px);
    opacity: 0;
    transition: opacity 1ms 400ms;
    scroll-padding-block: 32px;
    overflow: auto;
  }

  .menu {
    position: absolute;
    display: flex;
    min-width: var(--u-menu-min-width, 112px);
    max-width: var(--u-menu-max-width, 280px);
    background: var(--u-menu-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));
    border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));
    opacity: 0;
    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;
    transform: scale3d(1, 0, 0);
    transform-origin: top;
    z-index: var(--u-menu-z-index, 1020);
  }
  .menu.up {
    transform-origin: bottom;
  }
  .menu.open {
    opacity: 1;
    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;
    transform: scale3d(1, 1, 1);
  }
  .menu.open .content {
    opacity: 1;
    transition: opacity 300ms 150ms;
  }

  @keyframes menu-open {
    from {
      opacity: 0;
      transform: scale3d(1, 0, 0);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
`;
//# sourceMappingURL=menu.styles.js.map