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

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --u-elevation-level: var(--u-snackbar-elevation-level, 3);
    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--_snackbar-margin);
    z-index: var(--u-snackbar-z-index, 1070);
    display: flex;
    justify-content: center;
  }

  .snackbar {
    display: flex;
    align-items: center;
    min-height: var(--u-snackbar-height, 48px);
    color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
    background-color: var(--u-snackbar-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));
    animation-name: snackbar-fade-in;
    animation-duration: 450ms;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-fill-mode: forwards;
    min-width: var(--u-snackbar-min-width, 100%);
    max-width: var(--u-snackbar-max-width, 100%);
  }
  .snackbar.dismiss {
    animation-name: snackbar-fade-out;
  }

  u-button {
    color: var(--u-color-inverse-primary, );
    margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));
  }

  u-icon-button {
    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));
    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));
  }

  .label {
    flex: 1;
    overflow: hidden;
    color: var(--u-on-inverse-surface-color);
    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));
    line-height: 18px;
  }

  @media (min-width: 840px) {
    :host {
      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));
    }
    .snackbar {
      min-width: var(--u-snackbar-min-width, 288px);
      max-width: var(--u-snackbar-max-width, 568px);
    }
  }
  @keyframes snackbar-fade-in {
    0% {
      opacity: 0;
      transform: scale3d(0.5, 0.5, 1);
    }
    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes snackbar-fade-out {
    0% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
    100% {
      opacity: 0;
      transform: scale3d(0.5, 0.5, 1);
    }
  }
`;
//# sourceMappingURL=snackbar.styles.js.map