switch to CSS for hover effects

hypothesis · Jun 3, 2012 · 3b509eb · 3b509eb
1 parent 25dff70
commit 3b509eb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/hypothesis/js/src/hypothesis.coffee b/hypothesis/js/src/hypothesis.coffee
@@ -204,17 +204,11 @@ class Hypothesis extends Annotator
 
           .on 'mouseover', =>
             d3.event.stopPropagation()
-            d3.select(d3.event.currentTarget).select('.annotator-controls')
-              .transition()
-                .style('display', '')
-                .style('opacity', 1)
+            d3.select(d3.event.currentTarget).classed('hyp-hover', true)
 
           .on 'mouseout', =>
             d3.event.stopPropagation()
-            d3.select(d3.event.currentTarget).select('.annotator-controls')
-              .transition()
-                .style('display', 'none')
-                .style('opacity', 1e-6)
+            d3.select(d3.event.currentTarget).classed('hyp-hover', false)
 
           .on 'click', =>
             event = d3.event
@@ -249,10 +243,6 @@ class Hypothesis extends Annotator
 
                 editor.on('hide', => item.remove())
 
-          .select('.annotator-controls')
-            .style('display', 'none')
-            .style('opacity', 1e-6)
-
         context = items
 
     @editor.hide()

diff --git a/hypothesis/sass/app.scss b/hypothesis/sass/app.scss
@@ -448,16 +448,32 @@ $threadexp-width: 1em;
 }
 
 //ANNOTATION DETAIL
+.hyp-detail {
+  @include single-transition(all, 0.6s, ease-in-out);
+  margin-left: -$thread-padding / 2;
+
+  .annotator-controls {
+    @include single-transition(all, 0.25s, ease-in-out);
+    opacity: 0;
+  }
+
+  &.hyp-hover {
+    @include box-shadow(-.25em 0 1em -.25em #999);
+    outline-left: thin solid $gray-lighter;
+
+    & > .hyp-reply > .hyp-meta > .annotator-controls {
+      opacity: 1;
+    }
+  }
+}
+
+//ANNOTATION REPLY
 .hyp-reply {
   border-left: 1px dotted #999999;
   padding-left: $thread-padding;
   padding-top: 1em;
   margin-left: $thread-padding / 2;
 
-  .hyp-detail {
-    margin-left: -$thread-padding / 2;
-  }
-
   .hyp-body {
     margin-top: 0.6em;
     position: relative;