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

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_fab-menu-morph-duration: var(--u-fab-menu-morph-duration, 175ms);
    --u-button-morph-duration: var(--_fab-menu-morph-duration);
    display: inline-block;
    pointer-events: none;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .menu-items {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: var(--u-fab-menu-item-margin, 4px);
    pointer-events: none;
  }

  .toggle-container {
    position: relative;
  }
  .toggle-container * {
    pointer-events: auto;
  }
  .toggle-container::part(container) {
    --u-elevation-level: 0 !important;
    background: transparent !important;
  }

  .toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    margin-top: var(--u-fab-menu-toggle-margin, 8px);
  }
  .toggle::part(container) {
    transition: width var(--_fab-menu-morph-duration), height var(--_fab-menu-morph-duration), background-color var(--_fab-menu-morph-duration) linear, border-radius var(--_fab-menu-morph-duration) linear, color var(--_fab-menu-morph-duration) linear;
  }

  .icon-container {
    position: relative;
    height: 1px;
  }

  .icon {
    --_scale: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(-50%, -50%, 0) scale(var(--_scale));
    transition: opacity, transform;
    transition-duration: calc(var(--_fab-menu-morph-duration) * 0.75);
  }

  .icon-default {
    --_scale: 1;
    opacity: 1;
    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);
  }

  .icon-close {
    --_scale: .5;
    opacity: 0;
    transition-delay: 0ms;
  }

  .open .menu-items {
    display: flex;
    pointer-events: auto;
  }
  .open .toggle::part(container) {
    border-radius: 50%;
  }
  .open .icon-default {
    --_scale: .5;
    opacity: 0;
    transition-delay: 0ms;
  }
  .open .icon-close {
    --_scale: 1;
    opacity: 1;
    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);
  }
  .open.primary {
    --u-fab-primary-container-color: var(--u-fab-menu-toggle-primary-container-color, var(--u-color-primary, rgb(103, 80, 164)));
    --u-fab-primary-text-color: var(--u-fab-menu-toggle-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
  }
  .open.secondary {
    --u-fab-secondary-container-color: var(--u-fab-menu-toggle-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
    --u-fab-secondary-text-color: var(--u-fab-menu-toggle-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
  }
  .open.tertiary {
    --u-fab-tertiary-container-color: var(--u-fab-menu-toggle-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));
    --u-fab-tertiary-text-color: var(--u-fab-menu-toggle-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }

  ::slotted(u-fab-menu-item) {
    --_animation-delay: $i * 50ms;
  }
`;
//# sourceMappingURL=fab-menu.styles.js.map