shineout/css/Alert/styles/alert.css

Shein 前端组件库

.so-alert {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--alert-padding-y, 15px) var(--alert-padding-x, 16px);
  margin-bottom: 20px;
  border: var(--alert-border-width, 1px) solid transparent;
  border-radius: var(--alert-border-radius, 4px);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: opacity 0.216s ease-out, -webkit-transform 0.216s;
  transition: opacity 0.216s ease-out, -webkit-transform 0.216s;
  transition: transform 0.216s, opacity 0.216s ease-out;
  transition: transform 0.216s, opacity 0.216s ease-out, -webkit-transform 0.216s;
  font-size: var(--alert-font-size, var(--font-size-base, 14px));
}
.so-alert-rtl {
  direction: rtl;
  text-align: right;
}
.so-alert h2,
.so-alert h3,
.so-alert h4 {
  margin-top: 0.3em;
  color: inherit;
}
.so-alert-with-close:not(.so-alert-rtl) {
  padding-right: calc(var(--alert-padding-x, 16px) + 20px);
}
.so-alert-rtl.so-alert-with-close {
  padding-left: calc(var(--alert-padding-x, 16px) + 20px);
}
.so-alert-link {
  font-weight: bold;
}
.so-alert-close {
  position: absolute;
  top: var(--alert-padding-y, 15px);
  right: 12px;
  display: block;
}
.so-alert-rtl .so-alert-close {
  right: auto;
  left: 12px;
}
.so-alert-close svg {
  width: 10px;
  height: 10px;
}
.so-alert-close svg path {
  fill: var(--alert-close-color, rgba(0, 0, 0, 0.3));
}
.so-alert-close:hover svg path {
  fill: var(--alert-close-hover-color, rgba(0, 0, 0, 0.8));
}
.so-alert-dismissed {
  opacity: 0;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}
.so-alert-icon {
  display: block;
  margin-top: var(--alert-icon-margin-top, 2px);
}
.so-alert-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  word-break: break-all;
}
.so-alert > p,
.so-alert > ul {
  margin-bottom: 0;
}
.so-alert > p + p {
  margin-top: 5px;
}
.so-alert h2,
.so-alert h3,
.so-alert h4 {
  margin-top: 0;
}
.so-alert-default {
  border-color: var(--gray-200, #e9ecef);
  background-color: #fff;
  color: #333;
  -webkit-box-shadow: var(--alert-box-shadow, 'none');
          box-shadow: var(--alert-box-shadow, 'none');
}
.so-alert-default hr {
  border-top-color: var(--gray-200-darken-5, #dadfe4);
}
.so-alert-default .alert-link {
  color: #1a1a1a;
}
.so-alert-info {
  border-color: var(--alert-info-border-color, #bce8f1);
  background-color: var(--alert-info-bg, #d9edf7);
  color: var(--alert-info-text-color, #31708f);
  -webkit-box-shadow: var(--alert-info-box-shadow, 'none');
          box-shadow: var(--alert-info-box-shadow, 'none');
}
.so-alert-info hr {
  border-top-color: var(--alert-info-border-darken-5-color, #a6e1ec);
}
.so-alert-info .alert-link {
  color: var(--alert-info-text-darken-10-color, #245269);
}
.so-alert-info .so-alert-icon path {
  fill: var(--info-color, #17a2b8);
}
.so-alert-warning {
  border-color: var(--alert-warning-border-color, #faebcc);
  background-color: var(--alert-warning-bg, #fcf8e3);
  color: var(--alert-warning-text-color, #8a6d3b);
  -webkit-box-shadow: var(--alert-warning-box-shadow, 'none');
          box-shadow: var(--alert-warning-box-shadow, 'none');
}
.so-alert-warning hr {
  border-top-color: var(--alert-warning-border-darken-5-color, #f7e1b5);
}
.so-alert-warning .alert-link {
  color: var(--alert-warning-text-darken-10-color, #66512c);
}
.so-alert-warning .so-alert-icon path {
  fill: var(--warning-color, #ff9900);
}
.so-alert-success {
  border-color: var(--alert-success-border-color, #d6e9c6);
  background-color: var(--alert-success-bg, #dff0d8);
  color: var(--alert-success-text-color, #3c763d);
  -webkit-box-shadow: var(--alert-success-box-shadow, 'none');
          box-shadow: var(--alert-success-box-shadow, 'none');
}
.so-alert-success hr {
  border-top-color: var(--alert-success-border-darken-5-color, #c9e2b3);
}
.so-alert-success .alert-link {
  color: var(--alert-success-text-darken-10-color, #2b542c);
}
.so-alert-success .so-alert-icon path {
  fill: var(--success-color, #00cc66);
}
.so-alert-danger,
.so-alert-error,
.so-alert-confirmwarning {
  border-color: var(--alert-danger-border-color, #ebccd1);
  background-color: var(--alert-danger-bg, #f2dede);
  color: var(--alert-danger-text-color, #a94442);
  -webkit-box-shadow: var(--alert-danger-box-shadow, 'none');
          box-shadow: var(--alert-danger-box-shadow, 'none');
}
.so-alert-danger hr,
.so-alert-error hr,
.so-alert-confirmwarning hr {
  border-top-color: var(--alert-danger-border-darken-5-color, #e4b9c0);
}
.so-alert-danger .alert-link,
.so-alert-error .alert-link,
.so-alert-confirmwarning .alert-link {
  color: var(--alert-danger-text-darken-10-color, #843534);
}
.so-alert-danger .so-alert-icon path,
.so-alert-error .so-alert-icon path,
.so-alert-confirmwarning .so-alert-icon path {
  fill: var(--danger-color, #f85555);
}