Removes hover animation from mini pipeline graph42769-remove-hover-animation

4 files changed, 5 insertions, 41 deletions

diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 32cf3dba3c3..84bcc1beb1a 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -154,12 +154,6 @@
       >
         <icon :name="borderlessIcon" />
       </span>
-
-      <i
-        class="fa fa-caret-down"
-        aria-hidden="true"
-      >
-      </i>
     </button>
 
     <ul
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 855ebf7d86d..42ac928dcb7 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -231,13 +231,6 @@
 }
 
 .stage-cell {
-  &.table-section {
-    @media (min-width: $screen-md-min) {
-      min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/
-      margin-right: -4px;
-    }
-  }
-
   .mini-pipeline-graph-dropdown-toggle svg {
     height: $ci-action-icon-size;
     width: $ci-action-icon-size;
@@ -643,34 +636,9 @@ button.mini-pipeline-graph-dropdown-toggle {
   height: $ci-action-icon-size;
   margin: 0;
   padding: 0;
-  transition: all 0.2s linear;
   position: relative;
   vertical-align: middle;
 
-  > .fa.fa-caret-down {
-    position: absolute;
-    left: 20px;
-    top: 5px;
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-    color: inherit;
-    font-size: 12px;
-    transition: visibility 0.1s, opacity 0.1s linear;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    width: 35px;
-
-    .fa.fa-caret-down {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
     @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
@@ -787,8 +755,6 @@ button.mini-pipeline-graph-dropdown-toggle {
           left: 8px;
         }
       }
-
-
     }
 
     // link to the build
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
index 901a177323b..65d95a0dec9 100644
--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -8,7 +8,6 @@
       .stage-container.dropdown{ class: klass }
         %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
           = sprite_icon(icon_status)
-          = icon('caret-down')
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
           %li.js-builds-dropdown-list.scrollable-menu
diff --git a/changelogs/unreleased/42769-remove-hover-animation.yml b/changelogs/unreleased/42769-remove-hover-animation.yml
new file mode 100644
index 00000000000..7af6c2a7425
--- /dev/null
+++ b/changelogs/unreleased/42769-remove-hover-animation.yml
@@ -0,0 +1,5 @@
+---
+title: Remove hover animation from mini pipeline graph
+merge_request:
+author:
+type: changed