fix: collapse like-styles

go-vela · Nov 2, 2023 · 6f0ec2e · 6f0ec2e
1 parent 6698e44
commit 6f0ec2e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 60 deletions.
diff --git a/src/scss/_graph.scss b/src/scss/_graph.scss
@@ -101,13 +101,18 @@
   fill: var(--color-bg-dark);
   stroke: var(--color-gray);
 
-  .-pending {
+  .-pending,
+  .-running {
     stroke-dasharray: 7, 4;
   }
 
+  .-canceled,
+  .-failure {
+    stroke-dasharray: 3 3;
+  }
+
   .-running {
     stroke: var(--color-yellow);
-    stroke-dasharray: 7, 4;
   }
 
   .-success {
@@ -116,12 +121,10 @@
 
   .-failure {
     stroke: var(--color-red);
-    stroke-dasharray: 3 3;
   }
 
   .-canceled {
     stroke: var(--color-cyan-dark);
-    stroke-dasharray: 3 3;
   }
 
   .-killed,
@@ -148,8 +151,6 @@
   stroke: var(--color-gray);
 
   .-pending {
-    fill: var(--color-bg-dark);
-    stroke: var(--color-gray);
     stroke-dasharray: 5, 3;
   }
 
@@ -214,17 +215,33 @@
   fill: none;
   stroke-width: 1.8;
 
+  &.-pending,
+  &.-running {
+    stroke-dasharray: 10;
+  }
+
+  &.-failure,
+  &.-error,
+  &.-canceled {
+    stroke-dasharray: 4 3;
+  }
+
+  &.-focus {
+    stroke-width: 3;
+  }
+
+  &.-hover {
+    stroke-width: 4;
+  }
+
   &.-pending {
     stroke: var(--color-gray);
-    stroke-dasharray: 10;
   }
 
   &.-running {
     animation: dash 25s linear;
     animation-iteration-count: infinite;
 
-    stroke-dasharray: 10;
-
     stroke: var(--color-yellow);
   }
 
@@ -234,14 +251,10 @@
 
   &.-failure,
   &.-error {
-    stroke-dasharray: 4 3;
-
     stroke: var(--color-red);
   }
 
   &.-canceled {
-    stroke-dasharray: 4 3;
-
     stroke: var(--color-cyan-dark);
   }
 
@@ -253,14 +266,9 @@
     stroke: var(--color-lavender);
   }
 
-  &.-focus {
-    stroke: var(--color-primary);
-    stroke-width: 3;
-  }
-
+  &.-focus,
   &.-hover {
     stroke: var(--color-primary);
-    stroke-width: 4;
   }
 }
 
@@ -280,7 +288,8 @@
     fill: var(--color-green);
   }
 
-  &.-failure {
+  &.-failure,
+  &.-error {
     fill: var(--color-red);
   }
 
@@ -292,17 +301,17 @@
   &.-skipped {
     fill: var(--color-lavender);
   }
-
-  &.-error {
-    fill: var(--color-red);
-  }
 }
 
 // icon content
 .d3-build-graph-node-a svg {
   stroke: var(--color-coal-dark);
   stroke-width: 2;
 
+  &.-error {
+    stroke-width: 3;
+  }
+
   &.-pending {
     fill: var(--color-coal-dark);
   }
@@ -315,7 +324,8 @@
     fill: var(--color-green);
   }
 
-  &.-failure {
+  &.-failure,
+  &.-error {
     fill: var(--color-red);
   }
 
@@ -327,11 +337,6 @@
   &.-skipped {
     fill: var(--color-coal-dark);
   }
-
-  &.-error {
-    fill: var(--color-red);
-    stroke-width: 3;
-  }
 }
 
 .d3-build-graph-node-step-a {
@@ -355,26 +360,13 @@
 .d3-build-graph-edge-path {
   animation: none;
 
-  &.-pending {
-    stroke: var(--color-gray);
-    stroke-dasharray: 10, 4;
-    stroke-width: 1;
-  }
-
+  &.-pending,
   &.-running {
-    animation: dash 25s linear;
-    animation-iteration-count: infinite;
-
-    stroke: var(--color-yellow);
     stroke-dasharray: 10, 4;
-    stroke-width: 2;
-  }
-
-  &.-success {
-    stroke: var(--color-gray);
-    stroke-width: 1;
   }
 
+  &.-pending,
+  &.-success,
   &.-failure,
   &.-canceled,
   &.-killed,
@@ -385,11 +377,15 @@
     stroke: var(--color-gray);
   }
 
-  &.-focus {
-    stroke: var(--color-primary);
+  &.-running {
+    animation: dash 25s linear;
+    animation-iteration-count: infinite;
+
+    stroke: var(--color-yellow);
     stroke-width: 2;
   }
 
+  &.-focus,
   &.-hover {
     stroke: var(--color-primary);
     stroke-width: 2;

diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
@@ -206,10 +206,7 @@ body.theme-light {
     stroke: var(--color-lavender);
   }
 
-  &.-focus {
-    stroke: var(--color-primary);
-  }
-
+  &.-focus,
   &.-hover {
     stroke: var(--color-primary);
   }
@@ -226,10 +223,7 @@ body.theme-light {
     stroke: var(--color-coal-light);
   }
 
-  &.-focus {
-    stroke: var(--color-primary);
-  }
-
+  &.-focus,
   &.-hover {
     stroke: var(--color-primary);
   }
@@ -239,10 +233,7 @@ body.theme-light {
 .theme-light .d3-build-graph-node-a svg {
   stroke: var(--color-offwhite);
 
-  &.-pending {
-    fill: var(--color-offwhite);
-  }
-
+  &.-pending,
   &.-killed,
   &.-skipped {
     fill: var(--color-offwhite);