ten-design-vue/lib/theme/components/notification.less

ten-vue

/* dependencies icon */
@import "../vars.less";

.ten-notification-fade-enter.right {
  transform: translateX(100%)
}

.ten-notification-fade-enter.left {
  transform: translateX(-100%)
}

.ten-notification-fade-leave-active {
  animation: NotificationFadeOut .2s ease both
}
@keyframes NotificationFadeOut {
  0% {
    margin-bottom: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    opacity: 1
  }
  100% {
    // height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0
  }
}

.ten-notification_wrap{
  position: fixed;
  z-index: 999;
  transition: all .3s
}

.ten-notification {
  position: relative;
  box-sizing: border-box;
  width: 384px;
  background: #fff;
  padding: 16px 24px;
  margin-bottom: 14px;
  box-shadow: @shadow-level-1;
  overflow: hidden;
  transition: all .3s, opacity .2s;
  &_icon{
    float: left;
    font-size: 24px;
    margin-right: 16px;
    &.success{
      color: @success-color;
    }
    &.error{
      color: @error-color;
    }
    &.info{
      color:#0052D9;
    }
    &.warning{
      color: @warning-color;
    }
  }
  &_content{
    overflow: hidden
  }
  &_title{
    font-size: 16px;
    color: #333
  }
  &_message{
    margin-top: 16px;
    opacity: 0.6;
    font-size: 14px;
    color: #000;
    line-height: 22px
  }
  &_closeBtn{
    position: absolute;
    font-size: 14px;
    height: 14px;
    opacity: .32;
    right: 25px;
    top: 18px;
    cursor: pointer
  }
}