From b909cfbde45b2765b63411ae5387189c2287b7be Mon Sep 17 00:00:00 2001
From: Matt Toback <matt@raintank.io>
Date: Wed, 26 Apr 2017 23:49:03 -0700
Subject: [PATCH] Refactored Alert Pulse (#8227)

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

* Removed unnecessary style
---
 public/sass/pages/_alerting.scss | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index 70124f0cd85..2829849bcb8 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -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;
   }
 }