@universal-material/web/button/fab-menu-item.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  .container {
    --_animation-duration: 225ms;
    --_height: var(--u-fab-menu-item-height, 56px);
    height: var(--_height);
    border-radius: calc(var(--_height) / 2);
    padding-inline: var(--u-fab-menu-item-padding, 24px);
    opacity: 0;
    transition: opacity var(--_animation-duration) linear;
  }
  .container:not(.has-icon) .icon {
    display: none;
  }

  .icon {
    font-size: var(--u-fab-icon-size, 1.5rem);
    margin-inline-end: var(--u-fab-menu-item-icon-margin, 8px);
  }

  .label {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-fab-menu-item-label-line-height, var(--u-title-m-line-height, 1.5rem));
    font-size: var(--u-fab-menu-item-label-font-size, var(--u-title-m-font-size, 1rem));
    letter-spacing: var(--u-fab-menu-item-label-letter-spacing, var(--u-title-m-letter-spacing, 0.009375rem));
    font-weight: var(--u-fab-menu-item-label-font-weight, var(--u-title-m-font-weight, var(--u-font-weight-medium, 500)));
  }

  .primary {
    background-color: var(--u-fab-menu-item-primary-container-color, var(--u-color-primary-container, rgb(234, 221, 255)));
    color: var(--u-fab-menu-item-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
  }

  .secondary {
    background-color: var(--u-fab-menu-item-secondary-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
    color: var(--u-fab-menu-item-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
  }

  .tertiary {
    background-color: var(--u-fab-menu-item-tertiary-container-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));
    color: var(--u-fab-menu-item-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));
  }

  .clipper {
    animation: clip-out var(--_animation-duration) forwards linear;
  }

  .open {
    opacity: 1;
    transition-delay: calc(75ms * var(--_animation-delay-increment, 0));
  }
  .open .clipper {
    animation-name: clip-in;
  }
  .open .clipper {
    animation-delay: calc(75ms * var(--_animation-delay-increment, 0));
  }

  @keyframes clip-in {
    0% {
      margin-inline-start: -32px;
    }
    25% {
      margin-inline-start: -8px;
    }
    50% {
      margin-inline-start: 16px;
    }
    100% {
      margin-inline-start: 0;
    }
  }
  @keyframes clip-out {
    0% {
      margin-inline-start: 0;
    }
    100% {
      margin-inline-start: -32px;
    }
  }
`;
//# sourceMappingURL=fab-menu-item.styles.js.map