Fix lint issues

3 files changed, 34 insertions, 33 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index a5a234432..8ef42ad6a 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -50,6 +50,7 @@ $search-border: rgba(0, 0, 0, .25);
 $h-border-bottom: rgba(125, 134, 140, .2);
 $h1-border-bottom: $code-color;
 $main-box-shadow: rgba(0, 0, 0, .1);
+$secondary-box-shadow: rgba(0, 0, 0, .1);
 $white: #fff;
 $black: #333;
 
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 997ecb37f..48d93be3d 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -339,35 +339,6 @@ li {
   }
 }
 
-.scrolling-header {
-  background: $color-white;
-  border-bottom: 1px solid $color-gray-extra-light;
-  color: $black;
-  padding: 6px 60px !important;
-
-  @media all and (max-width: $mobile-width) {
-    padding: 10px !important;
-  }
-
-}
-
-.header-link {
-  color: $color-white;
-
-  @media all and (max-width: $mobile-width) {
-    font-size: .8em;
-  }
-
-}
-
-.scrolling-header-links {
-  color: $black !important;
-}
-
-.scrolling-header-links:hover {
-  color: $black !important;
-}
-
 // Styles for breadcrumbs navigation
 .breadcrumbs {
   white-space: nowrap;
@@ -501,7 +472,7 @@ li {
     }
 
     input:focus {
-      box-shadow: 0 10px 20px rgba(0,0,0,.2);
+      box-shadow: 0 10px 20px $secondary-box-shadow;
     }
 
   }
@@ -522,7 +493,35 @@ li {
     }
   }
 
-  .header {
+  .scrolling-header {
+    background: $color-white;
+    border-bottom: 1px solid $color-gray-extra-light;
+    padding: 6px 60px !important;
+
+    @media all and (max-width: $mobile-width) {
+      padding: 10px !important;
+    }
+
+  }
+
+  .header-link {
+    color: $color-white;
+
+    @media all and (max-width: $mobile-width) {
+      font-size: .8em;
+    }
+
+  }
+
+  .scrolling-header-links {
+    color: $black !important;
+  }
+
+  .scrolling-header-links:hover {
+    color: $black !important;
+  }
+
+  .landing-header-top {
     z-index: 1000;
     position: fixed;
     width: 100%;
@@ -648,6 +647,7 @@ li {
         top: 15px;
         right: 15px;
       }
+
     }
 
     // Override bootstrap
@@ -717,7 +717,7 @@ li {
       margin-left: 40px;
 
       @media all and (max-width: $mobile-width) {
-        margin-left: 0px;
+        margin-left: 0;
       }
 
     }
diff --git a/layouts/header.html b/layouts/header.html
index fd924a7f5..0cda89d43 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,4 +1,4 @@
-<div class="header" id="landing-header-bar">
+<div class="landing-header-top" id="landing-header-bar">
   <a class="header-link logo-container flex-container justify-center align-center" href="/">
     <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" class="logo" />
     <p>GitLab <strong>Docs</strong></p>