Move interactions.scss

app/assets/stylesheets/_application.scss

@@ -15,7 +15,7 @@
 @import 'sprites';
 @import 'hovercard';
 @import 'base';
-@import 'new_styles/interactions';
+@import 'interactions';
 @import 'spinner';
 @import 'timeago';
 @import 'vendor/fileuploader';

app/assets/stylesheets/new_styles/_interactions.scss → app/assets/stylesheets/interactions.scss

@@ -2,34 +2,31 @@
   a {
     &:hover { text-decoration: none; }
 
-    [class^="entypo-"], [class*="entypo-"] {
+    [class^="entypo-"],
+    [class*="entypo-"] {
       color: $text-grey;
       font-size: $font-size-base;
       line-height: $line-height-base;
       vertical-align: middle;
-      &:hover { color: $text; }
-      &.cross { font-size: $line-height-base; }
     }
 
-    &.hide_conversation i {
-      font-size: $line-height-computed*1.5;
+    [class^="entypo-"]:hover,
+    [class*="entypo-"]:hover {
+      color: $text;
     }
 
-    &.delete_conversation i {
-      font-size: $font-size-base*1.5;
-    }
-
-    &.destroy_participation i {
-      color: $black;
-      &:hover { color: $text-dark-grey; }
-    }
+    &.hide_conversation i { font-size: $line-height-computed * 1.5; }
+    &.delete_conversation i { font-size: $font-size-base * 1.5; }
+    &.destroy_participation i { color: $black; }
+    &.destroy_participation i:hover { color: $text-dark-grey; }
   }
 }
 
-.stream_container, #single-post-interactions {
+.stream_container,
+.single-post-interactions {
   .control-icons {
-    z-index: 6;
     float: right;
+    z-index: 6;
 
     .block_user,
     .comment_report,
@@ -40,20 +37,29 @@
       display: inline-block;
     }
 
-    & > a:hover {
-      text-decoration: none;
-    }
+    > a:hover { text-decoration: none; }
+  }
+}
+
+.stream_element,
+.comment,
+.photo,
+.stream_element:hover .comment {
+  .control-icons {
+    @include transition(opacity);
+    opacity: 0;
   }
 
-  .stream_element, .comment, .photo, .stream_element:hover .comment {
-    .control-icons > a {
-      @include transition(opacity);
-      opacity: 0;
-    }
+  &:hover .control-icons { opacity: 1; }
+}
 
-    &:hover .control-icons {
-      & > a { opacity: 0.8; }
-      & > a:hover { opacity: 1; }
-    }
+.stream_element,
+.comment,
+.photo {
+  .control-icons > a {
+    @include transition(opacity);
+    opacity: .8;
   }
+
+  .control-icons > a:hover { opacity: 1; }
 }

app/assets/templates/single-post-viewer_tpl.jst.hbs

 <div id='single-post-container' class='container-fluid'>
   <div class='row'>
-    <div id='single-post-content' class='col-md-6'>
+    <div id='single-post-content' class='col-md-6 single-post-content'>
     </div>
-    <div id='single-post-interactions' class='col-md-6'>
+    <div id='single-post-interactions' class='col-md-6 single-post-interactions'>
     </div>
   </div>
 </div>

features/step_definitions/custom_web_steps.rb

@@ -88,6 +88,7 @@ And /^I hover over the "([^"]+)"$/ do |element|
 end
 
 When /^I prepare the deletion of the first post$/ do
+  find(".stream .stream_element", match: :first).hover
   within(find(".stream .stream_element", match: :first)) do
     ctrl = find(".control-icons")
     ctrl.hover
@@ -96,6 +97,7 @@ When /^I prepare the deletion of the first post$/ do
 end
 
 When /^I prepare hiding the first post$/ do
+  find(".stream .stream_element", match: :first).hover
   within(find(".stream .stream_element", match: :first)) do
     ctrl = find(".control-icons")
     ctrl.hover