Merge branch 'icons-ci-icons' into 'master'

Convert Icons in CI to SVG Sprite Icons

See merge request gitlab-org/gitlab-ce!14567

3 files changed, 61 insertions, 16 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 50ec5110bf1..e87ffe4f374 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -333,8 +333,10 @@
 
     svg {
       position: relative;
-      top: 2px;
+      top: 3px;
       margin-right: 3px;
+      width: 14px;
+      height: 14px;
     }
   }
 
@@ -348,9 +350,10 @@
 
     svg {
       position: relative;
-      top: 2px;
+      top: 3px;
       margin-right: 3px;
-      height: 13px;
+      height: 14px;
+      width: 14px;
     }
 
     a {
@@ -369,7 +372,7 @@
     .build-job {
       position: relative;
 
-      .fa-arrow-right {
+      .icon-arrow-right {
         position: absolute;
         left: 15px;
         top: 20px;
@@ -379,7 +382,7 @@
       &.active {
         font-weight: $gl-font-weight-bold;
 
-        .fa-arrow-right {
+        .icon-arrow-right {
           display: block;
         }
       }
@@ -392,8 +395,7 @@
         background-color: $row-hover;
       }
 
-      .fa-refresh {
-        font-size: 13px;
+      .icon-retry {
         margin-left: 3px;
       }
     }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d9fb3b44d29..645fc1f3ebb 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -165,8 +165,9 @@
       z-index: 300;
     }
 
-    .ci-action-icon-wrapper {
-      line-height: 16px;
+    .ci-action-icon-wrapper svg {
+      width: 16px;
+      height: 16px;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8fc7a5eec9b..3ed596c41ec 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -452,7 +452,7 @@
     }
 
     // Action Icons in big pipeline-graph nodes
-    .ci-action-icon-container .ci-action-icon-wrapper {
+    .ci-action-icon-container.ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
       background: $white-light;
@@ -468,8 +468,18 @@
       svg {
         fill: $gl-text-color-secondary;
         position: relative;
-        left: -1px;
-        top: -1px;
+        left: 5px;
+        top: 2px;
+        width: 18px;
+        height: 18px;
+      }
+
+      &.play {
+        svg {
+          width: #{$ci-action-icon-size - 8};
+          height: #{$ci-action-icon-size - 8};
+          left: 8px;
+        }
       }
 
       &:hover svg {
@@ -721,17 +731,49 @@ button.mini-pipeline-graph-dropdown-toggle {
 
       svg {
         fill: $gl-text-color-secondary;
-        width: $ci-action-icon-size;
-        height: $ci-action-icon-size;
-        left: -6px;
+        width: #{$ci-action-icon-size - 6};
+        height: #{$ci-action-icon-size - 6};
+        left: -3px;
         position: relative;
-        top: -3px;
+        top: -2px;
       }
 
       &:hover svg,
       &:focus svg {
         fill: $gl-text-color;
       }
+
+      &.icon-action-retry,
+      &.icon-action-play {
+        svg {
+          width: #{$ci-action-icon-size - 6};
+          height: #{$ci-action-icon-size - 6};
+          left: 8px;
+        }
+      }
+
+      svg.icon-action-stop,
+      svg.icon-action-cancel {
+        width: 12px;
+        height: 12px;
+        top: 1px;
+        left: -1px;
+      }
+
+      svg.icon-action-play {
+        width: 11px;
+        height: 11px;
+        top: 1px;
+        left: 1px;
+      }
+
+      svg.icon-action-retry {
+        width: 16px;
+        height: 16px;
+        top: 0;
+        left: -3px;
+      }
+
     }
 
     // link to the build