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

New alert design (#9214)

Browse Source 
* ux: updated alert design

* fixed bg-color for alerts

* more changes to alerts, index fixed
This commit is contained in:
Patrick O'Carroll
2017-09-12 08:01:44 +02:00
committed by Torkel Ödegaard
parent 057b8a6b2d
commit 90602942f5
10 changed files with 77 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/sass/components/_alerts.scss
View File

@@ -7,30 +7,32 @@
// -------------------------
.alert {
padding: 0.5rem 2rem 0.5rem 1rem;
padding: 1.5rem 2rem 1.5rem 1.5rem;
margin-bottom: $line-height-base;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 2px 0 rgba(255,255,255,.5);
background-color: $state-warning-bg;
position: relative;
color: $white;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(0,0,0,.2);
border-radius: 2px;
display: flex;
flex-direction: row;
}
// Alternate styles
// -------------------------
.alert-success {
background-color: $successBackground;
background: $alert-success-bg;
}
.alert-danger,
.alert-error {
background-color: $errorBackground;
background: $alert-error-bg;
}
.alert-info {
background-color: $infoBackground;
background: $infoBackground;
}
.alert-warning {
@@ -39,28 +41,23 @@
.page-alert-list {
z-index: 8000;
min-width: 300px;
max-width: 300px;
min-width: 400px;
max-width: 600px;
position: fixed;
right: 20px;
top: 56px;
}
.alert-close {
position: absolute;
top: -4px;
right: -2px;
width: 16px;
height: 16px;
padding: 0;
background: $white;
border-radius: 50%;
padding: 0 0 0 1rem;
border: none;
font-size: 1.1rem;
color: $dark-4;
background: none;
display: flex;
align-items: center;
.fa {
position: relative;
top: -2px;
align-self: flex-end;
font-size: 1.5rem;
color: rgba(255,255,255,.75)
}
}
@@ -68,3 +65,18 @@
font-weight: $font-weight-semi-bold;
padding-bottom: 2px;
}
.alert-icon {
padding: 0 1rem 0 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
.fa {
font-size: 1.5rem;
}
}
.alert-body {
flex-grow: 1;
}

2
public/sass/components/_drop.scss
View File

@@ -5,7 +5,7 @@ $useDropShadow: false;
$attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1.00);
@include drop-theme("error", $errorBackground, $popover-color);
@include drop-theme("error", $popover-error-bg, $popover-color);
@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color);
@include drop-theme("help", $popover-help-bg, $popover-help-color);