locomotivecms/engine

// =============================================================================
// Notify
// =============================================================================

// Notifies the user with success messages or errors in the right bottom of the
// page.

// Settings
// =============================================================================

// Scaffolding notifications with a given color.
// @param {Hex} $color color background and font.

@mixin notification-generator($color) {
  color: $color;
  background-color: rgba(lighten($color, 55), .8);
  .close {
    color: rgba($color, .3);
    &:hover {
      color: rgba($color, .6);
    }
  }
  [data-notify="icon"] {
    color: $color;
  }
}

// Components
// =============================================================================

[data-notify="container"] {
  position: relative;
  width: 100%;
  max-width: 350px;
  font-size: 0;
  border: 0;
  box-shadow: 0 1px 10px rgba($black, .2);
  animation: fade-left .5s ease-out;
  .close {
    position: absolute;
    top: 50%;
    right: 15px;
    padding: 0;
    margin-top: -12px;
    font-size: 24px;
    line-height: 1;
    background: none;
    border: 0;
    &:focus,
    &:active {
      outline: none;
    }
  }
}

[data-notify="icon"] {
  display: inline-block;
  width: 15%;
  margin-left: -7.5px;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
}

[data-notify="message"] {
  display: inline-block;
  width: 85%;
  padding-right: 5%;
  font-size: $font-size-base;
  vertical-align: middle;
}

// Descendants
// =============================================================================

[data-notify="container"].alert-danger,
[data-notify="container"].alert-error {
  @include notification-generator($brand-danger);
}

[data-notify="container"].alert-success {
  @include notification-generator($brand-success);
}

[data-notify="container"].alert-warning {
  @include notification-generator($brand-warning);
}