notification.scss

$bg-color: rgba(2,45,59,0.85);
$border-color: lighten($bg-color, 13%);
$title-color: #FFF;
$text-color: #BFE2DE;
$logo-color: #adfaff;
$height: 80px;
$width: 380px;
$bounce-in: cubic-bezier(0.310, 0.390, 0.210, 1.650);



.dr-notification-container {
  position:absolute;
  z-index:10000;
}

.dr-notification-container.bottom {
  bottom: 20px;
}

.dr-notification-container.right {
  right: 20px;
}

.dr-notification-container.left {
  left: 20px;
}

.dr-notification-container.top {
  top: 20px;
}

.dr-notification-container.center {
  left: 50%;
  margin-left:-190px;
}

.dr-notification-wrapper {
    width: $width;
    position:relative;
    margin: 10px 0;
}

.dr-notification {
    width: $width;
    background-color: $bg-color;
    clear:both;
    min-height: $height;
    max-height: 90px;
    @include border-radius(5px);
    color: $text-color;
    border: 1px solid $border-color;
    overflow:hidden;
}

.dr-notification-close-btn {
    @include border-radius(20px);
    display:inline-block;
    padding:3px;
    background-color: darken($bg-color, 5%);
    font-size:14px;
    color: $logo-color;
    border:1px solid $border-color;
    position:absolute;
    i {
        padding-left:3px;
    }
    right:-11px;
    top:5px;
    @include transition(all 0.35s $bounce-in);
    cursor: pointer;
    &:hover {
        @include scale3d(1.25,1.25,1);
    }
}

.dr-notification-image {
    width: $height;
    height: $height;
    border-right: 1px solid $border-color;
    float:left;
    display:block;
    font-size: 40px;
    color: $title-color;
    text-align:center;
    i {
      display:block;
      width:100%;
      padding-top:25px;
    }
    img {
      margin:15px;
      // width: 100%;
      max-width:70px;
      min-width:48px;
    }
}

.dr-notification-image.dr-notification-type-info {
  color: #FFF;
}

.dr-notification-image.dr-notification-type-warning {
  color: #FFA226;
}

.dr-notification-image.dr-notification-type-error {
  color: #FF4B4F;
}

.dr-notification-image.dr-notification-type-success {
  color: #B4D455;
}

.dr-notification-image.success {
  color: #B4D455;
}

.dr-notification-content {
    padding-left: 100px;
    padding-right:15px;
    padding-top:10px;
}

.dr-notification-title {
    color: $title-color;
    margin: 0px;
    padding:0px;
    font-size:20px;
}

p.dr-notification-text {
    margin-top: -5px;
    font-size:12px;
}