web-expressive/dist/components/extended-fab.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.components{.extended-fab{--_background:var(--sys-color-primary-container);--_color:var(--sys-color-on-primary-container);--_state:transparent;--_outline-width:0px;--_shadow:var(--sys-elevation-level-3);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;gap:var(--_gap);transition:outline-width var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-pop-focus);cursor:pointer;outline:var(--_outline-width) solid var(--sys-color-secondary);outline-offset:2px;box-shadow:var(--_shadow);border-radius:var(--_corner);background:var(--_background);isolation:isolate;padding:var(--sys-measurement-space-0) var(--_padding-inline);inline-size:fit-content;block-size:var(--_block-size);color:var(--_color);font:var(--_font);user-select:none;white-space:nowrap;border:none;text-decoration:none;display:inline-flex;position:relative;overflow:clip;& .icon{--_fill:1;inline-size:var(--_icon-font-size);block-size:var(--_icon-font-size);font-size:var(--_icon-font-size);line-height:1;font-family:var(--ref-typeface-symbols);font-variation-settings:"FILL" var(--_fill), "wght" 400, "GRAD" 0, "opsz" 24;font-feature-settings:"liga";white-space:nowrap;display:inline-block;overflow:clip;&.no-fill{--_fill:0}&:is(svg){fill:var(--_color)}&:is(img){object-fit:cover}}&:after{z-index:-1;border-radius:var(--_corner);background:var(--_state);content:"";position:absolute;inset:0}&:hover{--_state:oklch(from var(--_color) l c h / 8%);--_shadow:var(--sys-elevation-level-4)}&:focus-visible{--_state:oklch(from var(--_color) l c h / 10%);--_outline-width:3px;--_shadow:var(--sys-elevation-level-3)}&:active{--_state:oklch(from var(--_color) l c h / 10%);--_shadow:var(--sys-elevation-level-3)}&.primary-container{--_background:var(--sys-color-primary-container);--_color:var(--sys-color-on-primary-container)}&.secondary-container{--_background:var(--sys-color-secondary-container);--_color:var(--sys-color-on-secondary-container)}&.tertiary-container{--_background:var(--sys-color-tertiary-container);--_color:var(--sys-color-on-tertiary-container)}&.primary{--_background:var(--sys-color-primary);--_color:var(--sys-color-on-primary)}&.secondary{--_background:var(--sys-color-secondary);--_color:var(--sys-color-on-secondary)}&.tertiary{--_background:var(--sys-color-tertiary);--_color:var(--sys-color-on-tertiary)}}.extended-fab{--_extended-measurement-space-325:1.625rem;--_extended-measurement-space-350:1.75rem;--_block-size:3.5rem;--_font:var(--sys-typescale-title-medium);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.5rem;--_padding-inline:var(--sys-measurement-space-200);--_corner:var(--sys-shape-corner-large);&:not(.small){@container style(--size-items:medium){--_block-size:5rem;--_corner:var(--sys-shape-corner-large-increased);--_font:var(--sys-typescale-title-large);--_gap:var(--sys-measurement-space-150);--_icon-font-size:1.75rem;--_padding-inline:var(--_extended-measurement-space-325)}@container style(--size-items:large){--_block-size:6rem;--_corner:var(--sys-shape-corner-extra-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.25rem;--_padding-inline:var(--_extended-measurement-space-350)}}&.medium{--_block-size:5rem;--_corner:var(--sys-shape-corner-large-increased);--_font:var(--sys-typescale-title-large);--_gap:var(--sys-measurement-space-150);--_icon-font-size:1.75rem;--_padding-inline:var(--_extended-measurement-space-325)}&.large{--_block-size:6rem;--_corner:var(--sys-shape-corner-extra-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.25rem;--_padding-inline:var(--_extended-measurement-space-350)}}}