@vaadin/vaadin-lumo-styles/src/components/notification-card.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_notification-card {
  :host {
    display: block;
    position: relative;
    margin: var(--lumo-space-s);
  }

  [part='overlay'] {
    pointer-events: auto;
    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    border-radius: var(--lumo-border-radius-l);
    box-shadow:
      0 0 0 1px var(--lumo-contrast-10pct),
      var(--lumo-box-shadow-l);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    font-weight: 400;
    line-height: var(--lumo-line-height-s);
    letter-spacing: 0;
    text-transform: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  [part='content'] {
    padding: var(--lumo-space-wide-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  [part='content'] ::slotted(vaadin-button) {
    flex: none;
    margin: 0 calc(var(--lumo-space-s) * -1) 0 var(--lumo-space-m);
  }

  :host([slot^='middle']) {
    max-width: 80vw;
    margin: var(--lumo-space-s) auto;
  }

  :host([slot$='stretch']) {
    margin: 0;
  }

  :host([slot$='stretch']) [part='overlay'] {
    border-radius: 0;
  }

  @media (min-width: 421px) {
    :host(:not([slot$='stretch'])) {
      display: flex;
    }

    :host([slot$='end']) {
      justify-content: flex-end;
    }

    :host([slot^='middle']),
    :host([slot$='center']) {
      display: flex;
      justify-content: center;
    }
  }

  @keyframes lumo-notification-exit-fade-out {
    100% {
      opacity: 0;
    }
  }

  @keyframes lumo-notification-enter-fade-in {
    0% {
      opacity: 0;
    }
  }

  @keyframes lumo-notification-enter-slide-down {
    0% {
      transform: translateY(-200%);
      opacity: 0;
    }
  }

  @keyframes lumo-notification-exit-slide-up {
    100% {
      transform: translateY(-200%);
      opacity: 0;
    }
  }

  @keyframes lumo-notification-enter-slide-up {
    0% {
      transform: translateY(200%);
      opacity: 0;
    }
  }

  @keyframes lumo-notification-exit-slide-down {
    100% {
      transform: translateY(200%);
      opacity: 0;
    }
  }

  :host([slot='middle'][opening]) {
    animation: lumo-notification-enter-fade-in 300ms;
  }

  :host([slot='middle'][closing]) {
    animation: lumo-notification-exit-fade-out 300ms;
  }

  :host([slot^='top'][opening]) {
    animation: lumo-notification-enter-slide-down 300ms;
  }

  :host([slot^='top'][closing]) {
    animation: lumo-notification-exit-slide-up 300ms;
  }

  :host([slot^='bottom'][opening]) {
    animation: lumo-notification-enter-slide-up 300ms;
  }

  :host([slot^='bottom'][closing]) {
    animation: lumo-notification-exit-slide-down 300ms;
  }

  :host([theme~='success']) {
    --_focus-ring-gap-color: var(--lumo-success-color);
    --vaadin-focus-ring-color: var(--lumo-success-contrast-color);
  }

  :host([theme~='warning']) {
    --_focus-ring-gap-color: var(--lumo-warning-color);
    --vaadin-focus-ring-color: var(--lumo-warning-contrast-color);
  }

  :host([theme~='error']) {
    --_focus-ring-gap-color: var(--lumo-error-color);
    --vaadin-focus-ring-color: var(--lumo-error-contrast-color);
  }

  :host(:is([theme~='primary'], [theme~='info'])) {
    --_focus-ring-gap-color: var(--lumo-primary-color);
    --vaadin-focus-ring-color: var(--lumo-primary-contrast-color);
  }

  :host(:is([theme~='info'], [theme~='primary'], .v-info.v-primary)) [part='overlay'] {
    background: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
  }

  :host(:is([theme~='info'], [theme~='primary'], .v-info.v-primary)) {
    --vaadin-button-background: var(--lumo-shade-20pct);
    --vaadin-button-text-color: var(--lumo-primary-contrast-color);
    --vaadin-button-primary-background: var(--lumo-primary-contrast-color);
    --vaadin-button-primary-text-color: var(--lumo-primary-text-color);
  }

  :host(.v-info) [part='overlay'] {
    background: linear-gradient(var(--lumo-primary-color-10pct), var(--lumo-primary-color-10pct)) var(--lumo-base-color);
    color: var(--lumo-primary-text-color);
  }

  :host(.v-info) {
    --vaadin-button-background: var(--lumo-primary-color-10pct);
    --vaadin-button-text-color: var(--lumo-primary-text-color);
    --vaadin-button-primary-background: var(--lumo-primary-color);
    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
  }

  :host(:is([theme~='contrast'], .v-primary)) [part='overlay'] {
    background: var(--lumo-contrast);
    color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-l);
  }

  :host(:is([theme~='contrast'], .v-primary)) {
    --vaadin-button-background: var(--lumo-contrast-20pct);
    --vaadin-button-text-color: var(--lumo-base-color);
    --vaadin-button-primary-background: var(--lumo-base-color);
    --vaadin-button-primary-text-color: var(--lumo-contrast);
  }

  :host(:is([theme~='success'], .v-success.v-primary)) [part='overlay'] {
    background: var(--lumo-success-color);
    color: var(--lumo-success-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
  }

  :host(:is([theme~='success'], .v-success.v-primary)) {
    --vaadin-button-background: var(--lumo-shade-20pct);
    --vaadin-button-text-color: var(--lumo-success-contrast-color);
    --vaadin-button-primary-background: var(--lumo-success-contrast-color);
    --vaadin-button-primary-text-color: var(--lumo-success-text-color);
  }

  :host(.v-success) [part='overlay'] {
    background: linear-gradient(var(--lumo-success-color-10pct), var(--lumo-success-color-10pct)) var(--lumo-base-color);
    color: var(--lumo-success-text-color);
  }

  :host(.v-success) {
    --vaadin-button-background: var(--lumo-success-color-10pct);
    --vaadin-button-text-color: var(--lumo-success-text-color);
    --vaadin-button-primary-background: var(--lumo-success-color);
    --vaadin-button-primary-text-color: var(--lumo-success-contrast-color);
  }

  :host(:is([theme~='error'], .v-error.v-primary)) [part='overlay'] {
    background: var(--lumo-error-color);
    color: var(--lumo-error-contrast-color);
    box-shadow: var(--lumo-box-shadow-l);
  }

  :host(:is([theme~='error'], .v-error.v-primary)) {
    --vaadin-button-background: var(--lumo-shade-20pct);
    --vaadin-button-text-color: var(--lumo-error-contrast-color);
    --vaadin-button-primary-background: var(--lumo-error-contrast-color);
    --vaadin-button-primary-text-color: var(--lumo-error-text-color);
  }

  :host(.v-error) [part='overlay'] {
    background: linear-gradient(var(--lumo-error-color-10pct), var(--lumo-error-color-10pct)) var(--lumo-base-color);
    color: var(--lumo-error-text-color);
  }

  :host(.v-error) {
    --vaadin-button-background: var(--lumo-error-color-10pct);
    --vaadin-button-text-color: var(--lumo-error-text-color);
    --vaadin-button-primary-background: var(--lumo-error-color);
    --vaadin-button-primary-text-color: var(--lumo-error-contrast-color);
  }

  :host(:is([theme~='warning'], .v-warning.v-primary)) [part='overlay'] {
    background: var(--lumo-warning-color);
    color: var(--lumo-warning-contrast-color);
    box-shadow:
      inset 0 0 0 1px var(--lumo-contrast-20pct),
      var(--lumo-box-shadow-l);
  }

  :host(:is([theme~='warning'], .v-warning.v-primary)) {
    --vaadin-button-background: var(--lumo-shade-20pct);
    --vaadin-button-text-color: var(--lumo-warning-contrast-color);
    --vaadin-button-primary-background: var(--lumo-shade-50pct);
    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
  }

  :host(.v-warning) [part='overlay'] {
    background: linear-gradient(var(--lumo-warning-color-10pct), var(--lumo-warning-color-10pct)) var(--lumo-base-color);
    color: var(--lumo-warning-text-color);
  }

  :host(.v-warning) {
    --vaadin-button-background: var(--lumo-warning-color-10pct);
    --vaadin-button-text-color: var(--lumo-warning-text-color);
    --vaadin-button-primary-background: var(--lumo-warning-color);
    --vaadin-button-primary-text-color: var(--lumo-warning-contrast-color);
  }

  @media (forced-colors: active) {
    [part='overlay'] {
      outline: 3px solid;
    }
  }
}