refactor close nav task

app/assets/javascripts/app/controllers/taskbar_widget.js.coffee

@@ -1,6 +1,6 @@
 class App.TaskbarWidget extends App.Controller
   events:
-    'click [data-type="close"]': 'remove'
+    'click .js-close': 'remove'
 
   constructor: ->
     super

app/assets/javascripts/app/views/task_widget_tasks.jst.eco

@@ -4,8 +4,10 @@
       <div class="<%= item.data.iconClass %> icon<% if item.task.notify: %> modified<% end %>"></div>
     </div>
     <div class="name u-textTruncate flex"><%= item.data.head %></div>
-    <div class="close-task button horizontal centered">
-      <div class="close close-task icon" title="<%- @T('close') %>" data-type="close"></div>
+    <div class="closeTask js-close u-clickable horizontal centered" title="<%- @T('close') %>">
+      <div class="closeTask-inner centered">
+        <div class="white close icon"></div>
+      </div>
     </div>
   </a>
 <% end %>

app/assets/stylesheets/zzz.css.erb

@@ -865,11 +865,6 @@ ol.tabs li {
         @-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
             @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
 
-  .close-task.icon {
-    background: #2c2d36;
-    border-radius: 100%;
-  }
-
   .organisation.icon {
     height: 13px;
     width: 14px;
@@ -1591,30 +1586,42 @@ footer {
   .level-3 .modified.priority.icon:after {
     background-color: #faab00;
     border-color: #faab00;
-  }
+  }    
 
-  .task .close-task.button {
+  .task .closeTask {
     position: absolute;
     right: 0;
     top: 0;
-    width: 40px;
+    width: 50px;
     padding-left: 12px;
     height: 100%;
     visibility: hidden;
   }
 
-  .task:hover .close-task.button {
-    visibility: visible;
-  }
+    .task:hover .closeTask {
+      visibility: visible;
+    }
 
-  .close-task.button:hover .icon {
-    background: #972e29;
-  }
+    .closeTask-inner {
+      width: 21px;
+      height: 21px;
+      background-color: #2c2d36;
+      border-radius: 100%;
+    }
 
-  .close-task.button:hover .icon:after,
-  .close-task.button:hover .icon:before {
-    background: white;
-  }
+    .closeTask:hover .closeTask-inner {
+      background-color: #972e29;
+    }
+
+    .closeTask .icon {
+      opacity: 0.3;
+      -webkit-transform: scale(0.7);
+              transform: scale(0.7);
+    }
+
+    .closeTask:hover .icon {
+      opacity: 1;
+    } 
 
 .search {
   padding: 14px 15px 10px 10px;