timeline: use css style instead of delete image (#2034)

Author: mojoaxel

gulpfile.js

@@ -175,10 +175,7 @@ gulp.task('copy', ['clean'], function () {
     var network = gulp.src('./lib/network/img/**/*')
       .pipe(gulp.dest(DIST + '/img/network'));
 
-    var timeline = gulp.src('./lib/timeline/img/**/*')
-      .pipe(gulp.dest(DIST + '/img/timeline'));
-
-    return merge(network, timeline);
+    return network;
 });
 
 gulp.task('minify', ['bundle-js'], function (cb) {

lib/timeline/component/css/item.css

@@ -90,26 +90,51 @@
   padding: 5px;
 }
 
-.vis-item .vis-delete {
-  background: url('img/timeline/delete.png') no-repeat center;
+.vis-item .vis-delete, .vis-item .vis-delete-rtl {
   position: absolute;
+  top: 0px;
   width: 24px;
   height: 24px;
-  top: -4px;
-  right: -24px;
+  box-sizing: border-box;
+  padding: 0px 5px;
   cursor: pointer;
+
+  -webkit-transition: background 0.2s linear;
+  -moz-transition: background 0.2s linear;
+  -ms-transition: background 0.2s linear;
+  -o-transition: background 0.2s linear;
+  transition: background 0.2s linear;
+}
+
+.vis-item .vis-delete {
+  right: -24px;
 }
 
 .vis-item .vis-delete-rtl {
-  background: url('img/timeline/delete.png') no-repeat center;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  top: -4px;
   left: -24px;
-  cursor: pointer;
 }
 
+.vis-item .vis-delete:after, .vis-item .vis-delete-rtl:after {
+  content: "\00D7"; /* MULTIPLICATION SIGN */
+  color: red;
+  font-family: arial, sans-serif;
+  font-size: 22px;
+  font-weight: bold;
+
+  -webkit-transition: color 0.2s linear;
+  -moz-transition: color 0.2s linear;
+  -ms-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+
+.vis-item .vis-delete:hover, .vis-item .vis-delete-rtl:hover {
+  background: red;
+}
+
+.vis-item .vis-delete:hover:after, .vis-item .vis-delete-rtl:hover:after {
+  color: white;
+}
 
 .vis-item.vis-range .vis-drag-left {
   position: absolute;