react-cqtoolbox/lib/alert/theme.css

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

.alert {
  font-size: 14px;

  position: relative;

  overflow: hidden;

  opacity: 1;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
.alert *,
    .alert *::after,
    .alert *::before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-touch-callout: none;
}
.hasDscription .alertInner {
  padding: 8px 48px 8px 60px;
}
.hasDscription .icon {
  font-size: 24px;
  left: 16px;
}
.hasDscription .message {
  margin-bottom: 8px;
}
.noIcon .alertInner {
  padding: 8px 48px 8px 16px;
}
.success {
  border: 1px solid rgb(200, 230, 201);
  background-color: rgb(232, 245, 233);
}
.success .message {
  color: rgb(46, 125, 50);
}
.success .icon {
  color: rgb(67, 160, 71);
}
.info {
  border: 1px solid rgb(178, 235, 242);
  background-color: rgb(224, 247, 250);
}
.info .message {
  color: rgb(0, 131, 143);
}
.info .icon {
  color: rgb(0, 172, 193);
}
.warning {
  border: 1px solid rgb(255, 236, 179);
  background-color: rgb(255, 248, 225);
}
.warning .message {
  color: rgb(255, 143, 0);
}
.warning .icon {
  color: rgb(255, 179, 0);
}
.error {
  border: 1px solid rgb(255, 205, 210);
  background-color: rgb(255, 235, 238);
}
.error .message {
  color: rgb(198, 40, 40);
}
.error .icon {
  color: rgb(229, 57, 53);
}
.alertInner {
  padding: 8px 48px 8px 38px;
}
.message {
  display: block;
}
.description {
  font-size: 12px;
  line-height: 1.75;

  color: rgb(117, 117, 117);
}
.icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 16px;
}
.closeIcon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 16px;
  cursor: pointer;
}
.anim {
  -webkit-transition: all 0.35s cubic-bezier(0, 0, 0.2, 1);
  transition: all 0.35s cubic-bezier(0, 0, 0.2, 1);

  opacity: 0;
}