//
//--------------------------------------------------------------------------
// Alerts - Luma
//--------------------------------------------------------------------------
//

.alert {
  border-radius: .3rem;
  margin-bottom: 20px;
  padding: 15px;
  width: 100%;

  &.is-info {
    background-color: $color-info;
    color: tint($color-info, 80%);
  }

  &.is-success {
    background-color: $color-success;
    color: shade($color-success, 50%);
  }

  &.is-warning {
    background-color: $color-warning;
    color: shade($color-warning, 50%);
  }

  &.is-danger {
    background-color: $color-danger;
    color: tint($color-danger, 80%);
  }

}


//
//--------------------------------------------------------------------------
// Alerts - Luma
//--------------------------------------------------------------------------
//

.alert {
  border-radius: .3rem;
  margin-bottom: 20px;
  padding: 15px;
  position: relative;
  width: 100%;

  &.is-info {
    background-color: $color-info;
    color: tint($color-info, 80%);
  }

  &.is-success {
    background-color: $color-success;
    color: shade($color-success, 50%);
  }

  &.is-warning {
    background-color: $color-warning;
    color: shade($color-warning, 50%);
  }

  &.is-danger {
    background-color: $color-danger;
    color: tint($color-danger, 80%);
  }

  .close {
    cursor: pointer;
    position: absolute;
    font-size: 22px;
    font-style: normal;
    opacity: .7;
    right: 1rem;
    top: 1.1rem;

    &:hover {
      opacity: .9;
    }

    &::before {
      content: "×";
    }
  }

}


Add close button to alerts
Add close button to alerts
