@universal-material/web/app-bar/top-app-bar.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    display: block;
    background-color: var(--u-top-app-bar-bg-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));
    color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
    transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  :host([container-scrolled]) {
    background-color: var(--u-top-app-bar-constrast-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));
  }

  :host(:not([has-leading-icon])) .leading-icon {
    display: none;
  }

  :host(:not([has-trailing-icon])) .trailing-icon {
    display: none;
  }

  slot[name=leading-icon],
  slot[name=trailing-icon] {
    display: inline-flex;
    align-items: center;
    gap: var(--u-top-app-bar-icons-gap, 8px);
  }

  slot[name=leading-icon]::slotted(u-icon-button) {
    color: inherit;
  }

  :host([position=absolute]) .container {
    position: absolute;
  }

  :host([position=fixed]) .container {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    inset-inline-start: var(--u-app-bar-offset, 0);
  }

  :host([position=absolute]),
  :host([position=fixed]) {
    padding-top: var(--_content-height);
  }
  :host([position=absolute]) .container,
  :host([position=fixed]) .container {
    z-index: var(--u-fixed-app-bar-z-index, 1010);
  }

  .extended-content {
    display: flex;
    align-items: flex-end;
    padding-inline: var(--u-extended-content-inline-padding, 16px);
  }

  :host([size=medium]) .extended-content {
    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-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem));
    font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem));
    letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));
    font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));
    height: var(--u-extended-content-medium-height, 3.5rem);
    padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);
  }

  :host([size=large]) .extended-content {
    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-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem));
    font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem));
    letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem));
    font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400)));
    height: var(--u-extended-content-medium-large, 6rem);
    padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);
  }

  .container {
    background: inherit;
  }

  .content {
    display: flex;
    align-items: center;
    background-color: inherit;
    transition: inherit;
    min-height: var(--u-top-app-bar-min-height, 56px);
  }
  @media (min-width: 840px) {
    .content {
      min-height: var(--u-top-app-bar-extended-min-height, 64px);
    }
  }

  .headline {
    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-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));
    font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));
    letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));
    font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));
    margin-inline: var(--u-headline-margin, 16px);
  }
  :host([has-leading-icon]) .headline {
    margin-inline-start: 0;
  }

  .leading-icon {
    margin-inline: var(--u-leading-icon-margin, 8px);
  }

  .trailing-icon {
    padding-inline: var(--u-trailing-icon-margin, 8px);
    margin-inline-start: auto;
  }
`;
//# sourceMappingURL=top-app-bar.styles.js.map