grafana/public/sass/pages/_alerting.scss

.alert-state-paused,
.alert-state-pending {
  color: $text-muted;
  font-weight: $font-weight-semi-bold;
}

.alert-state-ok {
  color: $online;
  font-weight: $font-weight-semi-bold;
}

.alert-state-warning {
  color: $warn;
  font-weight: $font-weight-semi-bold;
}

.alert-state-critical {
  color: $critical;
  font-weight: $font-weight-semi-bold;
}

.alert-notify-emails {
  width: 400px;
  border-right: 1px solid $black;
}

.alert-notify-emails .bootstrap-tagsinput {
  width: 394px; // offset for 8px left padding and border width
}

.alert-notify-emails .bootstrap-tagsinput input {
  border: 0;
}

.panel-alert-icon {
  display: none;
}

.panel-has-alert {
  .panel-alert-icon {
    display: inline-block;
  }
}

.panel-alert-state {
  &--alerting {
    svg.panel-alert-icon {
      color: $critical;
      animation: alerting-panel 1s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate;
    }
  }
  &--ok {
    svg.panel-alert-icon {
      color: $online;
    }
  }

  &--pending {
    svg.panel-alert-icon {
      color: $warn;
    }
  }
}

@keyframes alerting-panel {
  100% {
    transform: scale(1.2);
  }
}

// Alert List
// Alert List

.alert-rule-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
}

.alert-rule-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: $card-background;
  box-shadow: $card-shadow;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.alert-rule-item__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  overflow: hidden;
}

.alert-rule-item__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  //margin-right: 8px;
  padding: 0 4px 0 2px;
  .icon-gf,
  .fa {
    font-size: 200%;
    position: relative;
    top: 2px;
  }
}

.alert-rule-item__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.alert-rule-item__name {
  font-size: $font-size-base;
  margin: 0;
  font-weight: $font-weight-semi-bold;
}

.alert-list__btn {
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-rule-item__text {
  font-weight: bold;
  font-size: $font-size-sm;
  margin: 0;
}

.alert-rule-item__time {
  color: $text-color-weak;
  font-weight: normal;
  white-space: nowrap;
}

.alert-rule-item__info {
  //color: $text-color;
  font-weight: normal;
  flex-grow: 2;
  display: flex;
  align-items: flex-end;
}

.alert-rule-item__actions {
  display: flex;
  align-items: center;
}

.alert-tesint {
  display: flex;
}