Updated control sidebar to get rid of the need for javascript to keep up with its height

build/less/control-sidebar.less

@@ -1,32 +1,50 @@
 /*
  * 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;
   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);
   }
   //Tab panes
   > .tab-content {
     padding: 10px 15px;
   }
-  //Open state
+  //Open state with slide over content effect
   &.control-sidebar-open {
+    &,
+    + .control-sidebar-bg {
       .translate(0, 0);
     }
+  }
 }
 //Open without silde over content
 .control-sidebar-open {
+  .control-sidebar-bg,
   .control-sidebar {
     .translate(0,0);
   }
@@ -37,6 +55,7 @@
   }
 }
 
+
 //Control sidebar tabs
 .control-sidebar-tabs {
   border-bottom: darken(@sidebar-dark-bg, 3%);

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 */

build/less/sidebar.less

@@ -50,6 +50,7 @@
   > .image > img {
     width: 45px;
     height: 45px;
+    max-width: 100%!important;
   }
   > .info {
     font-weight: 600;

build/less/skins/skin-purple-light.less

@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@purple);
+  .skin-light-sidebar(@purple);
 }

build/less/skins/skin-red-light.less

@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@red);
+  .skin-light-sidebar(@red);
 }

build/less/skins/skin-yellow-light.less

@@ -51,5 +51,5 @@
   }
 
   //Create the sidebar skin
-  .skin-dark-sidebar(@yellow);
+  .skin-light-sidebar(@yellow);
 }