CSS: dropdown on hover

3 files changed, 58 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index f98bf73756f..105c3fc3e7c 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -22,6 +22,7 @@
 
   .table.ci-table {
     min-width: 1200px;
+    table-layout: fixed;
 
     .pipeline-id {
       color: $black;
@@ -795,3 +796,54 @@
     }
   }
 }
+
+.mini-pipeline-graph-icon-container .ci-status-icon {
+    display: inline-block;
+    border: 1px solid;
+    border-radius: 20px;
+    margin-right: 1px;
+    width: 20px;
+    height: 20px;
+    position: relative;
+
+    svg {
+      top: -1px;
+      position: relative;
+    }
+}
+
+.builds-dropdown {
+  &:focus {
+    margin-right: -6px;
+
+    .ci-status-icon {
+      width: 27px;
+      padding: 0px 6px 0px 0px;
+
+      + .dropdown-caret {
+          display: inline-block;
+      }
+    }
+  }
+
+  .mini-pipeline-graph-icon-container {
+    .ci-status-icon:hover,
+    .ci-status-icon:focus {
+      width: 27px;
+      padding: 0px 6px 0px 0px;
+
+      + .dropdown-caret {
+          display: inline-block;
+      }
+    }
+
+    .dropdown-caret {
+      font-size: 12px;
+      position: relative;
+      top: 3px;
+      left: -11px;
+      margin-right: -6px;
+      display: none;
+    }
+  }
+}
diff --git a/app/views/ci/status/_mini_graph_badge.html.haml b/app/views/ci/status/_mini_graph_badge.html.haml
index 6031339a802..34e07e75ae8 100644
--- a/app/views/ci/status/_mini_graph_badge.html.haml
+++ b/app/views/ci/status/_mini_graph_badge.html.haml
@@ -2,5 +2,4 @@
 - icon = "#{status.icon}_borderless"
 - klass = "ci-status-icon ci-status-icon-#{status}"
 
-%span.mini-pipeline-graph-icon-container
-  %span{ class: klass }= custom_icon(icon)
+%span{ class: klass }= custom_icon(icon)
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index d664d925df9..0651447f616 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -54,8 +54,9 @@
             .dropdown.inline.build-content
               %button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
                 %span{ class: klass }
-                  = render 'ci/status/mini_graph_badge', subject: stage
-                %span= icon('caret-down', class: 'dropdown-caret')
+                  %span.mini-pipeline-graph-icon-container
+                    = render 'ci/status/mini_graph_badge', subject: stage
+                    = icon('caret-down', class: 'dropdown-caret')
               .dropdown-menu.grouped-pipeline-dropdown
                 .arrow-up
                   %ul
@@ -65,7 +66,8 @@
           - else
             - if details_path
               = link_to details_path, class: klass, title: tooltip do
-                = render 'ci/status/mini_graph_badge', subject: stage
+                %span.mini-pipeline-graph-icon-container
+                  = render 'ci/status/mini_graph_badge', subject: stage
 
   %td
     - if pipeline.duration