Refactor SCSS: fix SCSSLints, simplify specificity

app/assets/stylesheets/pages/builds.scss

@@ -3,6 +3,32 @@
   100% { opacity: 0; }
 }
 
+@keyframes blinking-dots {
+  0% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  25% {
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  75%{
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,1);
+  }
+
+  100% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+}
+
 .build-page {
   pre.trace {
     background: $builds-trace-bg;
@@ -19,7 +45,21 @@
     }
   }
 
-  .scroll-controls {
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
+
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.scroll-controls {
   height: 100%;
 
   .scroll-step {
@@ -70,19 +110,29 @@
 
   .autoscroll-container {
     position: absolute;
+  }
 
-      .status-message {
+  &.sidebar-expanded {
+
+    .scroll-link.sticky,
+    .autoscroll-container {
+      right: ($gutter_width + ($gl-padding * 2));
+    }
+  }
+}
+
+.status-message {
   display: inline-block;
   color: $white-light;
 
-        i {
+  .status-icon {
     display: inline-block;
     width: 16px;
     height: 33px;
     background-image: image-url('scroll_down_hover_active');
   }
 
-        label {
+  .status-text {
     float: left;
     opacity: 0;
     margin-right: 10px;
@@ -95,33 +145,9 @@
     }
   }
 
-        &:hover label {
+  &:hover .status-text {
     opacity: 1;
   }
-      }
-    }
-
-    &.sidebar-expanded {
-
-      .scroll-link.sticky,
-      .autoscroll-container {
-        right: #{$gutter_width + ($gl-padding * 2)};
-      }
-    }
-  }
-
-  .environment-information {
-    background-color: $gray-light;
-    border: 1px solid $border-color;
-    padding: 12px $gl-padding;
-    border-radius: $border-radius-default;
-
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
-    }
-  }
 }
 
 .build-header {
@@ -179,37 +205,14 @@
     display: block;
   }
 
-  .typing_loader{
+  .build-loader-animation {
+    position: relative;
     width: 6px;
     height: 6px;
-      border-radius: 50%;
-      animation: typing 1s linear infinite;
-      position: relative;
     margin-bottom: 12px;
     margin-left: 2px;
-  }
-
-  @keyframes typing{
-    0%{
-        background-color: rgba(255,255,255, 1);
-        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
-                    24px 0px 0px 0px rgba(255,255,255,0.2);
-    }
-    25%{
-        background-color: rgba(255,255,255, 0.4);
-        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
-                    24px 0px 0px 0px rgba(255,255,255,0.2);
-    }
-    75%{
-        background-color: rgba(255,255,255, 0.4);
-        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
-                    24px 0px 0px 0px rgba(255,255,255,1);
-    }
-    100%{
-        background-color: rgba(255,255,255, 1);
-        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
-                    24px 0px 0px 0px rgba(255,255,255,0.2);
-    }
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
   }
 }