bin-ui/src/styles/components/message.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-message {
  font-size: $base-font-size;
  position: fixed;
  z-index: 1010;
  width: 100%;
  top: 30px;
  left: 0;
  pointer-events: none;
}
.bin-message-notice {
  box-sizing: border-box;
  padding: 8px;
  text-align: center;
  transition: height $animation-duration-base ease-in-out, padding $animation-duration-base ease-in-out;
}

.bin-message-notice-content {
  display: inline-block;
  pointer-events: all;
  padding: 10px 16px;
  border-radius: $border-base-radius;
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, .15);
  background: #fff;
  position: relative;
  &-text {
    display: flex;
    align-items: center;
  }
  i {
    font-size: 18px;
    vertical-align: baseline;
    margin-right: 8px;
  }
}

.bin-message-notice-close {
  position: absolute;
  right: 0;
  top: 11px;
  color: $color-text-default;
  outline: 0;
  cursor: pointer;
  i {
    font-size: 22px;
    color: $color-info;
    transition: color $animation-duration-base ease;
    position: relative;
    top: -2px;
  }
}


.bin-message-notice-closable {
  .bin-message-notice-content {
    position: relative;
    padding-right: 32px;
  }
}
.bin-message-notice-primary i {
  color: $color-primary;
}
.bin-message-notice-success i {
  color: $color-success;
}
.bin-message-notice-warning i {
  color: $color-warning;
}
.bin-message-notice-danger i {
  color: $color-danger;
}
// move-up
.move-up-enter-active,
.move-up-leave-active {
  transition: all $animation-duration-base cubic-bezier(.55, 0, .1, 1);
}
.move-up-enter,
.move-up-leave-to {
  transform-origin: 0 0;
  transform: translateY(-100%);
  opacity: 0;
}