Added final changes from handover

app/assets/stylesheets/framework/variables.scss

@@ -17,8 +17,10 @@ $white-normal: #ededed;
 $white-dark: #ececec;
 
 $gray-light: #fafafa;
+$gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
 $gray-dark: #ededed;
+$gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
@@ -33,6 +35,8 @@ $blue-medium-light: #3498cb;
 $blue-medium: #2f8ebf;
 $blue-medium-dark: #2d86b4;
 
+$blue-light-transparent: rgba(44, 159, 216, 0.05);
+
 $orange-light: #fc8a51;
 $orange-normal: #e75e40;
 $orange-dark: #ce5237;
@@ -91,6 +95,7 @@ $table-text-gray:       #8f8f8f;
 $gl-font-size:         15px;
 $gl-title-color:       #333;
 $gl-text-color:        #5c5c5c;
+$gl-text-color-light:  #8c8c8c;
 $gl-text-green:        #4a2;
 $gl-text-red:          #d12f19;
 $gl-text-orange:       #d90;

app/assets/stylesheets/pages/pipelines.scss

@@ -342,11 +342,18 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 8px 10px;
+    padding: 7px 10px 8px;
     border-radius: 30px;
     width: 186px;
     margin-bottom: 10px;
 
+    &:hover {
+      background-color: $gray-lighter;
+      .dropdown-menu-toggle {
+        background-color: transparent;
+      }
+    }
+
     &.playable {
       background-color: $gray-light;
 
@@ -366,7 +373,6 @@
       width: 164px;
 
       .ci-status-icon {
-
         svg {
           height: 20px;
           width: 20px;
@@ -385,41 +391,40 @@
       }
 
       a {
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
         text-decoration: none;
-
-        &:hover {
-          .ci-status-text {
-            text-decoration: underline;
-          }
-        }
       }
 
       .dropdown-menu-toggle {
         border: none;
         width: auto;
         padding: 0;
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
 
         .ci-status-text {
-          width: 112px;
+          max-width: 112px;
+          width: auto;
         }
       }
 
       .grouped-pipeline-dropdown {
         padding: 8px 0;
-        width: 168px;
+        width: 186px;
         left: auto;
-        right: -180px;
+        right: -197px;
         top: -9px;
         max-height: 245px;
         overflow-y: scroll;
 
         a {
-          padding: 7px 8px;
+          color: $gl-text-color;
+          padding: 7px 8px 8px;
           margin: 0 8px;
 
           &:hover {
+            background-color: $blue-light-transparent;
+            border-radius: 3px;
+
             .ci-status-text {
               text-decoration: none;
             }
@@ -465,9 +470,10 @@
       }
 
       .badge {
-        background-color: $gray-dark;
-        color: $layout-link-gray;
+        background-color: $gray-darker;
+        color: $gl-text-color-light;
         font-weight: normal;
+        margin-left: $btn-xs-side-margin;
       }
     }
 

app/views/projects/commit/_pipeline_stage.html.haml

@@ -10,5 +10,5 @@
   - else
     %li.build
       .curve
-      .build-content
+      .dropdown.inline.build-content{ type: 'button', data: { toggle: 'dropdown' } }
         = render "projects/commit/pipeline_status_group", name: group_name, subject: grouped_statuses

app/views/projects/commit/_pipeline_status_group.html.haml

 - group_status = CommitStatus.where(id: subject).status
 %span.ci-status-icon
   = render_status_with_link('build', group_status)
-.dropdown.inline
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+%button.dropdown-menu-toggle
   %span.ci-status-text
     = name
   %span.badge= subject.size
-  %ul.dropdown-menu.grouped-pipeline-dropdown
+%ul.dropdown-menu.grouped-pipeline-dropdown
   .arrow
   - subject.each do |status|
     = render "projects/#{status.to_partial_path}_pipeline", subject: status