Move all hex colors in SASS to variables and all variations to darken/lighten

1 files changed, 14 insertions, 14 deletions

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 6e4234d13..8d01ac4c4 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  background: #1a1c23;
+  background: darken($color1, 2%);
   overflow-y: scroll;
 
   .sidebar {
@@ -10,7 +10,7 @@
     position: fixed;
     left: 0;
     height: 100%;
-    background: #282c37;
+    background: $color1;
 
     .logo {
       display: block;
@@ -25,7 +25,7 @@
       a {
         display: block;
         padding: 15px 25px;
-        color: rgba(255, 255, 255, 0.7);
+        color: rgba($color5, 0.7);
         text-decoration: none;
         transition: all 200ms linear;
 
@@ -34,17 +34,17 @@
         }
 
         &:hover {
-          color: #fff;
-          background-color: darken(#282c37, 5%);
+          color: $color5;
+          background-color: darken($color1, 5%);
           transition: all 100ms linear;
         }
 
         &.selected {
-          color: #fff;
-          background-color: #2b90d9;
+          color: $color5;
+          background-color: $color4;
 
           &:hover {
-            background-color: lighten(#2b90d9, 5%);
+            background-color: lighten($color4, 5%);
           }
         }
       }
@@ -84,21 +84,21 @@
 
     a {
       display: inline-block;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgba($color5, 0.7);
       text-decoration: none;
       text-transform: uppercase;
       font-size: 12px;
       font-weight: 500;
-      border-bottom: 2px solid #282c37;
+      border-bottom: 2px solid $color1;
 
       &:hover {
-        color: #fff;
-        border-bottom: 2px solid lighten(#282c37, 5%);
+        color: $color5;
+        border-bottom: 2px solid lighten($color1, 5%);
       }
 
       &.selected {
-        color: #2b90d9;
-        border-bottom: 2px solid #2b90d9;
+        color: $color4;
+        border-bottom: 2px solid $color4;
       }
     }
   }