SCSS file for alexcrack/angular-ui-notification

angular-ui-notification.scss

/**
 * angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
 * @extend %author Alex_Crack
 * @extend %version v0.0.2
 * @extend %link https://github.com/alexcrack/angular-ui-notification
 * @extend %license MIT
 */

$btn-common-primary-color: #191970;
$btn-common-primary-size:  1rem;

%btn-common-primary {
  color: $btn-common-primary-color;
  background-color: rgba(200, 200, 200, 0.8);
}

%btn-common-info {
  color: $btn-common-primary-color;
  background-color: rgba(200, 200, 200, 0.8);
}

%btn-common-warning {
  color: #000000;
  background-color: rgba(154, 17, 69, 0.8);
}

%btn-common-success {
  color: #191970;
  background-color: rgba(154, 205, 50, 0.8);
}

%btn-common-danger {
  color: black;
  background-color: red;
}

@mixin transition($trans, $ease)
{-webkit-transition:$trans ease $ease;-o-transition:$trans ease $ease;transition:opacity ease $ease;$trans:0}


.ui-notification {
  @extend %btn-common-primary;
  border-radius: 5px;
  position: fixed;
  right: 10px;
  //top: -100px;  prevent from posting notification at bottom page
  z-index: 9999;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  width: 300px;
  @include transition(all, 0.5s);
  &.killed {
    opacity: 0;
    @include transition(opacity, 1s);
  }
  & > h3 {
    display: block;
    margin: 10px 10px 0 10px;
    padding: 0 0 5px 0;
    text-align: left;
    font-size: $btn-common-primary-size;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }
  & a {
    color: $btn-common-primary-color;
    &:hover {
      text-decoration: underline;
    }
  }
  & > .message {
    margin: 10px 10px 10px 10px;
  }
  &.warning {
    @extend %btn-common-warning;
  }
  &.error {
    @extend %btn-common-danger;
  }
  &.success {
    @extend %btn-common-success;
  }
  &.info {
    @extend %btn-common-info;
  }
  &:hover {
    opacity: 0.7;
  }
}