pgadmin4/web/pgadmin/static/scss/_alert.scss

/*doc
---
title: Alerts
name: alerts
category: alerts
---

```html_example
<div class="alert-row">
  <div class="alert alert-success text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon success-icon">
          <i class="fa fa-check" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Successfully run. Total query runtime: 32 msec. 1 row retrieved
        </div>
      </div>
    </div>
  </div>
</div>

<div class="alert-row">
  <div class="alert alert-danger font-red text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon error-icon">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Error retrieving properties - INTERNAL SERVER ERROR
        </div>
      </div>
    </div>
  </div>
</div>

<div class="alert-row">
  <div class="alert alert-info font-blue text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-text">
          This is a neutral message
        </div>
      </div>
    </div>
  </div>
</div>

```
*/


// from bootstrap scss:

@if $enable-flex {
  .media {
    display: flex;
  }
  .media-body {
    flex: 1;
  }
  .media-middle {
    align-self: center;
  }
  .media-bottom {
    align-self: flex-end;
  }
} @else {
  .media,
  .media-body {
    overflow: hidden;
  }
  .media-body {
    width: 10000px;
  }
  .media-left,
  .media-right,
  .media-body {
    display: inline;
    vertical-align: top;
  }
  .media-middle {
    vertical-align: middle;
  }
  .media-bottom {
    vertical-align: bottom;
  }
}

.alert-row {
  display: block;
  width: auto;
}

.alert-box {
  padding: 0px;
  display: inline-block;
}

.alert.alert-info {
  padding: 15px;
}

.alert-icon {
  display: inline-block;
  color: white;
  padding: 15px;
  width: 50px;
  height: 50px;
  font-size: 14px;
}

.success-icon {
  background: #3a773a;
}

.error-icon {
  background: #d0021b;
}

.alert-text {
  display: inline-block;
  padding: 0 12px 0 10px;
}

.alert-row {
  display: block;
}

.alert-box {
  padding: 0px;
  display: inline-block;
}

.alert-icon {
  display: inline-block;
  color: white;
  padding: 15px;
  width: 50px;
  height: 50px;
  font-size: 14px;
  text-align: center;
}

.success-icon {
  background: #3a773a;
}

.error-icon {
  background: #d0021b;
}

.alert-text {
  display: inline-block;
  padding: 0 12px 0 10px;
  // To make sure IE picks up the correct font
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.alert-info {
  border-color: #84acdd
}

.media-body {
  vertical-align: top;
  width: initial;
}

.ajs-message {
  .media {
    display: block;
  }
}

.pg-prop-status-bar {
  padding: 5px;

  .media-body {
    display: flex;
  }

  .alert-icon {
    padding: 8px;
    width: 35px;
    height: 35px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .alert-text {
    flex-grow: 1;
    border: 1px solid $color-red-2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 7px 12px 5px 10px;
    border-left: 0px;
  }

  .error-in-footer {
    border-radius: 4px;

    .alert-text {
      border-color: $color-red-2;
    }
  }

  .success-in-footer {
    border-radius: 4px;

    .alert-text {
      border-color: $color-green-2;
    }
  }

  .info-in-footer {
    border: 1px solid $primary-blue;
    border-radius: 4px;
    height: 35px;

    .alert-text {
      border: 0px;
    }
  }
}