N3-components/N3-components

.@{prefix-cls}-alert {
  padding: 15px;
  border: 1px solid transparent;
  box-shadow: @alertShadow;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1200;
  background-color: @whiteColor;

  h4 {
    margin-top: 0;
    color: inherit;
  }

  & > p,
  & > ul {
    margin-bottom: 0;
  }
  & > p + p {
    margin-top: 5px;
  }

  hr {
    border-top-color: @alertHrColor;
  }

  .@{prefix-cls}-close {
    margin-left: 10px;
  }

  &-default {
    color: @alertFontColor;
    border-left:@alertDefaultBorder;
  }

  &-success {
    color: @alertFontColor;
    border-left:@alertSuccessBorder;
    .@{prefix-cls}-alert-icon{
      color:@alertSuccessIcon;
    }
  }

  &-info {
    color: @alertFontColor;
    border-left:@alertInfoBorder;
    .@{prefix-cls}-alert-icon{
      color:@alertInfoIcon;
    }

  }

  &-warning {
    color: @alertFontColor;
    border-left:@alertWarningBorder;
    .@{prefix-cls}-alert-icon{
      color:@alertWarningIcon;
    }
  }

  &-danger {
    color: @alertFontColor;
    border-left:@alertDangerBorder;
    .@{prefix-cls}-alert-icon{
      color:@alertDangerIcon;
    }
  }

  &-icon {
    float: left;
    font-size: 18px;
    margin-right: 10px;
  }

  &-content {
    margin-left: 32px;
  }

  &-small {
    padding: 2px 14px;
    .close {
      font-size: 20px;
      top: 0;
    }
  }

  &-dismissable,
  &-dismissible {
    padding-right: 35px;
  }

  &-dismissable .@{prefix-cls}-close,
  &-dismissible .@{prefix-cls}-close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
}

.@{prefix-cls}-alert-center {
  position: fixed;
  margin: 0 auto;
  left: 50%;
  top: 50%;
}

.@{prefix-cls}-alert-top {
  position: fixed;
  top: @alertTop;
  margin: 0 auto;
  left: 50%;
}

.@{prefix-cls}-alert-bottom {
  position: fixed;
  bottom: @alertBottom;
  margin: 0 auto;
  left: 50%;
}

.@{prefix-cls}-alert-top-right {
  position: fixed;
  top: @alertTop;
  right: @alertRight;
}

.@{prefix-cls}-alert-top-left {
  position: fixed;
  top: @alertTop;
  left: @alertLeft;
}

.@{prefix-cls}-alert-bottom-right {
  position: fixed;
  bottom: @alertBottom;
  right: @alertRight;
}

.@{prefix-cls}-alert-bottom-left {
  position: fixed;
  bottom: @alertBottom;
  left: @alertLeft;
}