IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update alertify alerts to use the styling defined in the styleguide (missed some files in the original commit).

Browse Source
This commit is contained in:
Joao Pedro De Almeida Pereira
2017-06-30 10:23:12 +01:00
committed by Dave Page
parent 2a30a86e7d
commit f2d2075d81
6 changed files with 590 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
web/pgadmin/static/scss/_alert.scss Normal file
View File

@@ -0,0 +1,119 @@
/*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">
<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">
<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;
}
.alert-box {
padding: 15px;
display: inline-block;
}
.alert-icon {
display: inline-block;
}
.alert-text {
display: inline-block;
padding: 0 12px 0 10px;
}
.alert-info {
border-color: #84acdd
}
.media-body {
display: inline;
vertical-align: top;
}