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

5 files changed, 93 insertions, 77 deletions

diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 88b391ef2df..226bd2ead31 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/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;
-  }
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 105c3fc3e7c..33d3a800e7c 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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;
     }
   }
 }
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 7f42fde0fea..0c2f45c6035 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/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
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 030cd8ef78f..4d009871f0d 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/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'
diff --git a/changelogs/unreleased/19703-direct-link-pipelines.yml b/changelogs/unreleased/19703-direct-link-pipelines.yml
new file mode 100644
index 00000000000..d846ad41e0f
--- /dev/null
+++ b/changelogs/unreleased/19703-direct-link-pipelines.yml
@@ -0,0 +1,4 @@
+---
+title: Adds Direct link from pipeline list to builds
+merge_request: 8097
+author: