@bic-fe/mds-ui/dist/style/message.css

A set of enterprise-class Vue UI components.

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */
.mds-message {
  font-size: 12px;
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  pointer-events: none;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #354052;
}
.mds-message-notice {
  padding: 8px;
  text-align: center;
}
.mds-message-notice:first-child {
  margin-top: -8px;
}
.mds-message-notice-content {
  word-break: break-all;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  pointer-events: all;
  text-align: left;
  position: relative;
}
.mds-message-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-53%);
  cursor: pointer;
}
.mds-message-link {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-53%);
  cursor: pointer;
  color: #666666;
}
.mds-message-notice-content .mds-message-success,
.mds-message-error,
.mds-message-warning,
.mds-message-info,
.mds-message-loading,
.mds-message-help {
  max-width: 684px;
  border-radius: 4px;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  padding: 13px 37px 13px 24px;
}
.mds-message-notice-content .mds-message-success-size,
.mds-message-error-size,
.mds-message-warning-size,
.mds-message-info-size,
.mds-message-loading-size,
.mds-message-help-size {
  padding: 24px 30px 32px 24px;
}
.mds-message-notice-content .mds-message-success-size-content,
.mds-message-error-size-content,
.mds-message-warning-size-content,
.mds-message-info-size-content,
.mds-message-loading-size-content,
.mds-message-help-size-content {
  padding-left: 30px;
  font-size: 14px;
  color: #666666;
  margin-top: 9px;
}
.mds-message-notice-content .mds-message-success-size-title,
.mds-message-error-size-title,
.mds-message-warning-size-title,
.mds-message-info-size-title,
.mds-message-loading-size-title,
.mds-message-help-size-title {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
}
.mds-message-notice-content .mds-message-success-size-icon,
.mds-message-error-size-icon,
.mds-message-warning-size-icon,
.mds-message-info-size-icon,
.mds-message-loading-size-icon,
.mds-message-help-size-icon {
  font-size: 22px !important;
  vertical-align: baseline;
  margin-right: 5px;
}
.mds-message-notice-content .mds-message-success-size ~ .mds-message-close,
.mds-message-error-size ~ .mds-message-close,
.mds-message-warning-size ~ .mds-message-close,
.mds-message-info-size ~ .mds-message-close,
.mds-message-loading-size ~ .mds-message-close,
.mds-message-help-size ~ .mds-message-close {
  top: 40px;
}
.mds-message-info-size-title,
.mds-message-loading-size-title,
.mds-message-help-size-title {
  color: #0364FF;
}
.link .mds-message-success,
.link .mds-message-error,
.link .mds-message-warning,
.link .mds-message-info,
.link .mds-message-loading,
.link .mds-message-help {
  padding: 13px 77px 13px 24px;
}
.mds-message-notice-content .mds-message-info,
.mds-message-loading,
.mds-message-help {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.mds-message-success {
  background: rgba(0, 170, 0, 0.05);
  color: #004400;
  border: 1px solid #00aa00;
}
.mds-message-success-link {
  color: #004400;
}
.mds-message-error {
  background: rgba(238, 51, 51, 0.05);
  color: #8A3934;
  border: 1px solid #ee3333;
}
.mds-message-error-link {
  color: #8A3934;
}
.mds-message-warning {
  background: rgba(255, 204, 1, 0.05);
  color: #685401;
  border: 1px solid #ffcc01;
}
.mds-message-warning-link {
  color: #685401;
}
.mds-message-help {
  color: #0364FF;
}
.mds-message-help-link {
  color: #685401;
}
.mds-message-success .mdsicon {
  color: #00a854;
}
.mds-message-error .mdsicon {
  color: #EE3333;
}
.mds-message-warning .mdsicon {
  color: #ffbf00;
}
.mds-message-info .mdsicon,
.mds-message-loading .mdsicon {
  color: #0364ff;
}
.mds-message .mdsicon {
  font-size: 14px;
  top: 1px;
  position: relative;
}
.mds-message span {
  vertical-align: baseline;
}
.mds-message-notice.move-up-leave.move-up-leave-active {
  animation-name: MessageMoveOut;
  overflow: hidden;
  animation-duration: .3s;
}
@keyframes MessageMoveOut {
  0% {
    opacity: 1;
    max-height: 150px;
    padding: 8px;
  }
  100% {
    opacity: 0;
    max-height: 0;
    padding: 0;
  }
}