Merge pull request #603 from Sinetheta/admin-colors

Recolor admin nav
solidusio · Jan 14, 2016 · f353e7e · f353e7e
2 parents b6e51d1 + ea22dff
commit f353e7e
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@
        for more information and instructions on upgrading.
     * [Solidus_auth_devise](https://github.com/solidusio/solidus_auth_devise)
       should be updated to '~> 1.3' to support the new menu.
+    * Added optional styles to the admin area to advance [admin rebrand](https://github.com/solidusio/solidus/issues/520).
+      To use the new colors, add `@import 'spree/backend/themes/blue_steel/globals/_variables_override';`
+      to your `spree/backend/globals/variables_override`.
 
 *   Removed deface requirement from core
 

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -1,3 +1,7 @@
+$padding-x-navbar: 26px;
+$padding-y-navbar: 13px;
+$padding-y-navbar-submenu: 9px;
+
 nav.menu {
   ul {
     list-style: none;
@@ -24,14 +28,12 @@ nav.menu {
 }
 
 .admin-nav {
-  border-right: 1px solid $color-sidebar-border;
+  border-right: $border-sidebar;
   background: $color-sidebar-bg;
   z-index: $z-index-navbar-flyout;
 }
 
 .admin-nav-menu {
-  text-transform: uppercase;
-
   ul {
     margin: 0;
     padding: 0;
@@ -41,9 +43,20 @@ nav.menu {
   li {
     background: $color-navbar-bg;
 
-    &:hover,
+    &:hover {
+      background: $color-navbar-active-bg;
+
+      > a {
+        color: $color-navbar-active;
+      }
+    }
+
     &.selected {
       background: $color-navbar-active-bg;
+
+      > a {
+        color: $color-navbar-active;
+      }
     }
 
     &.selected li {
@@ -64,24 +77,23 @@ nav.menu {
         left: 100%;
         width: $width-sidebar-flyout;
         margin-left: 0;
-        padding: 1em 0;
-        border: 1px solid $color-sidebar-border;
+        border: $border-sidebar;
         background: $color-navbar-submenu-bg;
         box-shadow: $box-shadow;
         @include caret($direction: left, $color-caret: $color-navbar-submenu-bg);
 
       &:before {
         z-index: 1;
-        top: 2em;
+        top: 1.5em;
       }
      }
     }
   }
 
   a {
     display: block;
-    padding: 1.5em 2em;
-    color: $color-navbar-text;
+    padding: $padding-y-navbar $padding-x-navbar;
+    color: $color-navbar;
     font-weight: normal;
   }
 
@@ -103,32 +115,48 @@ nav.menu {
   }
 
   .admin-subnav {
+    background: $color-navbar-submenu-bg;
+    @include padding($padding-y-navbar - $padding-y-navbar-submenu null);
+
     li {
       background: $color-navbar-submenu-bg;
     }
 
     a {
-      color: $color-navbar-bg;
-      @include padding(1em null);
+      color: $color-navbar-submenu;
+      @include padding($padding-y-navbar-submenu null);
 
       &:hover {
-        color: $color-navbar-active-bg;
+        color: $color-navbar-submenu-active;
       }
     }
 
     .selected {
       a {
-        color: $color-navbar-active-bg;
+        color: $color-navbar-submenu-active;
       }
     }
   }
 }
 
+.admin-nav-footer {
+  background-color: $color-navbar-footer-bg;
+
+  a {
+    color: $color-navbar-footer;
+
+    &:hover {
+      color: $color-navbar-footer-active;
+    }
+  }
+}
+
 .admin-nav.fits .admin-nav-footer {
   position: fixed;
   bottom: 0;
   width: $width-sidebar;
-  border-top: 1px solid $color-sidebar-border;
+  border-top: $border-sidebar;
+  border-right: $border-sidebar;
 }
 
 .admin-login-nav {

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -19,7 +19,7 @@ $color-6:                        #FF9300 !default;    // Yellow
 $color-7:                        #F4F4F4 !default;    // Light Gray
 
 // Basic accents for admin
-$box-shadow:                     0px 3px 3px -2px hsla(0, 0%, 0%, 0.2);
+$box-shadow:                     0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default;
 
 // Body base colors
 $color-body-bg:                  $color-1 !default;
@@ -34,11 +34,18 @@ $color-border:                   very-light($color-3, 12) !default;
 
 // Basic navigation colors
 $color-sidebar-bg:              $color-body-bg !default;
-$color-sidebar-border:          $color-border   !default;
+$color-sidebar-border:          $color-border !default;
+$color-navbar:                  $color-1 !default;
 $color-navbar-bg:               $color-3 !default;
+$color-navbar-active:           $color-1 !default;
 $color-navbar-active-bg:        $color-2 !default;
+$color-navbar-submenu:          $color-3 !default;
 $color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
-$color-navbar-text:             $color-1 !default;
+$color-navbar-submenu-active:   $color-2 !default;
+$color-navbar-submenu-active-bg: $color-navbar-submenu-bg !default;
+$color-navbar-footer:           $color-3 !default;
+$color-navbar-footer-bg:        $color-sidebar-bg !default;
+$color-navbar-footer-active:    $color-2 !default;
 
 // Basic flash colors
 $color-success:                  $color-2 !default;
@@ -194,4 +201,8 @@ $width-sidebar-flyout:           225px !default;
 
 // Stacking
 //--------------------------------------------------------------
-$z-index-navbar-flyout:          1000;
+$z-index-navbar-flyout:          1000 !default;
+
+// Sidebar
+//--------------------------------------------------------------
+$border-sidebar:                 1px solid $color-sidebar-border !default;
diff --git a/...d/app/assets/stylesheets/spree/backend/themes/blue_steel/globals/_variables_override.scss b/...d/app/assets/stylesheets/spree/backend/themes/blue_steel/globals/_variables_override.scss
@@ -0,0 +1,25 @@
+$cerulean:                       hsl(216, 57, 47);
+
+$white:                          hsl(220, 0, 100);
+$gray-light:                     hsl(220, 9, 71);
+$gray:                           hsl(220, 8, 23);
+$gray-dark:                      hsl(220, 12, 18);
+$black:                          hsl(220, 19, 13);
+
+$color-primary:                  $cerulean;
+
+$color-sidebar-bg:              $gray;
+$color-sidebar-border:          very-light(#5498DA, 12); // $color-border
+$color-navbar:                  $gray-light;
+$color-navbar-bg:               $gray;
+$color-navbar-active:           $white;
+$color-navbar-active-bg:        $color-primary;
+$color-navbar-submenu:          tint($gray-light, 40%);
+$color-navbar-submenu-bg:       $gray-dark;
+$color-navbar-submenu-active:   tint($color-primary, 20%);
+$color-navbar-footer:           $color-navbar;
+$color-navbar-footer-active:    $color-navbar-active;
+
+// Sidebar
+//--------------------------------------------------------------
+$border-sidebar:                 none;