Created light skin for control sidebar

build/less/control-sidebar.less

@@ -10,25 +10,23 @@
   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);
 }
+//The sidebar
 .control-sidebar {
   position: absolute;
   top: @navbar-height;
   right: 0;
   width: @control-sidebar-width;
-  z-index: 1010;  
+  z-index: 1010;
-  color: @sidebar-dark-color;
   //Fix position after header collapse
   @media (max-width: @screen-sm) {
-    top: @navbar-height + 50;    
+    top: @navbar-height + 50;
   }
   //Tab panes
   > .tab-content {
@@ -56,28 +54,25 @@
     }
   }
 }
-
-
 //Control sidebar tabs
 .control-sidebar-tabs {
-  border-bottom: darken(@sidebar-dark-bg, 3%);
   > li {
+    &:first-of-type > a {
+      margin-left: 1px;
+      &,
+      &:hover {
+        border-left-width: 0!important;
+      }      
+    }
     > a {
       .border-radius(0)!important;
-      background: darken(@sidebar-dark-bg, 5%);
-      color: @sidebar-dark-color;
       //Hover and active states
       &,
       &:hover {
         border-top: none;
         border-right: none;
-        border-left: 1px solid darken(@sidebar-dark-bg, 7%)!important;
+        border-left: 1px solid transparent!important;
-        border-bottom: 1px solid darken(@sidebar-dark-bg, 7%)!important;
+        border-bottom: 1px solid transparent!important;
-      }
-      &:hover,
-        &:focus,
-        &:active {
-        background: darken(@sidebar-dark-bg, 3%);
       }
       .icon {
         font-size: 16px;
@@ -93,8 +88,6 @@
           border-top: none!important;
           border-right: none!important;
           border-bottom: none!important;
-          background: @sidebar-dark-bg;
-          color: #fff;
         }
       }
     }
@@ -108,8 +101,7 @@
   }
 }
 //Headings in the sidebar content
-.control-sidebar-heading {
+.control-sidebar-heading {  
-  color: #fff;
   font-weight: 400;
   font-size: 16px;
   padding: 10px 0;
@@ -118,7 +110,6 @@
 //Subheadings
 .control-sidebar-subheading {
   display: block;
-  color: #fff;
   font-weight: 400;
   font-size: 14px;
 }
@@ -130,10 +121,7 @@
   > li > a {
     .clearfix();
     display: block;
-    padding: 10px 15px;
+    padding: 10px 15px;    
-    &:hover {
-      background: @sidebar-dark-hover-bg;
-    }
     > .control-sidebar-subheading {
       margin-top: 0;
     }
@@ -153,12 +141,135 @@
       margin: 0;
     }
     > p {
-      margin: 0;
+      margin: 0;      
-      color: @sidebar-dark-color;
       font-size: 11px;
     }
-  }  
+  }
   .progress {
     margin: 0;
   }
+}
+//Dark skin
+.control-sidebar-dark {
+  color: @sidebar-dark-color;
+  // Background
+  + .control-sidebar-bg {
+    background: @sidebar-dark-bg;
+  }
+  // Sidebar tabs
+  .control-sidebar-tabs {
+    border-bottom: darken(@sidebar-dark-bg, 3%);
+    > li {
+      > a {
+        background: darken(@sidebar-dark-bg, 5%);
+        color: @sidebar-dark-color;
+        //Hover and active states
+        &,
+        &:hover {
+          border-left-color: darken(@sidebar-dark-bg, 7%)!important;
+          border-bottom-color: darken(@sidebar-dark-bg, 7%)!important;
+        }
+        &:hover,
+          &:focus,
+          &:active {
+          background: darken(@sidebar-dark-bg, 3%);
+        }
+      }
+      //Active state
+      &.active {
+        > a {
+          &,
+          &:hover,
+            &:focus,
+            &:active {
+            background: @sidebar-dark-bg;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  //Heading & subheading
+  .control-sidebar-heading,
+  .control-sidebar-subheading {
+    color: #fff;
+  }
+  //Sidebar list
+  .control-sidebar-menu {
+    > li {
+      > a {
+        &:hover {
+          background: @sidebar-dark-hover-bg;
+        }
+        .menu-info {
+          > p {
+            color: @sidebar-dark-color;
+          }
+        }
+      }
+    }
+  }
+}
+//Light skin
+.control-sidebar-light {
+  color: lighten(@sidebar-light-color, 10%);
+  // Background
+  + .control-sidebar-bg {
+    background: @sidebar-light-bg;
+    border-left: 1px solid @gray;
+  }
+  // Sidebar tabs
+  .control-sidebar-tabs {
+    border-bottom: @gray;
+    > li {
+      > a {
+        background: darken(@sidebar-light-bg, 5%);
+        color: @sidebar-light-color;
+        //Hover and active states
+        &,
+        &:hover {
+          border-left-color: @gray!important;
+          border-bottom-color: @gray!important;
+        }
+        &:hover,
+          &:focus,
+          &:active {
+          background: darken(@sidebar-light-bg, 3%);
+        }
+      }
+      //Active state
+      &.active {
+        > a {
+          &,
+          &:hover,
+            &:focus,
+            &:active {
+            background: @sidebar-light-bg;
+            color: #111;
+          }
+        }
+      }
+    }
+  }
+  //Heading & subheading
+  .control-sidebar-heading,
+  .control-sidebar-subheading {
+    color: #111;
+  }
+  //Sidebar list
+  .control-sidebar-menu {
+    margin-left: -14px;
+    > li {
+      > a {
+        &:hover {
+          background: @sidebar-light-hover-bg;
+        }
+        .menu-info {
+          > p {
+            color: lighten(@sidebar-light-color, 10%);
+          }
+        }
+      }
+    }
+  }
 }

dist/css/AdminLTE.css

@@ -672,7 +672,6 @@ a:focus {
   right: 0;
   bottom: 0;
   width: 230px;
-  background: #222d32;
 }
 .control-sidebar-bg,
 .control-sidebar {
@@ -691,7 +690,6 @@ a:focus {
   right: 0;
   width: 230px;
   z-index: 1010;
-  color: #b8c7ce;
 }
 @media (max-width: 768px) {
   .control-sidebar {
@@ -722,25 +720,22 @@ a:focus {
     margin-right: 230px;
   }
 }
-.control-sidebar-tabs {
+.control-sidebar-tabs > li:first-of-type > a {
-  border-bottom: #1c2529;
+  margin-left: 1px;
+}
+.control-sidebar-tabs > li:first-of-type > a,
+.control-sidebar-tabs > li:first-of-type > a:hover {
+  border-left-width: 0!important;
 }
 .control-sidebar-tabs > li > a {
   border-radius: 0 !important;
-  background: #181f23;
-  color: #b8c7ce;
 }
 .control-sidebar-tabs > li > a,
 .control-sidebar-tabs > li > a:hover {
   border-top: none;
   border-right: none;
-  border-left: 1px solid #141a1d !important;
+  border-left: 1px solid transparent!important;
-  border-bottom: 1px solid #141a1d !important;
+  border-bottom: 1px solid transparent!important;
-}
-.control-sidebar-tabs > li > a:hover,
-.control-sidebar-tabs > li > a:focus,
-.control-sidebar-tabs > li > a:active {
-  background: #1c2529;
 }
 .control-sidebar-tabs > li > a .icon {
   font-size: 16px;
@@ -752,8 +747,6 @@ a:focus {
   border-top: none!important;
   border-right: none!important;
   border-bottom: none!important;
-  background: #222d32;
-  color: #fff;
 }
 @media (max-width: 768px) {
   .control-sidebar-tabs {
@@ -764,7 +757,6 @@ a:focus {
   }
 }
 .control-sidebar-heading {
-  color: #fff;
   font-weight: 400;
   font-size: 16px;
   padding: 10px 0;
@@ -772,7 +764,6 @@ a:focus {
 }
 .control-sidebar-subheading {
   display: block;
-  color: #fff;
   font-weight: 400;
   font-size: 14px;
 }
@@ -793,9 +784,6 @@ a:focus {
 .control-sidebar-menu > li > a:after {
   clear: both;
 }
-.control-sidebar-menu > li > a:hover {
-  background: #1e282c;
-}
 .control-sidebar-menu > li > a > .control-sidebar-subheading {
   margin-top: 0;
 }
@@ -816,12 +804,95 @@ a:focus {
 }
 .control-sidebar-menu .menu-info > p {
   margin: 0;
-  color: #b8c7ce;
   font-size: 11px;
 }
 .control-sidebar-menu .progress {
   margin: 0;
 }
+.control-sidebar-dark {
+  color: #b8c7ce;
+}
+.control-sidebar-dark + .control-sidebar-bg {
+  background: #222d32;
+}
+.control-sidebar-dark .control-sidebar-tabs {
+  border-bottom: #1c2529;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a {
+  background: #181f23;
+  color: #b8c7ce;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a,
+.control-sidebar-dark .control-sidebar-tabs > li > a:hover {
+  border-left-color: #141a1d !important;
+  border-bottom-color: #141a1d !important;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a:hover,
+.control-sidebar-dark .control-sidebar-tabs > li > a:focus,
+.control-sidebar-dark .control-sidebar-tabs > li > a:active {
+  background: #1c2529;
+}
+.control-sidebar-dark .control-sidebar-tabs > li.active > a,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:active {
+  background: #222d32;
+  color: #fff;
+}
+.control-sidebar-dark .control-sidebar-heading,
+.control-sidebar-dark .control-sidebar-subheading {
+  color: #fff;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a:hover {
+  background: #1e282c;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
+  color: #b8c7ce;
+}
+.control-sidebar-light {
+  color: #5e5e5e;
+}
+.control-sidebar-light + .control-sidebar-bg {
+  background: #f9fafc;
+  border-left: 1px solid #d2d6de;
+}
+.control-sidebar-light .control-sidebar-tabs {
+  border-bottom: #d2d6de;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a {
+  background: #e8ecf4;
+  color: #444444;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a,
+.control-sidebar-light .control-sidebar-tabs > li > a:hover {
+  border-left-color: #d2d6de !important;
+  border-bottom-color: #d2d6de !important;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a:hover,
+.control-sidebar-light .control-sidebar-tabs > li > a:focus,
+.control-sidebar-light .control-sidebar-tabs > li > a:active {
+  background: #eff1f7;
+}
+.control-sidebar-light .control-sidebar-tabs > li.active > a,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:active {
+  background: #f9fafc;
+  color: #111;
+}
+.control-sidebar-light .control-sidebar-heading,
+.control-sidebar-light .control-sidebar-subheading {
+  color: #111;
+}
+.control-sidebar-light .control-sidebar-menu {
+  margin-left: -14px;
+}
+.control-sidebar-light .control-sidebar-menu > li > a:hover {
+  background: #f4f4f5;
+}
+.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
+  color: #5e5e5e;
+}
 /*
  * Component: Dropdown menus
  * -------------------------