Add Span color highlight for animated spans and restyle keyframes

Signed-off-by: Jonathan Duran <jduran@motorola.com>

2 files changed, 10 insertions, 0 deletions

diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 05f56a32..f7bd4ff0 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, {
         value: function(){
             this.tweenspan.style.width = this.spanWidth + "px";
         }
+    },
+
+    highlightSpan:{
+        value: function(){
+            this.tweenspan.classList.add("spanHighlight");
+        }
     }
 });
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 1583c20f..1e988c6c 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -3,4 +3,8 @@
     height: 16px;
     opacity: 0.3;
     background-color: white;
+}
+
+.tween_span.spanHighlight{
+    background-color: #a0c8ff;
 }
\ No newline at end of file