@universal-material/web/dialog/dialog.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --u-elevation-level: var(--u-dialog-elevation, 3);
    --_icon-size: var(--u-dialog-icon-size, 24px);
    --_divider-color: var(--u-dialog-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
    --_scrim-opacity: var(--u-dialog-scrim-opacity, .32);
    --_padding: var(--u-dialog-padding, 24px);
  }

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

  :host([has-icon]) .icon {
    display: flex;
  }
  :host([has-icon]) .headline {
    padding-top: 0;
  }
  :host([has-icon]) .headline,
  :host([has-icon]) .container {
    text-align: center;
  }

  :host([has-headline]) .content.top-divider,
  :host([has-icon]) .content.top-divider {
    border-top: 1px solid var(--_divider-color);
    margin-top: -1px;
  }

  .scrim {
    position: fixed;
    inset: 0;
    background-color: var(--u-dialog-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
    animation: scrim-show-animation 300ms;
    animation-fill-mode: forwards;
    z-index: -1;
  }

  dialog {
    align-items: center;
    background: none;
    border: none;
    overflow: visible;
    padding: var(--_padding);
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
  }
  dialog[open] {
    display: flex;
  }
  dialog::backdrop {
    background: none;
  }

  .container {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    background-color: var(--u-dialog-container-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
    border-radius: var(--u-dialog-border-radius, var(--u-shape-corner-extra-large, 28px));
    min-width: min(var(--u-dialog-min-width, 280px), 100%);
    max-width: var(--u-dialog-max-width, 560px);
    max-height: min(var(--u-dialog-max-height, 560px), 100%);
    animation: show 250ms cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
  }

  .headline,
  .icon,
  .content,
  .actions {
    padding: var(--_padding);
  }

  .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-dialog-headline-line-height, var(--u-headline-s-line-height, 2rem));
    font-size: var(--u-dialog-headline-font-size, var(--u-headline-s-font-size, 1.5rem));
    letter-spacing: var(--u-dialog-headline-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));
    font-weight: var(--u-dialog-headline-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));
    padding-bottom: var(--u-headline-padding, 16px);
  }

  .icon {
    display: none;
    justify-content: center;
    align-items: center;
    font-size: var(--_icon-size);
    line-height: var(--_icon-size);
    color: var(--u-dialog-icon-color, var(--u-color-secondary, rgb(98, 91, 113)));
    padding-bottom: var(--u-icon-padding, 16px);
  }

  .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-dialog-content-line-height, var(--u-body-m-line-height, 1.25rem));
    font-size: var(--u-dialog-content-font-size, var(--u-body-m-font-size, 0.875rem));
    letter-spacing: var(--u-dialog-content-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));
    font-weight: var(--u-dialog-content-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));
    color: var(--u-dialog-content-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
    padding-block: 0;
    overflow: auto;
  }
  .content.bottom-divider {
    border-bottom: 1px solid var(--_divider-color);
    margin-bottom: -1px;
  }

  :host(:not([has-headline]):not([has-icon])) .content {
    padding-top: var(--_padding);
  }

  .actions {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    gap: var(--u-dialog-actions-gap, 8px);
  }

  :host(.closing) .container {
    animation-name: close;
  }
  :host(.closing) .scrim {
    animation-name: scrim-close-animation;
  }

  @keyframes scrim-show-animation {
    from {
      opacity: 0;
    }
    to {
      opacity: var(--_scrim-opacity);
    }
  }
  @keyframes scrim-close-animation {
    from {
      opacity: var(--_scrim-opacity);
    }
    to {
      opacity: 0;
    }
  }
  @keyframes show {
    from {
      transform: scale3d(0, 0, 1);
    }
    to {
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes close {
    from {
      transform: scale3d(1, 1, 1);
    }
    to {
      transform: scale3d(0, 0, 1);
    }
  }
`;
//# sourceMappingURL=dialog.styles.js.map