From a00ab59882eb04d286b8c3bceb8906451b376c07 Mon Sep 17 00:00:00 2001
From: Abdullah Almsaeed <almasaeed2010@gmail.com>
Date: Fri, 3 Apr 2015 11:57:46 -0400
Subject: [PATCH] Updated control sidebar to get rid of the need for javascript
 to keep up with its height

---
 build/less/control-sidebar.less         | 35 +++++++++++++++++++------
 build/less/core.less                    |  2 +-
 build/less/sidebar.less                 |  1 +
 build/less/skins/skin-purple-light.less |  2 +-
 build/less/skins/skin-red-light.less    |  2 +-
 build/less/skins/skin-yellow-light.less |  2 +-
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/build/less/control-sidebar.less b/build/less/control-sidebar.less
index dfa65d867..4ea10082d 100644
--- a/build/less/control-sidebar.less
+++ b/build/less/control-sidebar.less
@@ -1,34 +1,52 @@
 /*
  * Component: Control sidebar. By deafult, this is the right sidebar.
  */
+//The sidebar's backhround control class
+//This is a hack to make the background visible while scrolling
+.control-sidebar-bg {
+  position: fixed;
+  z-index: 900;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: @control-sidebar-width;
+  background: @sidebar-dark-bg;
+}
+
+//Transitions
+.control-sidebar-bg,
 .control-sidebar {
   .translate(@control-sidebar-width, 0);
   .transition-transform(@transition-speed ease-in-out);
+}
+.control-sidebar {
   position: absolute;
   top: @navbar-height;
   right: 0;
   width: @control-sidebar-width;
-  z-index: 1010;
-  background: @sidebar-dark-bg;
+  z-index: 1010;  
   color: @sidebar-dark-color;
-  //Make it hide in small screens
+  //Fix position after header collapse
   @media (max-width: @screen-sm) {
-    top: @navbar-height + 50;
-    //.translate(@control-sidebar-width, 0);
+    top: @navbar-height + 50;    
   }
   //Tab panes
   > .tab-content {
     padding: 10px 15px;
   }
-  //Open state
+  //Open state with slide over content effect
   &.control-sidebar-open {
-    .translate(0, 0);
+    &,
+    + .control-sidebar-bg {
+      .translate(0, 0);
+    }
   }
 }
 //Open without silde over content
 .control-sidebar-open {
+  .control-sidebar-bg,
   .control-sidebar {
-  .translate(0,0);
+    .translate(0,0);
   }
   .content-wrapper,
   .right-side,
@@ -37,6 +55,7 @@
   }
 }
 
+
 //Control sidebar tabs
 .control-sidebar-tabs {
   border-bottom: darken(@sidebar-dark-bg, 3%);
diff --git a/build/less/core.less b/build/less/core.less
index 7d02b012b..79e8e1f39 100644
--- a/build/less/core.less
+++ b/build/less/core.less
@@ -82,7 +82,7 @@ body {
   background: #fff;
   padding: 15px;
   color: #444;
-  border-top: 1px solid #eee;
+  border-top: 1px solid @gray;
 }
 
 /* Fixed layout */
diff --git a/build/less/sidebar.less b/build/less/sidebar.less
index 562568bc6..b171c6bea 100644
--- a/build/less/sidebar.less
+++ b/build/less/sidebar.less
@@ -50,6 +50,7 @@
   > .image > img {
     width: 45px;
     height: 45px;
+    max-width: 100%!important;
   }
   > .info {
     font-weight: 600;
diff --git a/build/less/skins/skin-purple-light.less b/build/less/skins/skin-purple-light.less
index adeaed42e..74bb59676 100644
--- a/build/less/skins/skin-purple-light.less
+++ b/build/less/skins/skin-purple-light.less
@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@purple);
+  .skin-light-sidebar(@purple);
 }
\ No newline at end of file
diff --git a/build/less/skins/skin-red-light.less b/build/less/skins/skin-red-light.less
index 23dd6e73d..f70306fc7 100644
--- a/build/less/skins/skin-red-light.less
+++ b/build/less/skins/skin-red-light.less
@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@red);
+  .skin-light-sidebar(@red);
 }
\ No newline at end of file
diff --git a/build/less/skins/skin-yellow-light.less b/build/less/skins/skin-yellow-light.less
index 96eb84734..df2b7d2c5 100644
--- a/build/less/skins/skin-yellow-light.less
+++ b/build/less/skins/skin-yellow-light.less
@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@yellow);
+  .skin-light-sidebar(@yellow);
 }
\ No newline at end of file