From 8722c755e3367f20ced79699d8166af35932e9a4 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubhamapadia@gmail.com>
Date: Thu, 1 Mar 2018 03:52:02 +0530
Subject: [PATCH] onboarding: Add bouncing ? next to hotspots.

Fixes #8124.
Adds bouncing question mark with twice the frequency of the
pulse.
---
 static/js/hotspots.js      |  1 +
 static/styles/hotspots.css | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/static/js/hotspots.js b/static/js/hotspots.js
index 38bbb3bba7..c7f6a743a6 100644
--- a/static/js/hotspots.js
+++ b/static/js/hotspots.js
@@ -181,6 +181,7 @@ function insert_hotspot_into_DOM(hotspot) {
         '<div class="hotspot-icon" id="hotspot_' + hotspot.name + '_icon">' +
             '<span class="dot"></span>' +
             '<span class="pulse"></span>' +
+            '<div class="bounce"><span class="bounce-icon">?</span></div>' +
         '</div>';
 
     setTimeout(function () {
diff --git a/static/styles/hotspots.css b/static/styles/hotspots.css
index 3a3f2b4fe4..6b395d4380 100644
--- a/static/styles/hotspots.css
+++ b/static/styles/hotspots.css
@@ -43,6 +43,32 @@
     }
 }
 
+.hotspot-icon .bounce {
+    -moz-animation: bounce 0.75s infinite;
+    -webkit-animation: bounce 0.75s infinite;
+    animation: bounce 0.75s infinite;
+}
+
+.hotspot-icon .bounce .bounce-icon {
+    position: absolute;
+    left: -5px;
+    bottom: 3px;
+    transform: rotate(7deg);
+    color: hsl(215, 47%, 50%);
+    font-size: 2.75em;
+    font-weight: 600;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        -webkit-transform: translateY(0px);
+    }
+
+    50% {
+        -webkit-transform: translateY(4px);
+    }
+}
+
 /* popover */
 .hotspot.overlay {
     z-index: 104;