tntd/lib/alert/alert.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@alert-prefix-cls: ~'@{ant-prefix}-alert';
@alert-description-color: @text-color-secondary;
@tnt-alert-prefix-cls: ~'tnt-alert';


.@{tnt-alert-prefix-cls} {

  &.@{alert-prefix-cls}.@{alert-prefix-cls}-no-icon.@{alert-prefix-cls}-closable {
    padding-right: 30px;
  }

  &.@{tnt-alert-prefix-cls}-with-action {
    .@{alert-prefix-cls}-message {
      display: flex;
      justify-content: space-between;
        > .action-btn {
          flex: none;
          margin-left: 36px;
          margin-right: 12px;
          font-size: @font-size-base;
        }
    }
  }

  &.@{alert-prefix-cls} {
    border-radius: @border-radius-lg;
    padding: 8px 15px 8px 44px;
    & .anticon {
      left: 20px;
      top: 11px; // 与文字对齐
    }

  }
  
  .@{alert-prefix-cls}-message {
    font-weight: 500;
    color: @alert-description-color;
  }

  & .@{alert-prefix-cls}-close-icon {
    font-size: @font-size-lg;
  }

  &.@{alert-prefix-cls}-with-description {
    padding: 16px 20px 16px 48px;
  }

  &.@{alert-prefix-cls}.@{alert-prefix-cls}-no-icon {
    padding: 8px 20px;
  }

  &.@{alert-prefix-cls}-with-description.@{alert-prefix-cls}-no-icon {
    padding: 16px 20px;
  }

  &.@{alert-prefix-cls}-with-description i.@{alert-prefix-cls}-icon {
    top: 18px;
    font-size: @font-size-xl;
  }
}


.@{alert-prefix-cls}-success {
  .action-btn {
    background-color: @alert-success-bg-color;
    color: @green-6;
    a {
      color: @green-6;
    }
  }
  .@{alert-prefix-cls}-close-icon {
    .@{iconfont-css-prefix}-close {
      color: @alert-success-icon-color;
    }
  }
}

.@{alert-prefix-cls}-info {
.action-btn {
  background-color: @alert-info-bg-color;
  color: @alert-info-icon-color;
  a {
    color: @alert-info-icon-color;
  }
}
.@{alert-prefix-cls}-close-icon {
  .@{iconfont-css-prefix}-close {
    color: @alert-info-icon-color;
  }
}
}

.@{alert-prefix-cls}-warning {
  .action-btn {
    background-color: @alert-warning-bg-color;
    color: @gold-7;
    a {
      color: @gold-7;
    }
  }
  .@{alert-prefix-cls}-close-icon {
    .@{iconfont-css-prefix}-close {
      color: @alert-warning-icon-color;
    }
  }
}

.@{alert-prefix-cls}-error {
  .action-btn {
    background-color: @alert-error-bg-color;
    color: @red-6;
    a {
      color: @red-6;
    }
  }
  .@{alert-prefix-cls}-close-icon {
    .@{iconfont-css-prefix}-close {
      color: @alert-error-icon-color;
    }
  }
}

.@{alert-prefix-cls} {
  > 
  .@{alert-prefix-cls}-icon {
    font-size: @font-size-lg;
  }
}