@conduction/components/src/components/notificationPopUp/NotificationPopUp.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-notification-pop-up-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
  --conduction-notification-pop-up-border: 1px solid var(--skeleton-color-grey-2);
}

:export {
  animationDuration: 200ms;
}

.modal {
  animation-fill-mode: both;
  background: var(--skeleton-color-grey-1);
  padding-inline-start: var(--skeleton-size-lg);
  padding-inline-end: var(--skeleton-size-lg);
  padding-block-start: var(--skeleton-size-lg);
  padding-block-end: var(--skeleton-size-lg);
  border-radius: var(--skeleton-border-radius-md);
  box-shadow: var(--conduction-notification-pop-up-box-shadow);
}

.modal > *:not(:last-child) {
  margin-block-end: var(--skeleton-size-md);
}

.buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.buttons > *:not(:last-child) {
  margin-inline-end: var(--skeleton-size-md);
}

.button {
  display: flex;
  gap: 8px;
}

.visible {
  animation-name: fadeInBottom;
}

.link > * {
  margin-inline-end: 8px;
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
  }
}

.modal:not(.visible) {
  animation-name: fadeOutBottom;
}

@keyframes fadeOutBottom {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(50%);
  }
}