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

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 { .panel-alert-state {
&--alerting { &--alerting {
animation: alerting-panel 1.6s cubic-bezier(1,.1,.73,1) 0s infinite alternate;
box-shadow: 0 0 10px rgba($critical,0.5); box-shadow: 0 0 10px rgba($critical,0.5);
opacity: 1; position: relative;
.panel-alert-icon:before { .panel-alert-icon:before {
color: $critical; 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 { &--ok {
.panel-alert-icon:before { .panel-alert-icon:before {
color: $online; color: $online;
@ -70,6 +82,6 @@
@keyframes alerting-panel { @keyframes alerting-panel {
100% { 100% {
box-shadow: 0 0 15px $critical; opacity: 1;
} }
} }