Fixes stylelint issues for builds.scss59896-builds-css

Replaces CSS with utility classes
Removes unused CSS

5 files changed, 18 insertions, 47 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 0670e2b06b9..7594edfac27 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -275,7 +275,7 @@ export default {
         <!-- job log -->
         <div
           v-if="hasTrace"
-          class="build-trace-container"
+          class="build-trace-container position-relative"
           :class="{ 'prepend-top-default': !job.archived }"
         >
           <log-top-bar
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 845699a90b5..a55dffbe488 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div
-    class="build-job"
+    class="build-job position-relative"
     :class="{
       retried: job.retried,
       active: isActive,
@@ -56,7 +56,11 @@ export default {
       data-boundary="viewport"
       class="js-job-link"
     >
-      <icon v-if="isActive" name="arrow-right" class="js-arrow-right icon-arrow-right" />
+      <icon
+        v-if="isActive"
+        name="arrow-right"
+        class="js-arrow-right icon-arrow-right position-absolute d-block"
+      />
 
       <ci-icon :status="job.status" />
 
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 52e14f954ee..607b2bd1c74 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -75,7 +75,11 @@ export default {
       <template v-if="isTraceSizeVisible">
         {{ jobLogSize }}
 
-        <gl-link v-if="rawPath" :href="rawPath" class="js-raw-link raw-link">
+        <gl-link
+          v-if="rawPath"
+          :href="rawPath"
+          class="js-raw-link text-plain text-underline prepend-left-5"
+        >
           {{ s__('Job|Complete Raw') }}
         </gl-link>
       </template>
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 997737b3e23..922f64d93fe 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -52,7 +52,7 @@ export default {
     </p>
 
     <template v-if="hasVariables">
-      <p class="trigger-variables-btn-container">
+      <p class="trigger-variables-btn-container d-flex">
         <span class="font-weight-bold">{{ __('Trigger variables:') }}</span>
 
         <gl-button
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 916f6cd3137..6fc742871e7 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -46,10 +46,6 @@
 }
 
 .build-page {
-  .build-trace-container {
-    position: relative;
-  }
-
   .build-trace {
     @include build-trace();
   }
@@ -104,18 +100,6 @@
       top: 0;
     }
 
-    .truncated-info {
-      .truncated-info-size {
-        margin: 0 5px;
-      }
-
-      .raw-link {
-        color: $gl-text-color;
-        margin-left: 5px;
-        text-decoration: underline;
-      }
-    }
-
     .controllers {
       @include build-controllers(15px, center, false, 0, inline, 0);
     }
@@ -142,12 +126,6 @@
   }
 }
 
-.with-performance-bar .build-page {
-  .top-bar.affix {
-    top: $header-height + $performance-bar-height;
-  }
-}
-
 .build-header {
   .ci-header-container,
   .header-action-buttons {
@@ -233,7 +211,6 @@
   }
 
   .trigger-variables-btn-container {
-    @extend .d-flex;
     justify-content: space-between;
     align-items: center;
 
@@ -277,12 +254,6 @@
   .retry-link {
     display: block;
 
-    .btn {
-      i {
-        margin-left: 5px;
-      }
-    }
-
     .btn-inverted-secondary {
       color: $blue-500;
 
@@ -329,16 +300,12 @@
       }
     }
 
-    .build-job {
-      position: relative;
-
-      .icon-arrow-right {
-        position: absolute;
-        left: 15px;
-        top: 20px;
-        display: block;
-      }
+    .icon-arrow-right {
+      left: 15px;
+      top: 20px;
+    }
 
+    .build-job {
       &.active {
         font-weight: $gl-font-weight-bold;
       }
@@ -350,10 +317,6 @@
       &:hover {
         background-color: $gray-darker;
       }
-
-      .icon-retry {
-        margin-left: 3px;
-      }
     }
   }