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

Material web components

import { css } from 'lit';
export const styles = css `
  .container {
    --u-elevation-level: var(--u-fab-elevation-level, 3);
    aspect-ratio: 1;
  }
  @media (hover: hover) {
    .container:hover:not(:focus-within):not(:active) {
      --u-elevation-level: var(--u-fab-hover-elevation-level, 4);
    }
  }

  .lowered {
    --u-elevation-level: var(--u-fab-elevation-level, 1);
  }
  @media (hover: hover) {
    .lowered:hover:not(:focus-within):not(:active) {
      --u-elevation-level: var(--u-fab-elevation-level, 2);
    }
  }

  .small {
    width: var(--u-fab-small-size, 40px);
    border-radius: var(--u-fab-small-shape-corner, var(--u-shape-corner-medium, 12px));
  }

  .large {
    width: var(--u-fab-large-size, 96px);
    border-radius: var(--u-fab-large-shape-corner, var(--u-shape-corner-extra-large, 28px));
  }
  .large .icon {
    font-size: var(--u-fab-large-icon-size, 2rem);
  }

  .extended,
  .medium {
    width: var(--u-fab-medium-size, 56px);
    border-radius: var(--u-fab-medium-shape-corner, var(--u-shape-corner-large, 16px));
  }

  .extended .icon,
  .small .icon,
  .medium .icon {
    font-size: var(--u-fab-icon-size, 1.5rem);
  }

  .extended {
    width: auto;
    height: var(--u-extended-fab-height, 56px);
    aspect-ratio: auto;
    min-width: var(--u-extended-fab-min-width, 80px);
    padding-inline: var(--u-extended-fab-padding, 16px 24px);
  }
  .extended .icon {
    margin-inline-end: var(--u-extended-fab-icon-margin, 12px);
  }

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

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

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

  .branded,
  .surface {
    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
    color: var(--u-fab-surface-text-color, var(--_color-primary));
  }
  .branded.lowered,
  .surface.lowered {
    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
  }
`;
//# sourceMappingURL=fab.styles.js.map