Improve arrow animation styling

v13inc · Jul 6, 2016 · 34c8679 · 34c8679
1 parent fb44d14
commit 34c8679
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 80 deletions.
diff --git a/themes/default/the-graph.styl b/themes/default/the-graph.styl
@@ -176,11 +176,6 @@ path {
   stroke: var-edge-bg;
   stroke-width: ((var-edge-width+1)/2);
 }
-.edge.selected .arrow-bg {
-  stroke: var-selection-box-border;
-  stroke-width: var-edge-width + 1;
-}
-
 .edge-bg {
   stroke: var-edge-bg;
   stroke-width: (var-edge-width + 2);
@@ -197,7 +192,11 @@ path {
   opacity: 0;
 }
 .edge:hover .edge-bg, .edge:hover .arrow-bg {
-  stroke: var-edge-hover-bg;  
+  stroke: var-edge-hover-bg;
+}
+.edge.selected .arrow-bg {
+  stroke: var-selection-box-border;
+  stroke-width: var-edge-width + 1;
 }
 .edge.selected .edge-bg {
   stroke-width: (var-edge-width * 2 + 2);
@@ -213,43 +212,43 @@ path {
 
 /* marching ants for animated arrows */
 
-@-webkit-keyframes heartbeats {
+@-webkit-keyframes arrow-heartbeats {
   0% { stroke-width: (var-edge-width + 1); }
-  10% { stroke-width: (var-edge-width + 2); }
+  10% { stroke-width: ((var-edge-width + 1) * 2); }
   30% { stroke-width: (var-edge-width + 1); }
-  40% { stroke-width: (var-edge-width + 2); }
+  40% { stroke-width: ((var-edge-width + 1) * 2); }
   60% { stroke-width: (var-edge-width + 1); }
 }
-@-moz-keyframes heartbeats {
+@-moz-keyframes arrow-heartbeats {
   0% { stroke-width: (var-edge-width + 1); }
-  10% { stroke-width: (var-edge-width + 2); }
+  10% { stroke-width: ((var-edge-width + 1) * 2); }
   30% { stroke-width: (var-edge-width + 1); }
-  40% { stroke-width: (var-edge-width + 2); }
+  40% { stroke-width: ((var-edge-width + 1) * 2); }
   60% { stroke-width: (var-edge-width + 1); }
 }
-@-o-keyframes heartbeats {
+@-o-keyframes arrow-heartbeats {
   0% { stroke-width: (var-edge-width + 1); }
-  10% { stroke-width: (var-edge-width + 2); }
+  10% { stroke-width: ((var-edge-width + 1) * 2); }
   30% { stroke-width: (var-edge-width + 1); }
-  40% { stroke-width: (var-edge-width + 2); }
+  40% { stroke-width: ((var-edge-width + 1) * 2); }
   60% { stroke-width: (var-edge-width + 1); }
 }
-@keyframes heartbeats {
+@keyframes arrow-heartbeats {
   0% { stroke-width: (var-edge-width + 1); }
-  10% { stroke-width: (var-edge-width + 2); }
+  10% { stroke-width: ((var-edge-width + 1) * 2); }
   30% { stroke-width: (var-edge-width + 1); }
-  40% { stroke-width: (var-edge-width + 2); }
+  40% { stroke-width: ((var-edge-width + 1) * 2); }
   60% { stroke-width: (var-edge-width + 1); }
 }
 .edge.animated .arrow-bg {
   stroke-linecap: round;
   stroke-width: (var-edge-width + 1);
   stroke: var-selection-box-border;
 
-  -webkit-animation: heartbeats 4s linear infinite;
-     -moz-animation: heartbeats 4s linear infinite;
-       -o-animation: heartbeats 4s linear infinite;
-          animation: heartbeats 4s linear infinite;
+  -webkit-animation: arrow-heartbeats 4s linear infinite;
+     -moz-animation: arrow-heartbeats 4s linear infinite;
+       -o-animation: arrow-heartbeats 4s linear infinite;
+          animation: arrow-heartbeats 4s linear infinite;
 }
 
 

diff --git a/themes/the-graph-dark.css b/themes/the-graph-dark.css
@@ -157,10 +157,6 @@
   stroke: #000;
   stroke-width: 2px;
 }
-.the-graph-dark .edge.selected .arrow-bg {
-  stroke: #e6e6e6;
-  stroke-width: 4px;
-}
 .the-graph-dark .edge-bg {
   stroke: #000;
   stroke-width: 5px;
@@ -179,6 +175,10 @@
 .the-graph-dark .edge:hover .arrow-bg {
   stroke: #808080;
 }
+.the-graph-dark .edge.selected .arrow-bg {
+  stroke: #e6e6e6;
+  stroke-width: 4px;
+}
 .the-graph-dark .edge.selected .edge-bg {
   stroke-width: 8px;
   stroke: #e6e6e6;
@@ -189,52 +189,52 @@
 .the-graph-dark .small .edge-fg {
   stroke-width: 6px;
 }
-@-webkit-keyframes heartbeats {
+@-webkit-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
   }
 }
-@-moz-keyframes heartbeats {
+@-moz-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
   }
 }
-@-o-keyframes heartbeats {
+@-o-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
@@ -244,10 +244,10 @@
   stroke-linecap: round;
   stroke-width: 4px;
   stroke: #e6e6e6;
-  -webkit-animation: heartbeats 4s linear infinite;
-  -moz-animation: heartbeats 4s linear infinite;
-  -o-animation: heartbeats 4s linear infinite;
-  animation: heartbeats 4s linear infinite;
+  -webkit-animation: arrow-heartbeats 4s linear infinite;
+  -moz-animation: arrow-heartbeats 4s linear infinite;
+  -o-animation: arrow-heartbeats 4s linear infinite;
+  animation: arrow-heartbeats 4s linear infinite;
 }
 @-webkit-keyframes heartbeats {
   0% {
@@ -837,69 +837,69 @@
     fill: rgba(255,0,0,0.94);
   }
 }
-@-moz-keyframes heartbeats {
+@-moz-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
   }
 }
-@-webkit-keyframes heartbeats {
+@-webkit-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
   }
 }
-@-o-keyframes heartbeats {
+@-o-keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;
   }
 }
-@keyframes heartbeats {
+@keyframes arrow-heartbeats {
   0% {
     stroke-width: 4px;
   }
   10% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   30% {
     stroke-width: 4px;
   }
   40% {
-    stroke-width: 5px;
+    stroke-width: 8px;
   }
   60% {
     stroke-width: 4px;