22

✏️ Editing: _alerts.scss

//
// Component: Alert
//

.alert {
  .icon {
    margin-right: 10px;
  }

.close {
    color: $black;
    opacity: .2;

&:hover {
      opacity: .5;
    }
  }

a {
    color: $white;
    text-decoration: underline;
  }
}

//Alert Variants
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    color: color-yiq($value);
    background-color: $value;
    border-color: darken($value, 5%);
  }

.alert-default-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

@include dark-mode () {
  @each $color, $value in $theme-colors-alt {
    .alert-#{$color} {
      color: color-yiq($value);
      background-color: $value;
      border-color: darken($value, 5%);
    }

.alert-default-#{$color} {
      @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
    }
  }
}

MR SKB