警告

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

成功状态

成功状态提示

危险状态

危险状态提示

错误状态

错误状态提示

信息状态

信息状态提示

HTML SCSS CSS

<div class="hui-alert hui-alert-success"><i class="hui-iconfont">&#xe6a6;</i>成功状态提示</div>

.hui-alert {
  position: relative;
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
  .hui-iconfont {
    position: absolute;
    top: 9px;
    right: 10px;
    line-height: 20px;
    cursor: pointer;
    color: #000;
    opacity: 0.2;
    _color: #666;
    &.hover {
      color: #000;
      opacity: 0.8;
    }
  }
  .hui-alert-message {
    color: #c09853;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .hui-alert-description {
    font-size: 14px;
    line-height: 22px;
  }
  
  &.hui-alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    .hui-alert-message {
      color: #468847;
    }
  }
  &.hui-alert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
    .hui-alert-message {
      color: #b94a48;
    }
  }
  &.hui-alert-error {
    color: #fff;
    background-color: #f37b1d;
    border-color: #e56c0c;
    .hui-alert-message {
      color: #fff;
    }
  }
  &.hui-alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    .hui-alert-message {
      color: #31708f;
    }
  }
  &.hui-alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
    >p,
    >ul {
      margin-bottom: 0;
    }
    p+p {
      margin-top: 5px;
    }
  }
}

.hui-alert {
  position: relative;
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
}
.hui-alert .hui-iconfont {
  position: absolute;
  top: 9px;
  right: 10px;
  line-height: 20px;
  cursor: pointer;
  color: #000;
  opacity: 0.2;
  _color: #666;
}
.hui-alert .hui-iconfont.hover {
  color: #000;
  opacity: 0.8;
}
.hui-alert .hui-alert-message {
  color: #c09853;
  font-size: 16px;
  margin-bottom: 4px;
}
.hui-alert .hui-alert-description {
  font-size: 14px;
  line-height: 22px;
}
.hui-alert.hui-alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.hui-alert.hui-alert-success .hui-alert-message {
  color: #468847;
}
.hui-alert.hui-alert-danger {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
.hui-alert.hui-alert-danger .hui-alert-message {
  color: #b94a48;
}
.hui-alert.hui-alert-error {
  color: #fff;
  background-color: #f37b1d;
  border-color: #e56c0c;
}
.hui-alert.hui-alert-error .hui-alert-message {
  color: #fff;
}
.hui-alert.hui-alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.hui-alert.hui-alert-info .hui-alert-message {
  color: #31708f;
}
.hui-alert.hui-alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.hui-alert.hui-alert-block > p,
.hui-alert.hui-alert-block > ul {
  margin-bottom: 0;
}
.hui-alert.hui-alert-block p + p {
  margin-top: 5px;
}