initiatived21/d21

/*------------------------------------*\
    #FLASH
\*------------------------------------*/

/**
 * Component for flash messages
 *
 * 1. Make the containing div and the flash itself click-through.
 */

.c-flash-list {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: fixed;
  left: 0.25em;
  right: 0.25em;
  top: 42.5%;
  z-index: 99;

  pointer-events: none;  /* [1] */
}

.c-flash-list__item {
  display: flex;
  align-items: center;

  box-shadow: $box-shadow;
  border-radius: $border-radius-large;
  padding: $spacing;

  color: $white;
  user-select: none;

  background-color: $mid-dark-gray;
  opacity: 0.95;

  margin-bottom: $spacing--small;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.c-flash-list__item--notice,
.c-flash-list__item--success {
  background-color: $flash-notice-color;
}

.c-flash-list__item--alert {
  background-color: $flash-alert-color;
}

.c-flash-list__item--error {
  background-color: $flash-error-color;
}

.c-flash-list__icon {
  @include font-size(48px, 1);
  margin-right: $spacing;

  @include media-query(s) {
    @include font-size(24px, 1);
    margin-right: $spacing--small;
  }
}

.c-flash-list__text {
  @include font-size(20px, 1.5);

  @include media-query(s) {
    @include font-size(15px, 1.5);
  }
}


/*
 * React CSS transition group classes
 */

.c-flash-list__item--enter {
  opacity: 0.01;
}

.c-flash-list__item--enter-active {
  opacity: 0.95;
  transition: opacity $transition-time ease-in;
}

.c-flash-list__item--leave {
  opacity: 0.95;
}

.c-flash-list__item--leave-active {
  opacity: 0.01;
  transition: opacity $transition-time ease-in;
}