ten-design-vue/lib/style/message.css

ten-vue

/* dependencies icon */
/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-message {
  display: flex;
  align-items: top;
  margin-top: 14px;
  margin-left: calc(50vw);
  padding: 10px;
  min-width: 340px;
  max-width: 500px;
  color: #333;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.06);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  border-radius: 0px;
  background: #fff;
  justify-content: space-between;
}
.ten-message__content {
  flex: 1;
  word-break: break-all;
  line-height: 18px;
}
.ten-message--success {
  background: #D6FAEB;
}
.ten-message--success .ten-message__icon {
  color: #3ecc36;
}
.ten-message--error {
  background: #FFE6D1;
}
.ten-message--error .ten-message__icon {
  color: #ff3e00;
}
.ten-message--info {
  background: #D6FAFA;
}
.ten-message--info .ten-message__icon {
  color: #102C53;
}
.ten-message--warning {
  background: #FFF0D1;
}
.ten-message--warning .ten-message__icon {
  color: #ffa700;
}
.ten-message--dark {
  background: #636363;
  color: #fff;
}
.ten-message__icon {
  flex: none;
  margin-right: 6px;
  font-size: 18px;
}
.ten-message__icon.ten-message__close {
  flex: none;
  margin-left: 6px;
  margin-right: 0px;
  color: rgba(0, 0, 0, 0.32);
}