Break out pointers.scss

h/static/styles/inject.scss

@@ -86,110 +86,10 @@ $base-font-size: 14px;
   }
 }
 
-.annotator-frame .heatmap-pointer {
-  @include box-sizing(border-box);
-  background: $white;
-  border: solid 1px $gray-lighter;
-  border-radius: 2px 4px 4px 2px;
-  right: 0;
-  position: absolute;
-  margin-top: -8px;
-  height: 16px;
-  width: 26px;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-align: center;
-  cursor: pointer;
-
-  .label {
-    @include reset-box-model;
-    @include reset-font;
-    background: none;
-    color: $text-color;
-    font-weight: bold;
-    font-family: $sans-font-family;
-    font-size: 10px;
-    line-height: 14px;
-    margin: 0 auto;
-  }
-
-  &:before, &:after {
-    content: '';
-    right: 100%;
-    top: 50%;
-    position: absolute;
-    // NB: use of 'inset' here fixes jagged diagonals in FF
-    // https://github.com/zurb/foundation/issues/2230
-    border: inset transparent;
-    height: 0;
-    width: 0;
-  }
-
-  &:before {
-    border-width: 8px;
-    border-right: 5px solid $gray-lighter;
-    margin-top: -8px;
-  }
-
-  &:after {
-    border-width: 7px;
-    border-right: 4px solid $white;
-    margin-top: -7px;
-  }
-
-  &.lower, &.upper {
-    &:before, &:after {
-      left: 50%;
-      bottom: 100%;
-      right: auto;
-      border-right: solid transparent;
-      margin-top: 0;
-    }
-  }
-
-  &.upper {
-    border-radius: 2px 2px 4px 4px;
-
-    &:before, &:after {
-      top: auto;
-      bottom: 100%;
-    }
-
-    &:before {
-      border-width: 13px;
-      border-bottom: 6px solid $gray-lighter;
-      margin-left: -13px;
-    }
-
-    &:after {
-      border-width: 12px;
-      border-bottom: 5px solid $white;
-      margin-left: -12px;
-    }
-  }
-
-  &.lower {
-    border-radius: 4px 4px 2px 2px;
-
-    &:before, &:after {
-      bottom: auto;
-      top: 100%;
-    }
-
-    &:before {
-      border-width: 13px;
-      border-top: 6px solid $gray-lighter;
-      margin-left: -13px;
-    }
-
-    &:after {
-      border-width: 12px;
-      border-top: 5px solid $white;
-      margin-left: -12px;
-    }
-  }
+.annotator-frame {
+  @import 'pointers';
 }
 
-
 //HIGHLIGHTS////////////////////////////////
 .annotator-highlights-always-on .annotator-hl,
 .annotator-hl-active, .annotator-hl-temporary, .annotator-hl-focused {

h/static/styles/pointers.scss

+.heatmap-pointer {
+  @include box-sizing(border-box);
+  background: $white;
+  border: solid 1px $gray-lighter;
+  border-radius: 2px 4px 4px 2px;
+  right: 0;
+  position: absolute;
+  margin-top: -8px;
+  height: 16px;
+  width: 26px;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: center;
+  cursor: pointer;
+
+  .label {
+    @include reset-box-model;
+    @include reset-font;
+    background: none;
+    color: $text-color;
+    font-weight: bold;
+    font-family: $sans-font-family;
+    font-size: 10px;
+    line-height: 14px;
+    margin: 0 auto;
+  }
+
+  &:before, &:after {
+    content: '';
+    right: 100%;
+    top: 50%;
+    position: absolute;
+    // NB: use of 'inset' here fixes jagged diagonals in FF
+    // https://github.com/zurb/foundation/issues/2230
+    border: inset transparent;
+    height: 0;
+    width: 0;
+  }
+
+  &:before {
+    border-width: 8px;
+    border-right: 5px solid $gray-lighter;
+    margin-top: -8px;
+  }
+
+  &:after {
+    border-width: 7px;
+    border-right: 4px solid $white;
+    margin-top: -7px;
+  }
+
+  &.lower, &.upper {
+    &:before, &:after {
+      left: 50%;
+      bottom: 100%;
+      right: auto;
+      border-right: solid transparent;
+      margin-top: 0;
+    }
+  }
+
+  &.upper {
+    border-radius: 2px 2px 4px 4px;
+
+    &:before, &:after {
+      top: auto;
+      bottom: 100%;
+    }
+
+    &:before {
+      border-width: 13px;
+      border-bottom: 6px solid $gray-lighter;
+      margin-left: -13px;
+    }
+
+    &:after {
+      border-width: 12px;
+      border-bottom: 5px solid $white;
+      margin-left: -12px;
+    }
+  }
+
+  &.lower {
+    border-radius: 4px 4px 2px 2px;
+
+    &:before, &:after {
+      bottom: auto;
+      top: 100%;
+    }
+
+    &:before {
+      border-width: 13px;
+      border-top: 6px solid $gray-lighter;
+      margin-left: -13px;
+    }
+
+    &:after {
+      border-width: 12px;
+      border-top: 5px solid $white;
+      margin-left: -12px;
+    }
+  }
+}
\ No newline at end of file