yu.css.ui/css/component/alert.css

纯CSS通用UI模块和组件

.yu-alert {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  font-size: 14px;
  margin-bottom: 14px;
  position: relative;
  box-sizing: border-box;
  background-color: #f2f3f3; }
  .yu-alert > i {
    vertical-align: middle;
    margin-right: 4px;
    font-size: 14px; }
    .yu-alert > i.icon-close {
      vertical-align: middle;
      line-height: 20px;
      position: absolute;
      right: 8px;
      top: 8px;
      color: #909399;
      cursor: pointer;
      margin: 0; }
      .yu-alert > i.icon-close:hover {
        color: #767980; }
  .yu-alert.primary {
    background-color: #f3f9ff;
    color: #409EFF;
    border-color: #a6d2ff; }
  .yu-alert.success {
    background-color: #eef8e9;
    color: #67C23A;
    border-color: #a3db87; }
  .yu-alert.warning {
    background-color: #fffbeb;
    color: #fecf20;
    border-color: #fee586; }
  .yu-alert.info {
    background-color: #f2f3f3;
    color: #909399;
    border-color: #c5c7ca; }
  .yu-alert.danger {
    background-color: #feeded;
    color: #F56C6C;
    border-color: #fbcccc; }
  .yu-alert.center {
    text-align: center; }
  .yu-alert > .title {
    margin: 0;
    font-size: 14px;
    font-weight: bold; }
    .yu-alert > .title > i {
      margin-right: 4px; }
  .yu-alert > .description {
    margin: 0;
    padding-top: 8px;
    font-size: 12px; }