vitevue32/packages/styles/components/alert.scss

.m-alert{
  width: 100%;
  padding: 8px 16px;
  margin: 10px 0;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity .2s;
  .m-alert__icon{
    font-size: 16px;
    width: 16px;
  }
  .m-alert__content{
    display: table-cell;
    padding: 0 8px;
    .m-alert__title{
      font-size: 13px;
      line-height: 18px;
    }
    .is-bold{
      font-weight: 700;
    }
    .m-alert__closebtn{
      font-size: 12px;
      opacity: 1;
      position: absolute;
      top: 12px;
      right: 15px;
      cursor: pointer;
    }
    .m-alert__description{
      font-size: 12px;
      margin: 5px 0;
    }
  }
}
.m-alert--success.is-light{
  background-color: #f0f9eb;
  color: #67c23a;
}
.m-alert--info.is-light{
  background-color: #f4f4f5;
  color: #909399;
}
.m-alert--warning.is-light{
  background-color: #fdf6ec;
  color: #e6a23c;
}
.m-alert--error.is-light{
  background-color: #fef0f0;
  color: #f56c6c;
}

.m-alert--success.is-dark{
  background-color: #67c23a;
  color: #fff;
}
.m-alert--info.is-dark{
  background-color: #909399;
  color: #fff;
}
.m-alert--warning.is-dark{
  background-color: #e6a23c;
  color: #fff;
}
.m-alert--error.is-dark{
  background-color: #f56c6c;
  color: #fff;
}
.m-alert.is-center{
  justify-content: center;
}