.notify-box{
  position: fixed;
  right: 0;
  top:0;
  width: 30%;
  z-index: 10000;
}
.notify{
  margin-bottom: $component-span;
  width: 100%;
  padding: 1rem;
  box-shadow: $shadow-base;
  position: relative;
  @include horizional-flex-align-center;
  background-color: #fff;
  .icon{
    display: block;
    font-size: 1.4rem;
    text-align: center;
    color: #ddd;
    width: $component-size;
    height:$component-size;
    line-height:$component-size -(2*$border-width);
    border: $border-width solid $border-color;
    border-radius: 100%;
    margin-right: $component-span;
    &:after{
      font-family: FontAwesome,serif;
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      vertical-align: top;
    }
    &.success{
      border-color:$success-color;
      color:$success-color;
      &:after{
        content: "\e69a";
      }
    }
    &.error{
      border-color:$error-color;
      color:$error-color;
      &:after{
        content:  "\e623";
      }
    }
    &.info{
      border-color:$info-color;
      color:$info-color;
      &:after{
        content:"\e653";
      }
    }
  }
}
.notify .body{
  @include flex-adapter;
  .title{
    margin: 0 0 $component-span 0;
    font-weight: bold;
    font-size: $font-size-large;
    color:$title-color;
  }
  .content{
    color:$content-color;
    font-size: $font-size;
    &:last-child{
      margin-bottom: 0;
    }
  }
}