Improve styling for alerts by highlighting the icon.

This commit is contained in:
Murtuza Zabuawala 2017-07-04 12:03:32 +01:00 committed by Dave Page
parent 66b101fe4c
commit b211eb199c
3 changed files with 18 additions and 4 deletions

View File

@ -7,7 +7,7 @@ define([
var alertMessage = '\
<div class="media font-green-3 text-14">\
<div class="media-body media-middle">\
<div class="alert-icon">\
<div class="alert-icon success-icon">\
<i class="fa fa-check" aria-hidden="true"></i>\
</div>\
<div class="alert-text">' + message + '</div>\
@ -21,7 +21,7 @@ define([
var alertMessage = '\
<div class="media font-red-3 text-14">\
<div class="media-body media-middle">\
<div class="alert-icon">\
<div class="alert-icon error-icon">\
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
</div>\
<div class="alert-text">' + message + '</div>\

View File

@ -10,7 +10,7 @@ category: alerts
<div class="alert alert-success text-14 alert-box">
<div class="media">
<div class="media-body media-middle">
<div class="alert-icon">
<div class="alert-icon success-icon">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="alert-text">
@ -25,7 +25,7 @@ category: alerts
<div class="alert alert-danger font-red text-14 alert-box">
<div class="media">
<div class="media-body media-middle">
<div class="alert-icon">
<div class="alert-icon error-icon">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
</div>
<div class="alert-text">
@ -100,6 +100,19 @@ category: alerts
.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 {

View File

@ -126,6 +126,7 @@
/* Restyling alertify query results messages */
.alertify-notifier.ajs-right .ajs-message.ajs-visible {
right: 0;
padding: 0;
}
.alertify-notifier .ajs-message {