Refactor SCSS: fix SCSSLints, simplify specificity

1 files changed, 111 insertions, 108 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index b50971af4e6..23028ae01de 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/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,109 +45,109 @@
     }
   }
 
-  .scroll-controls {
-    height: 100%;
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
 
-    .scroll-step {
-      width: 31px;
-      margin: 0 0 0 auto;
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
     }
+  }
+}
 
-    .scroll-link.sticky,
-    .autoscroll-container {
-      right: 25px;
-      z-index: 1;
-    }
+.scroll-controls {
+  height: 100%;
 
-    .scroll-link {
-      display: block;
-      margin-bottom: 10px;
-      width: 16px;
-      height: 33px;
+  .scroll-step {
+    width: 31px;
+    margin: 0 0 0 auto;
+  }
 
-      &.scroll-top {
-        background-image: image-url('scroll_up');
+  .scroll-link.sticky,
+  .autoscroll-container {
+    right: 25px;
+    z-index: 1;
+  }
 
-        &:hover {
-          background-image: image-url('scroll_up_hover_active');
-        }
-      }
+  .scroll-link {
+    display: block;
+    margin-bottom: 10px;
+    width: 16px;
+    height: 33px;
 
-      &.scroll-bottom {
-        background-image: image-url('scroll_down');
+    &.scroll-top {
+      background-image: image-url('scroll_up');
 
-        &:hover {
-          background-image: image-url('scroll_down_hover_active');
-        }
+      &:hover {
+        background-image: image-url('scroll_up_hover_active');
       }
+    }
 
-      &.sticky {
-        position: fixed;
-
-        &.scroll-top {
-          top: 110px;
-        }
+    &.scroll-bottom {
+      background-image: image-url('scroll_down');
 
-        &.scroll-bottom {
-          bottom: -2px;
-        }
+      &:hover {
+        background-image: image-url('scroll_down_hover_active');
       }
     }
 
-    .autoscroll-container {
-      position: absolute;
-
-      .status-message {
-        display: inline-block;
-        color: $white-light;
+    &.sticky {
+      position: fixed;
 
-        i {
-          display: inline-block;
-          width: 16px;
-          height: 33px;
-          background-image: image-url('scroll_down_hover_active');
-        }
-
-        label {
-          float: left;
-          opacity: 0;
-          margin-right: 10px;
-          font-weight: normal;
-          line-height: 1.8;
-          transition: opacity 1s ease-out;
-
-          &.animate {
-            animation: fade-out-status 2s ease;
-          }
-        }
+      &.scroll-top {
+        top: 110px;
+      }
 
-        &:hover label {
-          opacity: 1;
-        }
+      &.scroll-bottom {
+        bottom: -2px;
       }
     }
+  }
 
-    &.sidebar-expanded {
+  .autoscroll-container {
+    position: absolute;
+  }
 
-      .scroll-link.sticky,
-      .autoscroll-container {
-        right: #{$gutter_width + ($gl-padding * 2)};
-      }
+  &.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;
+.status-message {
+  display: inline-block;
+  color: $white-light;
 
-    svg {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
+  .status-icon {
+    display: inline-block;
+    width: 16px;
+    height: 33px;
+    background-image: image-url('scroll_down_hover_active');
+  }
+
+  .status-text {
+    float: left;
+    opacity: 0;
+    margin-right: 10px;
+    font-weight: normal;
+    line-height: 1.8;
+    transition: opacity 1s ease-out;
+
+    &.animate {
+      animation: fade-out-status 2s ease;
     }
   }
+
+  &:hover .status-text {
+    opacity: 1;
+  }
 }
 
 .build-header {
@@ -179,37 +205,14 @@
     display: block;
   }
 
-  .typing_loader{
-      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);
-    }
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin-bottom: 12px;
+    margin-left: 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
   }
 }