IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Alert Pulse (#8227)

Browse Source 
* Moved the animation to the pseudo element which seemed to reduce the CPU usage in an observable way.

* Removed unnecessary style
This commit is contained in:
Matt Toback 2017-04-26 23:49:03 -07:00 committed by Torkel Ödegaard
parent a0d8afd435
commit b909cfbde4
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/sass/pages/_alerting.scss
View File

@ -50,9 +50,8 @@
.panel-alert-state {
&--alerting {
animation: alerting-panel 1.6s cubic-bezier(1,.1,.73,1) 0s infinite alternate;
box-shadow: 0 0 10px rgba($critical,0.5);
opacity: 1;
position: relative;
.panel-alert-icon:before {
color: $critical;
@ -60,6 +59,19 @@
}
}
&--alerting::after {
content: '';
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
box-shadow: 0 0 10px rgba($critical,1);
opacity: 0;
animation: alerting-panel 1.6s cubic-bezier(1,.1,.73,1) 0s infinite alternate;
}
&--ok {
.panel-alert-icon:before {
color: $online;
@ -70,6 +82,6 @@
@keyframes alerting-panel {
100% {
box-shadow: 0 0 15px $critical;
opacity: 1;
}
}