Remove variables from sidebar CSS

2 files changed, 20 insertions, 22 deletions

diff --git a/app/assets/stylesheets/framework/contextual-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss
index ff667a1f927..fa5d3833f3e 100644
--- a/app/assets/stylesheets/framework/contextual-sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual-sidebar.scss
@@ -1,13 +1,3 @@
-$active-background: rgba(0, 0, 0, .04);
-$active-hover-background: $active-background;
-$active-hover-color: $gl-text-color;
-$inactive-badge-background: rgba(0, 0, 0, .08);
-$hover-background: rgba(0, 0, 0, .06);
-$hover-color: $gl-text-color;
-$inactive-color: $gl-text-color-secondary;
-$contextual-sidebar-width: 220px;
-$contextual-sidebar-collapsed-width: 50px;
-
 .page-with-contextual-sidebar {
   @media (min-width: $screen-md-min) {
     padding-left: $contextual-sidebar-collapsed-width;
@@ -48,12 +38,12 @@ $contextual-sidebar-collapsed-width: 50px;
 
   &:hover,
   a:hover {
-    background-color: $hover-background;
-    color: $hover-color;
+    background-color: $link-hover-background;
+    color: $gl-text-color;
 
     .settings-avatar {
       svg {
-        fill: $hover-color;
+        fill: $gl-text-color;
       }
     }
   }
@@ -145,11 +135,11 @@ $contextual-sidebar-collapsed-width: 50px;
       display: flex;
       align-items: center;
       padding: 12px 16px;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     svg {
-      fill: $inactive-color;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -206,8 +196,8 @@ $contextual-sidebar-collapsed-width: 50px;
 
       &:hover,
       &:focus {
-        background: $active-hover-background;
-        color: $active-hover-color;
+        background: $link-active-background;
+        color: $gl-text-color;
       }
     }
 
@@ -216,7 +206,7 @@ $contextual-sidebar-collapsed-width: 50px;
         &,
         &:hover,
         &:focus {
-          background: $active-background;
+          background: $link-active-background;
         }
       }
     }
@@ -304,11 +294,11 @@ $contextual-sidebar-collapsed-width: 50px;
 
     .badge {
       background-color: $inactive-badge-background;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     &.active {
-      background: $active-background;
+      background: $link-active-background;
 
       > a {
         margin-left: 4px;
@@ -326,7 +316,7 @@ $contextual-sidebar-collapsed-width: 50px;
 
     &.active > a:hover,
     &.is-over > a {
-      background-color: $hover-background;
+      background-color: $link-hover-background;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d5ca23ff870..8ab48e4844f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -9,6 +9,8 @@ $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: .15s;
 $right-sidebar-transition-duration: .3s;
+$contextual-sidebar-width: 220px;
+$contextual-sidebar-collapsed-width: 50px;
 
 /*
  * Color schema
@@ -359,6 +361,13 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
 $dropdown-hover-color: $blue-400;
 
 /*
+* Contextual Sidebar
+*/
+$link-active-background: rgba(0, 0, 0, .04);
+$link-hover-background: rgba(0, 0, 0, .06);
+$inactive-badge-background: rgba(0, 0, 0, .08);
+
+/*
 * Buttons
 */
 $btn-active-gray: #ececec;
@@ -404,7 +413,6 @@ $note-targe3-inside: #ffffd3;
 $note-line2-border: #ddd;
 $note-icon-gutter-width: 55px;
 
-
 /*
 * Zen
 */