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

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    aspect-ratio: 1;
    --u-elevation-level: var(--u-fab-button-elevation-level, 3);
  }

  :host([lowered]) {
    --u-elevation-level: var(--u-fab-button-elevation-level, 1);
  }

  @media (hover: hover) {
    :host(:hover:not(:focus-within):not(:active)) {
      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
    }
    :host(:hover:not(:focus-within):not(:active)[lowered]) {
      --u-elevation-level: var(--u-fab-button-elevation-level, 2);
    }
  }
  @media (hover: hover) {
    :host(:hover:not(:focus-within):not(:active)) {
      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
    }
  }
  :host([size=small]) {
    width: var(--u-fab-button-small-size, 40px);
    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));
  }

  :host([size=large]) {
    width: var(--u-fab-button-medium-size, 96px);
    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));
  }

  :host([extended]),
  :host([size=medium]) {
    width: var(--u-fab-button-medium-size, 56px);
    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));
  }

  :host([size=large]) .icon {
    font-size: var(--u-fab-button-icon-size, 2rem);
  }

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

  :host([extended]) {
    width: auto;
    height: var(--u-extended-fab-button-height, 56px);
    aspect-ratio: auto;
    min-width: var(--u-extended-fab-button-min-width, 80px);
    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);
  }

  :host([extended]) .icon {
    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
  }

  :host([color=primary]) {
    background-color: var(--u-fab-button-primary-bg-color, var(--u-color-primary-container, rgb(234, 221, 255)));
    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
  }

  :host([color=secondary]) {
    background-color: var(--u-fab-button-secondary-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
  }

  :host([color=tertiary]) {
    background-color: var(--u-fab-button-tertiary-bg-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));
    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));
  }

  :host([color=branded]),
  :host([color=surface]) {
    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
    color: var(--u-fab-button-surface-text-color, var(--_color-primary));
  }

  :host([color=branded][lowered]),
  :host([color=surface][lowered]) {
    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
  }
`;
//# sourceMappingURL=fab.styles.js.map