vui-design/src/style/components/message.less

A high quality UI Toolkit based on Vue.js

@vui-message: ~"@{vui}-message";

.@{vui-message} {
  position:fixed;
  top:24px;
  left:50%;
  display:block;
  box-sizing:border-box;
  border-radius:@message-border-radius;
  background-color:@message-background-color;
  box-shadow:@message-box-shadow;
  padding:@message-padding-vertical @message-padding-horizontal;
  transform:translate(-50%, 0);
  transition:top @transition-duration @transition-timing-function;

  &-icon {
    position:absolute;
    top:@message-padding-vertical + round(@message-content-font-size * @message-content-line-height - @message-icon-size) / 2;
    left:@message-padding-horizontal;
    color:@message-icon-color;
    font-size:@message-icon-size;
    line-height:1;

    .@{vui}-icon {
      display:block;
    }
  }

  &-content {
    color:@message-content-font-color;
    font-size:@message-content-font-size;
    text-align:left;
    line-height:@message-content-line-height;
    white-space:normal;
    word-break:break-all;
    word-wrap:break-word; 
  }

  &-btn-close {
    position:absolute;
    top:@message-padding-vertical + round(@message-content-font-size * @message-content-line-height - @message-btn-close-font-size) / 2;
    right:@message-padding-horizontal;
    cursor:pointer;
    color:@message-btn-close-font-color;
    font-size:@message-btn-close-font-size;
    line-height:1;
    transition:all @transition-duration @transition-timing-function;

    .@{vui}-icon {
      display:block;
      transform:scale(0.85);
    }

    &:hover {
      color:@message-btn-close-hover-font-color;
    }
  }

  &-info&-with-background {
    background-color:@message-info-background-color;
  }
  &-info &-icon {
    color:@message-info-icon-color;
  }
  &-warning&-with-background {
    background-color:@message-warning-background-color;
  }
  &-warning &-icon {
    color:@message-warning-icon-color;
  }
  &-success&-with-background {
    background-color:@message-success-background-color;
  }
  &-success &-icon {
    color:@message-success-icon-color;
  }
  &-error&-with-background {
    background-color:@message-error-background-color;
  }
  &-error &-icon {
    color:@message-error-icon-color;
  }
  &-loading&-with-background {
    background-color:@message-loading-background-color;
  }
  &-loading &-icon {
    color:@message-loading-icon-color;
  }

  &&-with-icon {
    padding-left:@message-padding-horizontal + @message-icon-size + @padding-xs;
  }
  &&-closable {
    padding-right:@message-padding-horizontal + @message-btn-close-font-size + @padding-xs;
  }

  &-fade-enter-active {
    animation:vuiMessageFadeIn @animation-in-duration @animation-in-timing-function both;
  }
  &-fade-leave-active {
    animation:vuiMessageFadeOut @animation-out-duration @animation-out-timing-function both;
  }
}

@keyframes vuiMessageFadeIn {
  0% { opacity:0; transform:translate(-50%, -100%); }
  100% { opacity:1; transform:translate(-50%, 0); }
}

@keyframes vuiMessageFadeOut {
  0% { opacity:1; }
  30% { opacity:1; }
  100% { opacity:0; }
}