CSS - Adds background color.

Removes unused CSS

Fix scss linter errors

Adds changelog entry

Increase icons size.
Adds transition animation

Fix jumping icon.
Reduce icon size

Fix columns width

Changes after review

Fix transition

app/assets/stylesheets/framework/icons.scss

@@ -4,10 +4,6 @@
   svg {
     fill: $gl-success;
   }
-
-  .builds-dropdown-caret {
-    color: $gl-success;
-  }
 }
 
 .ci-status-icon-failed {
@@ -16,10 +12,6 @@
   svg {
     fill: $gl-danger;
   }
-
-  .builds-dropdown-caret {
-    color: $gl-danger;
-  }
 }
 
 .ci-status-icon-pending,
@@ -29,10 +21,6 @@
   svg {
     fill: $gl-warning;
   }
-
-  .builds-dropdown-caret {
-    color: $gl-warning;
-  }
 }
 
 .ci-status-icon-running {
@@ -41,10 +29,6 @@
   svg {
     fill: $blue-normal;
   }
-
-  .builds-dropdown-caret {
-    color: $blue-normal;
-  }
 }
 
 .ci-status-icon-canceled,
@@ -55,10 +39,6 @@
   svg {
     fill: $gl-gray;
   }
-
-  .builds-dropdown-caret {
-    color: $gl-gray;
-  }
 }
 
 .ci-status-icon-created,
@@ -68,8 +48,4 @@
   svg {
     fill: $gray-darkest;
   }
-
-  .builds-dropdown-caret {
-    color: $gray-darkest;
-  }
 }

app/assets/stylesheets/pages/pipelines.scss

@@ -28,12 +28,16 @@
       color: $black;
     }
 
-    .branch-commit {
-      width: 30%;
+    .pipeline-date,
+    .pipeline-status {
+      width: 10%;
+    }
 
-      .branch-name {
-        max-width: 195px;
-      }
+    .pipeline-info,
+    .pipeline-commit,
+    .pipeline-actions,
+    .pipeline-stages {
+      width: 20%;
     }
   }
 }
@@ -107,7 +111,7 @@
 
     .branch-name {
       font-weight: bold;
-      max-width: 150px;
+      max-width: 120px;
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
@@ -133,7 +137,7 @@
 
     .commit-title {
       margin-top: 4px;
-      max-width: 300px;
+      max-width: 225px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -580,15 +584,6 @@
   }
 }
 
-<<<<<<< HEAD
-  .dropdown-menu-toggle {
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    color: $gl-text-color-light;
-    white-space: normal;
-    overflow: visible;
-=======
 .dropdown-counter-badge {
   float: right;
   color: $border-color;
@@ -596,7 +591,6 @@
   font-size: 15px;
   margin-right: 2px;
 }
->>>>>>> 5ba6f0d... Dropdown with arrow
 
 .grouped-pipeline-dropdown {
   padding: 0;
@@ -707,7 +701,9 @@
     padding: 0;
     font-size: 11px;
     float: right;
-    margin-top: 5px;
+    margin-top: 4px;
+    display: inline-block;
+    position: relative;
 
     i {
       font-size: 11px;
@@ -726,7 +722,7 @@
       width: 25px;
       height: 25px;
 
-      &:before{
+      &::before {
         top: 1px;
         left: 1px;
       }
@@ -782,11 +778,11 @@
       border-style: solid;
       top: -6px;
       left: 2px;
-      border-width: 0 5px 6px 5px;
+      border-width: 0 5px 6px;
     }
 
     &::before {
-      border-width: 0 5px 5px 5px;
+      border-width: 0 5px 5px;
       border-bottom-color: $border-color;
     }
 
@@ -797,53 +793,93 @@
   }
 }
 
+/**
+ * Icons in mini pipeline graph
+ */
 .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;
+  display: inline-block;
+  border: 1px solid;
+  border-radius: 20px;
+  margin-right: 1px;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  z-index: 2;
+  transition: all 0.2s cubic-bezier(0.25, 0, 1, 1);
 
-    svg {
-      top: -1px;
-      position: relative;
-    }
+  svg {
+    top: -1px;
+  }
 }
 
 .builds-dropdown {
   &:focus {
-    margin-right: -6px;
+    outline: none;
+    margin-right: -8px;
 
     .ci-status-icon {
-      width: 27px;
-      padding: 0px 6px 0px 0px;
+      width: 28px;
+      padding: 0 8px 0 0;
+      transition: all 0.2s cubic-bezier(0.25, 0, 1, 1);
 
       + .dropdown-caret {
-          display: inline-block;
+        display: inline-block;
       }
     }
   }
 
+  &:focus,
+  &:active {
+    .ci-status-icon-success {
+      background-color: rgba($gl-success, .1);
+    }
+
+    .ci-status-icon-failed {
+      background-color: rgba($gl-danger, .1);
+    }
+
+    .ci-status-icon-pending,
+    .ci-status-icon-success_with_warnings {
+      background-color: rgba($gl-warning, .1);
+    }
+
+    .ci-status-icon-running {
+      background-color: rgba($blue-normal, .1);
+    }
+
+    .ci-status-icon-canceled,
+    .ci-status-icon-disabled,
+    .ci-status-icon-not-found {
+      background-color: rgba($gl-gray, .1);
+    }
+
+    .ci-status-icon-created,
+    .ci-status-icon-skipped {
+      background-color: rgba($gray-darkest, .1);
+    }
+
+  }
+
   .mini-pipeline-graph-icon-container {
     .ci-status-icon:hover,
     .ci-status-icon:focus {
-      width: 27px;
-      padding: 0px 6px 0px 0px;
+      width: 28px;
+      padding: 0 8px 0 0;
+      transition: all 0.2s cubic-bezier(0.25, 0, 1, 1);
 
       + .dropdown-caret {
-          display: inline-block;
+        display: inline-block;
       }
     }
 
     .dropdown-caret {
-      font-size: 12px;
+      font-size: 11px;
       position: relative;
       top: 3px;
       left: -11px;
       margin-right: -6px;
       display: none;
+      z-index: 2;
     }
   }
 }

app/views/projects/commit/_pipelines_list.haml

@@ -5,11 +5,11 @@
   - else
     .table-holder
       %table.table.ci-table
-        %tbody
-          %th Status
-          %th Pipeline
-          %th Commit
-          %th Stages
-          %th
-          %th
+        %thead
+          %th.pipeline-status Status
+          %th.pipeline-info Pipeline
+          %th.pipeline-commit Commit
+          %th.pipeline-stages Stages
+          %th.pipeline-date
+          %th.pipeline-actions
         = render pipelines, commit_sha: true, stage: true, allow_retry: true, show_commit: false

app/views/projects/pipelines/index.html.haml

@@ -44,12 +44,12 @@
       .table-holder
         %table.table.ci-table
           %thead
-            %th Status
-            %th Pipeline
-            %th Commit
-            %th Stages
-            %th
-            %th.hidden-xs
+            %th.pipeline-status Status
+            %th.pipeline-info Pipeline
+            %th.pipeline-commit Commit
+            %th.pipeline-stages Stages
+            %th.pipeline-date
+            %th.pipeline-actions.hidden-xs
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true
 
       = paginate @pipelines, theme: 'gitlab'

changelogs/unreleased/19703-direct-link-pipelines.yml

+---
+title: Adds Direct link from pipeline list to builds
+merge_request: 8097
+author: