yu.css.ui/css/component/message.css

纯CSS通用UI模块和组件

.yu-message {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  padding: 8px 14px;
  width: 300px;
  border-radius: 4px;
  font-size: 14px;
  position: fixed;
  left: 50%;
  transform: translateX(-150px);
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  background-color: #edeeee;
  color: #909399;
  border: 1px solid #e0e1e2; }
  .yu-message.transition {
    opacity: 0;
    transform: translate(-150px, -100%);
    transition: transform .3s ease, opacity .3s ease; }
    .yu-message.transition.transition-enter {
      opacity: 1;
      transform: translate(-150px, 22px); }
    .yu-message.transition.transition-leave {
      opacity: 0;
      transform: translate(-150px, -100%); }
  .yu-message i.iconfont:not(.icon-close) {
    font-size: 18px;
    margin-right: 5px;
    vertical-align: top; }
  .yu-message .content {
    vertical-align: top;
    display: inline-block; }
  .yu-message .icon-close {
    margin-top: 2px;
    float: right;
    cursor: pointer; }
  .yu-message.primary {
    background-color: #f3f9ff;
    color: #409EFF;
    border: 1px solid #d9ecff; }
  .yu-message.success {
    background-color: #eef8e9;
    color: #67C23A;
    border: 1px solid #c1e7ae; }
  .yu-message.warning {
    background-color: #fffbeb;
    color: #fecf20;
    border: 1px solid #fff0b8; }
  .yu-message.info {
    background-color: #f2f3f3;
    color: #909399;
    border: 1px solid #e0e1e2; }
  .yu-message.danger {
    background-color: #feeded;
    color: #F56C6C;
    border: 1px solid #fffbfb; }
  .yu-message.center {
    text-align: center; }