3scale/porta

#flashWrapper {
  @include animation(fadeInRight 0.5s ease-in-out);
  background-color: $white;
  box-shadow: 0 0 line-height-times(1) 0 $whiteBoxShadowColor;
  display: block;
  margin-top: line-height-times(1);
  padding: line-height-times(1 / 2);
  position: fixed;
  right: line-height-times(1);
  z-index: 2000;
}

.flash-message {
  color: $success-color;
  font-style: italic;
}

.flash-message--warning,
.flash-message--token {
  display: none;
}

.flash-message--error,
.flash-message--alert {
  color: $error-color;
  @include animation(shake 0.5s ease-in-out 0.7s);
}

// shake animation
@include keyframes(shake) {
  0%, 100% {
    @include transform(translate3d(0, 0, 0));
  }

  20%, 60% {
    @include transform(translate3d(-10px, 0, 0));
  }

  40%, 80% {
    @include transform(translate3d(10px, 0, 0));
  }
}


// fade in from right animation
@include keyframes(fadeInRight) {
  0% {
    @include opacity(0);
    @include transform(translate3d(100%, 0, 0));
  }

  100% {
    @include opacity(1);
    @include transform(none);
  }
}