1 files changed, 36 insertions, 7 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index ad256e2a728..f35aca193e9 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -232,10 +232,35 @@
 
 // Pipeline visualization
 
+.toggle-pipeline-btn {
+  background-color: $gray-dark;
+
+  .caret {
+    border-top: none;
+    border-bottom: 4px solid;
+  }
+
+  &.graph-collapsed {
+    background-color: $white-light;
+
+    .caret {
+      border-bottom: none;
+      border-top: 4px solid;
+    }
+  }
+}
+
 .pipeline-graph {
   width: 100%;
   overflow: auto;
   white-space: nowrap;
+  max-height: 500px;
+  transition: max-height 0.3s, padding 0.3s;
+
+  &.graph-collapsed {
+    max-height: 0;
+    padding: 0 16px;
+  }
 }
 
 .pipeline-visualization {
@@ -315,7 +340,6 @@
         right: -20px;
         border-right: 2px solid $border-color;
         border-radius: 0 0 50px;
-        -webkit-border-radius: 0 0 50px;
       }
 
       // Left connecting curves
@@ -323,7 +347,6 @@
         left: -20px;
         border-left: 2px solid $border-color;
         border-radius: 0 0 0 50px;
-        -webkit-border-radius: 0 0 0 50px;
       }
     }
 
@@ -333,11 +356,6 @@
         height: 45px;
         top: -26px;
       }
-      &::after {
-        // border-left: 2px solid $border-color;
-        border-top-right-radius: -50px;
-        -webkit-border-top-right-radius: -50px;
-      }
     }
   }
 
@@ -369,3 +387,14 @@
     }
   }
 }
+
+.pipeline-actions {
+  border-bottom: none;
+}
+
+.toggle-pipeline-btn {
+
+  .fa {
+    color: $dropdown-header-color;
+  }
+}