scottwernervt/ember-notifier

// Reference: https://github.com/finnp/dom-notifications
$ember-notifier-z-index: 999999 !default;
$ember-notifier-padding: 1rem !default;
$ember-notifier-text-color: #ffffff !default;
$ember-notifier-default-background-color: #ffffff !default;
$ember-notifier-primary-background-color: #00d1b2 !default;
$ember-notifier-info-background-color: #3ea2ff !default;
$ember-notifier-success-background-color: #64ce83 !default;
$ember-notifier-warning-background-color: #ff7f48 !default;
$ember-notifier-danger-background-color: #e74c3c !default;
$ember-notifier-secondary-background-color: #dbdbdb !default;
$ember-notifier-width: 100% !default;
$ember-notifier-max-width: 420px !default;
$ember-notifier-max-height: 640px !default;
$ember-notifier-border-radius: 4px !default;
$ember-notifier-margin: 0.25rem 0 !default;

$ember-notifier-icon-color: rgba(255, 255, 255, .74) !default;
$ember-notifier-icon-width: 30px !default;
$ember-notifier-icon-primary-background-color: darken($ember-notifier-primary-background-color, 8%) !default;
$ember-notifier-icon-info-background-color: darken($ember-notifier-info-background-color, 8%) !default;
$ember-notifier-icon-success-background-color: darken($ember-notifier-success-background-color, 8%) !default;
$ember-notifier-icon-warning-background-color: darken($ember-notifier-warning-background-color, 8%) !default;
$ember-notifier-icon-danger-background-color: darken($ember-notifier-danger-background-color, 8%) !default;
$ember-notifier-icon-secondary-background-color: darken($ember-notifier-secondary-background-color, 8%) !default;

$ember-notifier-content-padding: 5px 10px !default;
$ember-notifier-content-margin: 0 30px !default;
$ember-notifier-title-margin: 0 !default;
$ember-notifier-message-margin: 0 !default;

$ember-notifier-close-button-width: $ember-notifier-icon-width !default;
$ember-notifier-close-button-height: $ember-notifier-icon-width !default;
$ember-notifier-close-button-line-height: $ember-notifier-close-button-height !default;
$ember-notifier-close-button-color: $ember-notifier-icon-color !default;
$ember-notifier-close-button-opacity: 0.8 !default;
$ember-notifier-close-button-hover-opacity: 1 !default;
$ember-notifier-close-button-size: 1.5rem !default;

.ember-notifier {
  position: fixed;
  z-index: $ember-notifier-z-index;
  display: flex;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  width: $ember-notifier-width;
  max-width: $ember-notifier-max-width;
  padding: $ember-notifier-padding;
  margin: 0 auto;
  pointer-events: none;

  // positions
  &.is-top {
    top: 0;
    left: 0;
    right: 0;
  }

  &.is-top-left {
    top: 0;
    left: 0;
    right: auto;
  }

  &.is-top-right {
    top: 0;
    left: auto;
    right: 0;
  }

  &.is-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: column-reverse;
  }

  &.is-bottom-left {
    bottom: 0;
    left: 0;
    right: auto;
    flex-direction: column-reverse;
  }

  &.is-bottom-right {
    bottom: 0;
    left: auto;
    right: 0;
    flex-direction: column-reverse;
  }
}

.ember-notifier-notification-base {
  position: relative;
  overflow: hidden;
  margin: $ember-notifier-margin;
  pointer-events: auto;
}

.ember-notifier-notification {
  display: block;
  max-height: $ember-notifier-max-height;
  border-radius: $ember-notifier-border-radius;
  color: $ember-notifier-text-color;
  background-color: $ember-notifier-default-background-color;

  // colors
  &.is-primary {
    background-color: $ember-notifier-primary-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-primary-background-color;
    }
  }

  &.is-info {
    background-color: $ember-notifier-info-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-info-background-color;
    }
  }

  &.is-success {
    background-color: $ember-notifier-success-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-success-background-color;
    }
  }

  &.is-warning {
    background-color: $ember-notifier-warning-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-warning-background-color;
    }
  }

  &.is-danger {
    background-color: $ember-notifier-danger-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-danger-background-color;
    }
  }

  &.is-secondary {
    background-color: $ember-notifier-secondary-background-color;

    .ember-notifier-icon {
      background-color: $ember-notifier-icon-secondary-background-color;
    }
  }
}

.ember-notifier-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: $ember-notifier-icon-width;
  height: 100%;
  color: $ember-notifier-icon-color;
  text-align: center;

  span {
    position: relative;
    top: 5px;
  }
}

.ember-notifier-content {
  padding: $ember-notifier-content-padding;
  margin: $ember-notifier-content-margin;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.ember-notifier-title {
  margin: $ember-notifier-title-margin;
}

.ember-notifier-message {
  margin: $ember-notifier-message-margin;
}

.ember-notifier-close {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.ember-notifier-close-button {
  position: relative;
  margin: 0;
  width: $ember-notifier-close-button-width;
  height: $ember-notifier-close-button-height;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;
  color: $ember-notifier-close-button-color;
  opacity: $ember-notifier-close-button-opacity;
  font-size: $ember-notifier-close-button-size;
  line-height: $ember-notifier-close-button-line-height;
  text-align: center;
  cursor: pointer;

  &:hover,
  &:focus {
    opacity: $ember-notifier-close-button-hover-opacity;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-21 14:33:11
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.ember-notifier-notification-show {
  -webkit-animation: notification-show 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: notification-show 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.ember-notifier-notification-hide {
  -webkit-animation: notification-hide 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: notification-hide 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes notification-show {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes notification-show {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes notification-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;

  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
}

@keyframes notification-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
}