From 6afe0f1845c0ac3e76de03ad2ef9ce796aaba45d Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <dev@wunschik.net>
Date: Wed, 21 Sep 2016 09:22:16 +0200
Subject: [PATCH] timeline: use css style instead of delete image (#2034)

---
 gulpfile.js                         |   5 +---
 lib/timeline/component/css/item.css |  45 +++++++++++++++++++++-------
 lib/timeline/img/delete.png         | Bin 665 -> 0 bytes
 3 files changed, 36 insertions(+), 14 deletions(-)
 delete mode 100644 lib/timeline/img/delete.png

diff --git a/gulpfile.js b/gulpfile.js
index 91952ec4..8e83b26f 100644
--- a/gulpfile.js
+++ b/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) {
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 77140861..41d22256 100644
--- a/lib/timeline/component/css/item.css
+++ b/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;
diff --git a/lib/timeline/img/delete.png b/lib/timeline/img/delete.png
deleted file mode 100644
index d54d0e06fc2047fb34cf420a6edaeefa52fde987..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 665
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaL-l0AZa85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YPV
z+ueoXKL{?^yL>WGgtNdSvY3H^TNs2H8D`Cq011{AIHm(>utOMPj;%cmv@^uh#WBR<
zbm`@TUebXgY!C92?nJxf7<MFtS2j$$l$yz_G<8o?iTH0LwS%$q7dA~?R@=18TsnG-
z!WM<rM_#Tz;<n7`$G#jWNdH&-@Bf_N_pOhzXl!Uz<14ry*1IA*LAu=H$d;KW{t7ho
z3om=CwUeXBp5?&?$tR3q%y$mk@~K@_yyupux{v*-$Mzkbt!q8Xgs<_gnYuyxj@ZSg
zyloY;xb!~Q-TQ6&$^6TQogT?~F4J|2Bwq*h?&&Vf?3r~!;C0&Z?=NiH$}|InUp`=-
zcjbir#%6!johBRQKL0-`J+YeM*}JE;5%Ux`$n0Eu=A>HQv47WvUWTvf7cP^tlX<FJ
z;$%Dd{0F^xn_Jeq=CVJl+H<Jx>`(c^5al_?F77?z^hEw4tDn@4V^@0w-8rRM%jRv+
zj+riJ^ZmV$uG{m)H6f<+*?!2D#&7OCpL9h3()<-#K@Uv-J&^dvbhs@<dnb=-ATY2c
zOI#yLobz*YQ}ap~oQqNuOHxx5$}>wc6x=<11Hv2m#DR)bL5fm<QdY@e6%0lOhK9NZ
zrn-h^A%=!l#->(AhS~;3Rt5&&p1M9m(U6;;l9^VCTSNPfzfnL944$rjF6*2UngF*N
B__6>1