grafana/public/sass/components/_alerts.scss

//
// Alerts
// --------------------------------------------------

// Base styles
// -------------------------

.alert {
  padding: 15px 20px;
  margin-bottom: $space-xs;
  border-left: 3px solid $alert-error-bg;
  background: $layer2;
  position: relative;
  border-radius: $border-radius;
  display: flex;
  flex-direction: row;
  align-items: center;
}

// Alternate styles
// -------------------------

.alert-success {
  border-color: $alert-success-bg;
}

.alert-danger,
.alert-error {
  border-color: $alert-error-bg;
}

.alert-info {
  border-color: $alert-info-bg;
}

.alert-warning {
  border-color: $alert-warning-bg;
}

.page-alert-list {
  z-index: 8000;
  min-width: 400px;
  max-width: 600px;
  position: fixed;
  right: 10px;
  top: 60px;
}

.alert-close {
  padding: 0 0 0 $space-md;
  border: none;
  background: none;
  display: flex;
  align-items: center;

  .fa {
    align-self: flex-end;
    font-size: 21px;
    color: rgba(255, 255, 255, 0.75);
  }
}

.alert-title {
  font-weight: $font-weight-semi-bold;
}

.alert-icon {
  padding: 0 $space-md 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;

  .fa {
    font-size: 21px;
  }
}

.alert-body {
  overflow-wrap: break-word;
  word-break: break-word;
  flex-grow: 1;
}

.alert-icon-on-top {
  align-items: flex-start;
}

@include media-breakpoint-down(sm) {
  .page-alert-list {
    min-width: 0;
    top: 30px;
    width: calc(100% - 20px);
    max-height: calc(100% - 60px);
    overflow-y: auto;
  }
}