@dabapps/roe/src/less/alerts.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.alert {
  .clearfix();
  padding: 0 @padding-base;
  margin-top: @margin-large;
  margin-bottom: @margin-large;
  border: @border-base;
  border-radius: @border-radius-base;
  background-color: @grey-lightest;

  &.primary {
    background-color: @primary-lighter;
    border-color: @primary-light;
  }

  &.secondary {
    background-color: @secondary-lighter;
    border-color: @secondary-light;
  }

  &.tertiary {
    background-color: @tertiary-lighter;
    border-color: @tertiary-light;
  }

  &.info {
    background-color: @info-lighter;
    border-color: @info-light;
  }

  &.success {
    background-color: @success-lighter;
    border-color: @success-light;
  }

  &.warning {
    background-color: @warning-lighter;
    border-color: @warning-light;
  }

  &.error {
    background-color: @error-lighter;
    border-color: @error-light;
  }
}