Horizontal window scrolling if needed.

dist/css/hopscotch.css

@@ -1,4 +1,4 @@
-/**! hopscotch - v0.3.1
+/**! hopscotch - v0.3.2
 *
 * Copyright 2017 LinkedIn Corp. All rights reserved.
 *
@@ -233,6 +233,190 @@
   -o-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
 }
+@-webkit-keyframes fadeInRightPct {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-55%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%);
+  }
+}
+@-moz-keyframes fadeInRightPct {
+  0% {
+    opacity: 0;
+    -moz-transform: translate(-55%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(-50%, -50%);
+  }
+}
+@-o-keyframes fadeInRightPct {
+  0% {
+    opacity: 0;
+    -o-transform: translate(-55%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(-50%, -50%);
+  }
+}
+@keyframes fadeInRightPct {
+  0% {
+    opacity: 0;
+    transform: translate(-55%, -50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+.fade-in-right-pct {
+  -webkit-animation-name: fadeInRightPct;
+  -moz-animation-name: fadeInRightPct;
+  -o-animation-name: fadeInRightPct;
+  animation-name: fadeInRightPct;
+}
+@-webkit-keyframes fadeInLeftPct {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-45%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%);
+  }
+}
+@-moz-keyframes fadeInLeftPct {
+  0% {
+    opacity: 0;
+    -moz-transform: translate(-45%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(-50%, -50%);
+  }
+}
+@-o-keyframes fadeInLeftPct {
+  0% {
+    opacity: 0;
+    -o-transform: translate(-45%, -50%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(-50%, -50%);
+  }
+}
+@keyframes fadeInLeftPct {
+  0% {
+    opacity: 0;
+    transform: translate(-45%, -50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+.fade-in-left-pct {
+  -webkit-animation-name: fadeInLeftPct;
+  -moz-animation-name: fadeInLeftPct;
+  -o-animation-name: fadeInLeftPct;
+  animation-name: fadeInLeftPct;
+}
+@-webkit-keyframes fadeInDownPct {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-50%, -55%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%);
+  }
+}
+@-moz-keyframes fadeInDownPct {
+  0% {
+    opacity: 0;
+    -moz-transform: translate(-50%, -55%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(-50%, -50%);
+  }
+}
+@-o-keyframes fadeInDownPct {
+  0% {
+    opacity: 0;
+    -o-transform: translate(-50%, -55%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(-50%, -50%);
+  }
+}
+@keyframes fadeInDownPct {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -55%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+.fade-in-down-pct {
+  -webkit-animation-name: fadeInDownPct;
+  -moz-animation-name: fadeInDownPct;
+  -o-animation-name: fadeInDownPct;
+  animation-name: fadeInDownPct;
+}
+@-webkit-keyframes fadeInUpPct {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-50%, -45%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%);
+  }
+}
+@-moz-keyframes fadeInUpPct {
+  0% {
+    opacity: 0;
+    -moz-transform: translate(-50%, -45%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(-50%, -50%);
+  }
+}
+@-o-keyframes fadeInUpPct {
+  0% {
+    opacity: 0;
+    -o-transform: translate(-50%, -45%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(-50%, -50%);
+  }
+}
+@keyframes fadeInUpPct {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -45%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+.fade-in-up-pct {
+  -webkit-animation-name: fadeInUpPct;
+  -moz-animation-name: fadeInUpPct;
+  -o-animation-name: fadeInUpPct;
+  animation-name: fadeInUpPct;
+}
 div.hopscotch-bubble .hopscotch-nav-button {
   /* borrowed from katy styles */
   font-weight: bold;
@@ -370,6 +554,13 @@ div.hopscotch-bubble .hide,
 div.hopscotch-bubble .hide-all {
   display: none;
 }
+div.hopscotch-bubble.windowCenter {
+  left: 50%;
+  top: 50%;
+  position: fixed;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
 div.hopscotch-bubble h3 {
   color: #000;
   font-family: Helvetica, Arial;
@@ -513,6 +704,9 @@ div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-a
   border-bottom: 17px solid transparent;
   border-top: 17px solid transparent;
 }
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.hide {
+  display: none;
+}
 div.hopscotch-bubble .hopscotch-actions {
   margin: 10px 0 0;
   text-align: right;