Update pipeline graph styles to match mockup

1 files changed, 21 insertions, 15 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a2779704eff..e7e1a2a9b18 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -303,7 +303,13 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 65px;
+  margin-right: 48px;
+
+  &.left-margin {
+    &:not(:first-child) {
+      margin-left: 48px;
+    }
+  }
 
   li {
     list-style: none;
@@ -321,9 +327,9 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 6px 10px;
+    padding: 8px 10px;
     border-radius: 30px;
-    width: 150px;
+    width: 186px;
     margin-bottom: 10px;
 
     &.playable {
@@ -443,9 +449,9 @@
         content: '';
         position: absolute;
         top: 50%;
-        right: -69px;
+        right: -48px;
         border-top: 2px solid $border-color;
-        width: 69px;
+        width: 48px;
         height: 1px;
       }
     }
@@ -457,22 +463,22 @@
         top: -47px;
         position: absolute;
         border-bottom: 2px solid $border-color;
-        width: 20px;
+        width: 25px;
         height: 65px;
       }
 
       // Right connecting curves
       &::after {
-        right: -20px;
+        right: -25px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 15px;
+        border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
-        left: -20px;
+        left: -25px;
         border-left: 2px solid $border-color;
-        border-radius: 0 0 0 15px;
+        border-radius: 0 0 0 20px;
       }
     }
 
@@ -538,20 +544,20 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -29px;
+      top: -30px;
       border-top: 2px solid $border-color;
     }
 
     &::after {
-      left: -39px;
+      left: -44px;
       border-right: 2px solid $border-color;
-      border-radius: 0 15px;
+      border-radius: 0 20px;
     }
 
     &::before {
-      right: -39px;
+      right: -44px;
       border-left: 2px solid $border-color;
-      border-radius: 15px 0 0;
+      border-radius: 20px 0 0;
     }
   }
 }