Replace relative positioning with margin for pipeline actions41224-cancel-icons-in-pipeline-dropdowns-are-misaligned

1 files changed, 5 insertions, 14 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9805fc4f882..d54c90ae482 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -492,9 +492,6 @@
 
         svg {
           fill: $gl-text-color-secondary;
-          position: relative;
-          left: 5px;
-          top: 2px;
           width: 18px;
           height: 18px;
         }
@@ -728,7 +725,7 @@ button.mini-pipeline-graph-dropdown-toggle {
       border: 1px solid $border-color;
       width: $ci-action-icon-size;
       height: $ci-action-icon-size;
-      padding: 2px 0 0 5px;
+      padding: 2px;
       font-size: 12px;
       background-color: $white-light;
       position: absolute;
@@ -746,30 +743,24 @@ button.mini-pipeline-graph-dropdown-toggle {
         fill: $gl-text-color-secondary;
         width: #{$ci-action-icon-size - 6};
         height: #{$ci-action-icon-size - 6};
-        left: -3px;
-        position: relative;
-        top: -2px;
+        margin: 5px;
 
         &.icon-action-stop,
         &.icon-action-cancel {
           width: 12px;
           height: 12px;
-          top: 1px;
-          left: -1px;
+          margin: 2px;
         }
 
         &.icon-action-play {
           width: 11px;
           height: 11px;
-          top: 1px;
-          left: 1px;
+          margin: 2.5px 4px;
         }
 
         &.icon-action-retry {
           width: 16px;
           height: 16px;
-          top: 0;
-          left: -3px;
         }
       }
 
@@ -783,7 +774,7 @@ button.mini-pipeline-graph-dropdown-toggle {
         svg {
           width: #{$ci-action-icon-size - 6};
           height: #{$ci-action-icon-size - 6};
-          left: 8px;
+          margin: 7px 8.5px;
         }
       }