Created light sidebar and added new skin mixins

build/less/control-sidebar.less

@@ -68,7 +68,7 @@
 .content-wrapper,
 .right-side,
 .main-footer {
-  margin-right: @control-sidebar-width;
+  //margin-right: @control-sidebar-width;
   @media (max-width: @screen-sm) {
     margin-right: 0;
   }

build/less/mixins.less

@@ -1,6 +1,7 @@
 //AdminLTE mixins
 //===============
 
+
 //Changes the color and the hovering properties of the navbar
 .navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
   background-color: @color;
@@ -19,9 +20,6 @@
     color: @hover-color;
   }
 
-  .navbar-custom-menu > .nav {
-    margin-right: 10px;
-  }
   //Add color to the sidebar toggle button
   .sidebar-toggle {
     color: @font-color;
@@ -37,9 +35,6 @@
   background-color: @bg-color;
   color: @color;
   border-bottom: @border-bottom-width solid @border-bottom-color;
-  > a {
-    color: @color;
-  }
 
   &:hover {
     background: darken(@bg-color, 1%);
@@ -55,7 +50,7 @@
     background-color: @color;
     a,
     .btn {
-      color: @text-color;      
+      color: @text-color;
     }
   }
 }
@@ -63,11 +58,11 @@
 //Direct Chat Variant
 .direct-chat-variant(@bg-color; @color: #fff) {
   .right > .direct-chat-text {
-    background: @bg-color;    
+    background: @bg-color;
     border-color: @bg-color;
     color: @color;
     &:after,
-      &:before {      
+      &:before {
       border-left-color: @bg-color;
     }
   }
@@ -102,4 +97,210 @@
   background: -o-linear-gradient(@stop,
     @start);
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
+}
+
+//Added 2.1.0
+//Skins Mixins
+
+//Dark Sidebar Mixin
+.skin-dark-sidebar(@link-hover-border-color) {
+  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: @sidebar-dark-bg;
+  }
+  //User Panel (resides in the sidebar)
+  .user-panel {
+    > .info, > .info > a {
+      color: #fff;
+    }
+  }
+  //Sidebar Menu. First level links
+  .sidebar-menu > li {
+    //Section Headning
+    &.header {
+      color: lighten(@sidebar-dark-bg, 20%);
+      background: darken(@sidebar-dark-bg, 4%);
+    }
+    //links
+    > a {
+      border-left: 3px solid transparent;
+      margin-right: 1px;
+    }
+    //Hover and active states
+    &:hover > a, &.active > a {
+      color: @sidebar-dark-hover-color;
+      background: @sidebar-dark-hover-bg;
+      border-left-color: @link-hover-border-color;
+    }
+    //First Level Submenu
+    > .treeview-menu {
+      margin: 0 1px;
+      background: @sidebar-dark-submenu-bg;
+    }
+  }
+  //All links within the sidebar menu
+  .sidebar a {
+    color: @sidebar-dark-color;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  //All submenus
+  .treeview-menu {
+    > li {
+      > a {
+        color: @sidebar-dark-submenu-color;
+      }
+      &.active > a, > a:hover {
+        color: @sidebar-dark-submenu-hover-color;
+      }
+    }
+  }
+  //The sidebar search form
+  .sidebar-form {
+    .border-radius(3px);
+    border: 1px solid lighten(@sidebar-dark-bg, 10%);
+    margin: 10px 10px;
+    input[type="text"], .btn {
+      box-shadow: none;
+      background-color: lighten(@sidebar-dark-bg, 10%);
+      border: 1px solid transparent;
+      height: 35px;
+      .transition(all @transition-speed @transition-fn);
+    }
+    input[type="text"] {
+      color: #666;
+      .border-radius(2px, 0, 2px, 0) !important;
+      &:focus, &:focus + .input-group-btn .btn {
+        background-color: #fff;
+        color: #666;
+      }
+      &:focus + .input-group-btn .btn {
+        border-left-color: #fff;
+      }
+    }
+    .btn {
+      color: #999;
+      .border-radius(0, 2px, 0, 2px) !important;
+    }
+  }
+}
+
+//Light Sidebar Mixin
+.skin-light-sidebar(@icon-active-color) {
+  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: @sidebar-light-bg;
+  }
+  .content-wrapper,
+  .main-footer {
+    border-left: 1px solid @gray;
+  }
+  //User Panel (resides in the sidebar)
+  .user-panel {
+    > .info, > .info > a {
+      color: @sidebar-light-color;
+    }
+  }
+  //Sidebar Menu. First level links
+  .sidebar-menu > li {
+    .transition(border-left-color .3s ease);
+    //border-left: 3px solid transparent;
+    //Section Headning
+    &.header {
+      color: lighten(@sidebar-light-color, 25%);
+      background: @sidebar-light-bg;
+    }
+    //links
+    > a {
+      border-left: 3px solid transparent;  
+      font-weight: 600; 
+    }
+    //Hover and active states
+    &:hover > a,
+      &.active > a {
+      color: @sidebar-light-hover-color;
+      background: @sidebar-light-hover-bg;      
+    }
+    &:hover > a {
+
+    }
+    &.active {      
+      border-left-color: @icon-active-color;
+      > a {
+      font-weight: 600;      
+      }
+    }
+    //First Level Submenu
+    > .treeview-menu {
+      margin: 0;
+      background: @sidebar-light-submenu-bg;
+    }
+  }
+  //All links within the sidebar menu
+  .sidebar a {
+    color: @sidebar-light-color;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  //All submenus
+  .treeview-menu {
+    > li {
+      > a {
+        color: @sidebar-light-submenu-color;
+      }
+      &.active > a,
+      > a:hover {
+        color: @sidebar-light-submenu-hover-color;
+      }
+      &.active > a {
+        font-weight: 600;
+      }
+    }
+  }
+  //The sidebar search form
+  .sidebar-form {
+    .border-radius(3px);
+    border: 1px solid @gray;//darken(@sidebar-light-bg, 5%);
+    margin: 10px 10px;
+    input[type="text"],
+    .btn {
+      box-shadow: none;
+      background-color: #fff;//darken(@sidebar-light-bg, 3%);
+      border: 1px solid transparent;
+      height: 35px;
+      .transition(all @transition-speed @transition-fn);
+    }
+    input[type="text"] {
+      color: #666;
+      .border-radius(2px, 0, 2px, 0) !important;
+      &:focus,
+        &:focus + .input-group-btn .btn {
+        background-color: #fff;
+        color: #666;
+      }
+      &:focus + .input-group-btn .btn {
+        border-left-color: #fff;
+      }
+    }
+    .btn {
+      color: #999;
+      .border-radius(0, 2px, 0, 2px) !important;
+    }
+  }
+}
+
+//Navbar Skin Mixin
+.skin-main-header() {
+
+}
+
+//Logo Skin Mixin
+.skin-logo() {
+
 }

build/less/sidebar-mini.less

@@ -4,6 +4,7 @@
 
 //Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
+  min-height: 100%;
   //Sidebar mini should work only on devices larger than @screen-sm
   @media (min-width: @screen-sm) {
     //When the sidebar is collapsed...
@@ -120,6 +121,5 @@
         }
       }
     }
-
   }
 }

build/less/skins/_all-skins.less

@@ -1,7 +1,13 @@
 //All skins in one file
 @import "skin-blue.less";
+@import "skin-blue-light.less";
 @import "skin-black.less";
+@import "skin-black-light.less";
 @import "skin-green.less";
+@import "skin-green-light.less";
 @import "skin-red.less";
+@import "skin-red-light.less";
 @import "skin-yellow.less";
-@import "skin-purple.less";
+@import "skin-yellow-light.less";
+@import "skin-purple.less";
+@import "skin-purple-light.less";

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

@@ -0,0 +1,64 @@
+/*
+ * Skin: Black
+ * -----------
+ */
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+/* skin-black navbar */
+.skin-black-light {
+  //Navbar & Logo 
+  .main-header {
+    .box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
+    .navbar-toggle {
+      color: #333;
+    }
+    .navbar-brand {
+      color: #333;
+      border-right: 1px solid #eee;
+    }
+    > .navbar {
+      .navbar-variant(#fff; #333; #999; #fff);
+      > .sidebar-toggle {
+        color: #333;
+        border-right: 1px solid #eee;
+      }
+      .navbar-nav {
+        > li > a {
+          border-right: 1px solid #eee;
+        }
+      }
+      .navbar-custom-menu .navbar-nav,
+      .navbar-right {
+        > li {
+          > a {
+            border-left: 1px solid #eee;
+            border-right-width: 0;
+          }
+        }
+      }
+    }
+    > .logo {
+      .logo-variant(#fff; #333);
+      border-right: 1px solid #eee;
+      @media (max-width: @screen-header-collapse) {
+        .logo-variant(#222; #fff);
+        border-right: none;
+      }
+    }
+
+    li.user-header {
+      background-color: #222;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+    box-shadow: none;
+  }
+  //Create the sidebar skin
+  .skin-light-sidebar(#fff);    
+}

build/less/skins/skin-black.less

@@ -59,90 +59,6 @@
     background: transparent;
     box-shadow: none;
   }
-  //User Panel (resides in sidebar)
-  .user-panel {
-    > .image > img {
-      border: 1px solid #444;
-    }
-
-    > .info, > .info > a {
-      color: #eee;
-    }
-  }
-  //Sidebar & Treeview
-  // Sidebar color
-  .main-sidebar,
-  .left-side,
-  .wrapper {
-    background: #222;
-  }
-  // the menu
-  .sidebar > .sidebar-menu > li {
-    &.header {
-      background: darken(#222, 2%);
-      color: rgba(255, 255, 255, .4);
-    }
-    > a {
-      border-left: 3px solid transparent;
-    }
-    //Hover and active states
-    &:hover > a,
-    &.active > a {
-      color: #fff;
-      background: #444;
-      border-left-color: #fff;
-    }
-
-    > .treeview-menu {
-      background: #333;
-    }
-  }
-
-  .sidebar a {
-    color: #eee;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {
-        color: #ccc;
-      }
-      &.active > a,
-      > a:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  //Sidebar Search Form
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(#222, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(#222, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"] {
-      color: #666;
-      .border-radius(2px, 0, 2px, 0) !important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px) !important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(#fff);
 }

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

@@ -0,0 +1,61 @@
+/*
+ * Skin: Blue
+ * ----------
+ */
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-blue-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@light-blue; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@light-blue, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@light-blue, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@light-blue);
+    }
+
+    li.user-header {
+      background-color: @light-blue;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@light-blue);
+  .main-footer {
+    border-top-color: @gray;
+  }
+}
+
+.skin-blue.layout-top-nav .main-header > .logo {
+  .logo-variant(@light-blue);
+}

build/less/skins/skin-blue.less

@@ -36,7 +36,7 @@
     }
     //Logo
     .logo {
-      .logo-variant(darken(@light-blue, 5%));
+      .logo-variant(darken(@light-blue, 5%));      
     }
 
     li.user-header {
@@ -49,90 +49,8 @@
     background: transparent;
   }
 
-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    &:hover > a, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @light-blue;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {
-        color: @sidebar-dark-submenu-color;
-      }
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"] {
-      color: #666;
-      .border-radius(2px, 0, 2px, 0) !important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px) !important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@light-blue);
 }
 
 .skin-blue.layout-top-nav .main-header > .logo {

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

@@ -0,0 +1,56 @@
+/*
+ * Skin: Green
+ * -----------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-green-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@green; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@green, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@green, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(darken(@green, 5%));      
+    }
+    
+    li.user-header {
+      background-color: @green;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+  
+  //Create the sidebar skin
+  .skin-light-sidebar(@green);
+
+}

build/less/skins/skin-green.less

@@ -49,87 +49,8 @@
   .content-header {
     background: transparent;
   }
+  
+  //Create the sidebar skin
+  .skin-dark-sidebar(@green);
 
-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    &:hover > a, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @green;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
 }

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

@@ -0,0 +1,55 @@
+/*
+ * Skin: Purple
+ * ------------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-purple-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@purple; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@purple, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@purple, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(darken(@purple, 5%));      
+    }
+    
+    li.user-header {
+      background-color: @purple;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@purple);
+}

build/less/skins/skin-purple.less

@@ -50,86 +50,6 @@
     background: transparent;
   }
 
-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    &:hover > a, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @purple;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@purple);
 }

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

@@ -0,0 +1,55 @@
+/*
+ * Skin: Red
+ * ---------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-red-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@red; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@red, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@red, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(darken(@red, 5%));      
+    }
+    
+    li.user-header {
+      background-color: @red;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@red);
+}

build/less/skins/skin-red.less

@@ -50,86 +50,6 @@
     background: transparent;
   }
 
-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    &:hover > a, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @red;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@red);
 }

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

@@ -0,0 +1,55 @@
+/*
+ * Skin: Yellow
+ * ------------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-yellow-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@yellow; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@yellow, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@yellow, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(darken(@yellow, 5%));      
+    }
+    
+    li.user-header {
+      background-color: @yellow;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@yellow);
+}

build/less/skins/skin-yellow.less

@@ -50,86 +50,6 @@
     background: transparent;
   }
 
-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    &:hover > a, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @yellow;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@yellow);
 }

build/less/variables.less

@@ -36,21 +36,28 @@
 @link-hover-color: lighten(@link-color, 15%);
 
 //Body background (Affects main content background only)
-@body-bg: #ecf0f5;//darken(#f4f5f7, 4%);
+@body-bg: #ecf0f5;
 
 //SIDEBAR SKINS
 //--------------------------------------------------------
 
-//skin blue (light) sidebar vars
+//Dark sidebar
 @sidebar-dark-bg:                  #222d32;
 @sidebar-dark-hover-bg:            darken(@sidebar-dark-bg, 2%);
-@sidebar-dark-color:                lighten(@sidebar-dark-bg, 60%);
+@sidebar-dark-color:               lighten(@sidebar-dark-bg, 60%);
 @sidebar-dark-hover-color:         #fff;
-@sidebar-dark-border:              #dbdbdb;
 @sidebar-dark-submenu-bg:          lighten(@sidebar-dark-bg, 5%);
 @sidebar-dark-submenu-color:       lighten(@sidebar-dark-submenu-bg, 40%);
 @sidebar-dark-submenu-hover-color: #fff;
 
+//Light sidebar
+@sidebar-light-bg:                  #f9fafc;
+@sidebar-light-hover-bg:            lighten(#f0f0f1, 1.5%);//#f7f7f7;
+@sidebar-light-color:               #444;
+@sidebar-light-hover-color:         #000;
+@sidebar-light-submenu-bg:          @sidebar-light-hover-bg;
+@sidebar-light-submenu-color:       #777;
+@sidebar-light-submenu-hover-color: #000;
 
 //CONTROL SIDEBAR
 //--------------------------------------------------------

dist/css/AdminLTE.css

@@ -1,6 +1,6 @@
 @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
 /*!
- *   AdminLTE v2.0.5
+ *   AdminLTE v2.1.0
  *   Author: Almsaeed Studio
  *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
  *   License: Open source - MIT
@@ -217,7 +217,6 @@ a:focus {
 }
 .main-header .navbar-custom-menu,
 .main-header .navbar-right {
-  margin-right: 5px;
   float: right;
 }
 @media (max-width: 991px) {
@@ -552,6 +551,9 @@ a:focus {
 /*
  * Component: Sidebar Mini
  */
+.sidebar-mini {
+  min-height: 100%;
+}
 @media (min-width: 768px) {
   .sidebar-mini.sidebar-collapse .content-wrapper,
   .sidebar-mini.sidebar-collapse .right-side,
@@ -632,6 +634,72 @@ a:focus {
     margin-left: 50px;
   }
 }
+/*
+ * Component: Control sidebar. By deafult, this is the right sidebar.
+ */
+.control-sidebar {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  width: 230px;
+  z-index: 1010;
+  background: #222d32;
+  color: #b8c7ce;
+}
+@media (max-width: 768px) {
+  .control-sidebar {
+    -webkit-transform: translate(230px, 0);
+    -ms-transform: translate(230px, 0);
+    -o-transform: translate(230px, 0);
+    transform: translate(230px, 0);
+  }
+}
+.control-sidebar > .tab-content {
+  padding: 10px 15px;
+}
+.control-sidebar-tabs {
+  border-bottom: #1c2529;
+}
+.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-right: none;
+  border-left: 1px solid #141a1d !important;
+  border-bottom: 1px solid #141a1d !important;
+}
+.control-sidebar-tabs > li > a:hover,
+.control-sidebar-tabs > li > a:focus,
+.control-sidebar-tabs > li > a:active {
+  border-top: none;
+  background: #1c2529;
+}
+.control-sidebar-tabs > li > a .icon {
+  font-size: 16px;
+}
+.control-sidebar-tabs > li.active > a,
+.control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-tabs > li.active > a:active {
+  border-top: none!important;
+  border-right: none!important;
+  border-bottom: none!important;
+  background: #222d32;
+  color: #fff;
+}
+.control-sidebar-heading {
+  color: #fff;
+}
+@media (max-width: 768px) {
+  .content-wrapper,
+  .right-side,
+  .main-footer {
+    margin-right: 0;
+  }
+}
 /*
  * Component: Dropdown menus
  * -------------------------

dist/css/skins/skin-black.css

@@ -29,9 +29,6 @@
   background: #ffffff;
   color: #999999;
 }
-.skin-black .main-header > .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-black .main-header > .navbar .sidebar-toggle {
   color: #333333;
 }
@@ -57,9 +54,6 @@
   border-bottom: 0px solid transparent;
   border-right: 1px solid #eee;
 }
-.skin-black .main-header > .logo > a {
-  color: #333333;
-}
 .skin-black .main-header > .logo:hover {
   background: #fcfcfc;
 }
@@ -70,9 +64,6 @@
     border-bottom: 0px solid transparent;
     border-right: none;
   }
-  .skin-black .main-header > .logo > a {
-    color: #ffffff;
-  }
   .skin-black .main-header > .logo:hover {
     background: #1f1f1f;
   }
@@ -84,56 +75,55 @@
   background: transparent;
   box-shadow: none;
 }
-.skin-black .user-panel > .image > img {
-  border: 1px solid #444;
+.skin-black .wrapper,
+.skin-black .main-sidebar,
+.skin-black .left-side {
+  background-color: #222d32;
 }
 .skin-black .user-panel > .info,
 .skin-black .user-panel > .info > a {
-  color: #eee;
-}
-.skin-black .main-sidebar,
-.skin-black .left-side,
-.skin-black .wrapper {
-  background: #222;
+  color: #fff;
 }
-.skin-black .sidebar > .sidebar-menu > li.header {
-  background: #1d1d1d;
-  color: rgba(255, 255, 255, 0.4);
+.skin-black .sidebar-menu > li.header {
+  color: #4b646f;
+  background: #1a2226;
 }
-.skin-black .sidebar > .sidebar-menu > li > a {
+.skin-black .sidebar-menu > li > a {
   border-left: 3px solid transparent;
+  margin-right: 1px;
 }
-.skin-black .sidebar > .sidebar-menu > li:hover > a,
-.skin-black .sidebar > .sidebar-menu > li.active > a {
-  color: #fff;
-  background: #444;
-  border-left-color: #fff;
+.skin-black .sidebar-menu > li:hover > a,
+.skin-black .sidebar-menu > li.active > a {
+  color: #ffffff;
+  background: #1e282c;
+  border-left-color: #ffffff;
 }
-.skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
-  background: #333;
+.skin-black .sidebar-menu > li > .treeview-menu {
+  margin: 0 1px;
+  background: #2c3b41;
 }
 .skin-black .sidebar a {
-  color: #eee;
+  color: #b8c7ce;
 }
 .skin-black .sidebar a:hover {
   text-decoration: none;
 }
 .skin-black .treeview-menu > li > a {
-  color: #ccc;
+  color: #8aa4af;
 }
 .skin-black .treeview-menu > li.active > a,
 .skin-black .treeview-menu > li > a:hover {
-  color: #fff;
+  color: #ffffff;
 }
 .skin-black .sidebar-form {
   border-radius: 3px;
-  border: 1px solid #3c3c3c;
+  border: 1px solid #374850;
   margin: 10px 10px;
 }
 .skin-black .sidebar-form input[type="text"],
 .skin-black .sidebar-form .btn {
   box-shadow: none;
-  background-color: #3c3c3c;
+  background-color: #374850;
   border: 1px solid transparent;
   height: 35px;
   -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);

dist/css/skins/skin-blue.css

@@ -17,9 +17,6 @@
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6;
 }
-.skin-blue .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-blue .main-header .navbar .sidebar-toggle {
   color: #ffffff;
 }
@@ -49,9 +46,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-blue .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-blue .main-header .logo:hover {
   background: #357ca5;
 }
@@ -61,6 +55,11 @@
 .skin-blue .content-header {
   background: transparent;
 }
+.skin-blue .wrapper,
+.skin-blue .main-sidebar,
+.skin-blue .left-side {
+  background-color: #222d32;
+}
 .skin-blue .user-panel > .info,
 .skin-blue .user-panel > .info > a {
   color: #fff;
@@ -83,11 +82,6 @@
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-blue .wrapper,
-.skin-blue .main-sidebar,
-.skin-blue .left-side {
-  background: #222d32;
-}
 .skin-blue .sidebar a {
   color: #b8c7ce;
 }
@@ -143,9 +137,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-blue.layout-top-nav .main-header > .logo > a {
-  color: #ffffff;
-}
 .skin-blue.layout-top-nav .main-header > .logo:hover {
   background: #3b8ab8;
 }

dist/css/skins/skin-green.css

@@ -17,9 +17,6 @@
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6;
 }
-.skin-green .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-green .main-header .navbar .sidebar-toggle {
   color: #ffffff;
 }
@@ -49,9 +46,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-green .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-green .main-header .logo:hover {
   background: #008749;
 }
@@ -61,6 +55,11 @@
 .skin-green .content-header {
   background: transparent;
 }
+.skin-green .wrapper,
+.skin-green .main-sidebar,
+.skin-green .left-side {
+  background-color: #222d32;
+}
 .skin-green .user-panel > .info,
 .skin-green .user-panel > .info > a {
   color: #fff;
@@ -83,11 +82,6 @@
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-green .wrapper,
-.skin-green .main-sidebar,
-.skin-green .left-side {
-  background: #222d32;
-}
 .skin-green .sidebar a {
   color: #b8c7ce;
 }

dist/css/skins/skin-purple.css

@@ -17,9 +17,6 @@
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6;
 }
-.skin-purple .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-purple .main-header .navbar .sidebar-toggle {
   color: #ffffff;
 }
@@ -49,9 +46,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-purple .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-purple .main-header .logo:hover {
   background: #545096;
 }
@@ -61,6 +55,11 @@
 .skin-purple .content-header {
   background: transparent;
 }
+.skin-purple .wrapper,
+.skin-purple .main-sidebar,
+.skin-purple .left-side {
+  background-color: #222d32;
+}
 .skin-purple .user-panel > .info,
 .skin-purple .user-panel > .info > a {
   color: #fff;
@@ -83,11 +82,6 @@
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-purple .wrapper,
-.skin-purple .main-sidebar,
-.skin-purple .left-side {
-  background: #222d32;
-}
 .skin-purple .sidebar a {
   color: #b8c7ce;
 }

dist/css/skins/skin-red.css

@@ -17,9 +17,6 @@
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6;
 }
-.skin-red .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-red .main-header .navbar .sidebar-toggle {
   color: #ffffff;
 }
@@ -49,9 +46,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-red .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-red .main-header .logo:hover {
   background: #d33724;
 }
@@ -61,6 +55,11 @@
 .skin-red .content-header {
   background: transparent;
 }
+.skin-red .wrapper,
+.skin-red .main-sidebar,
+.skin-red .left-side {
+  background-color: #222d32;
+}
 .skin-red .user-panel > .info,
 .skin-red .user-panel > .info > a {
   color: #fff;
@@ -83,11 +82,6 @@
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-red .wrapper,
-.skin-red .main-sidebar,
-.skin-red .left-side {
-  background: #222d32;
-}
 .skin-red .sidebar a {
   color: #b8c7ce;
 }

dist/css/skins/skin-yellow.css

@@ -17,9 +17,6 @@
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6;
 }
-.skin-yellow .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-yellow .main-header .navbar .sidebar-toggle {
   color: #ffffff;
 }
@@ -49,9 +46,6 @@
   color: #ffffff;
   border-bottom: 0px solid transparent;
 }
-.skin-yellow .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-yellow .main-header .logo:hover {
   background: #db8b0b;
 }
@@ -61,6 +55,11 @@
 .skin-yellow .content-header {
   background: transparent;
 }
+.skin-yellow .wrapper,
+.skin-yellow .main-sidebar,
+.skin-yellow .left-side {
+  background-color: #222d32;
+}
 .skin-yellow .user-panel > .info,
 .skin-yellow .user-panel > .info > a {
   color: #fff;
@@ -83,11 +82,6 @@
   margin: 0 1px;
   background: #2c3b41;
 }
-.skin-yellow .wrapper,
-.skin-yellow .main-sidebar,
-.skin-yellow .left-side {
-  background: #222d32;
-}
 .skin-yellow .sidebar a {
   color: #b8c7ce;
 }

dist/js/app.js

@@ -7,7 +7,7 @@
  * @Author  Almsaeed Studio
  * @Support <http://www.almsaeedstudio.com>
  * @Email   <support@almsaeedstudio.com>
- * @version 2.0.5
+ * @version 2.1.0
  * @license MIT <http://opensource.org/licenses/MIT>
  */
 
@@ -347,6 +347,42 @@ function _init() {
       }
     });
   };
+  
+  /* ControlSidebar
+   * ==============
+   * Control the all of the control sidebar transitions
+   * 
+   * @type Object
+   * @usage $.Admin.controlSidebar.activate(options)
+   */
+  $.AdminLTE.controlSidebar = {
+    //Default settings
+    defaults: {
+      toggleBtnSelector: "[data-toggle='control-sidebar']",
+      selector: ".control-sidebar",
+      slide: false,
+      animationSpeed: 300
+    },
+    //Initiate the object
+    activate: function (options) {
+      var settings = $.extend({}, options, this.defaults);
+    },
+    //Close the control sidebar
+    close: function () {
+      
+    },
+    //Open the control sidebar
+    open: function () {
+      
+    },
+    //If the slide option is set, this
+    //function is used to open the sidebar
+    slideIn: function() {
+      
+    },
+    //The complement funtion to slideIn
+    slideOut: function () {}
+  };
 
   /* BoxWidget
    * =========

dist/js/demo.js

@@ -1,4 +1,17 @@
-var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green"];
+var my_skins = [
+  "skin-blue",
+  "skin-black",
+  "skin-red",
+  "skin-yellow",
+  "skin-purple",
+  "skin-green",
+  "skin-blue-light",
+  "skin-black-light",
+  "skin-red-light",
+  "skin-yellow-light",
+  "skin-purple-light",
+  "skin-green-light"
+];
 $(function () {
   /* For demo purposes */
   var demo = $("<div />").css({
@@ -159,4 +172,6 @@ function setup() {
   var tmp = get('skin');
   if (tmp && $.inArray(tmp, my_skins))
     change_skin(tmp);
+  
+  change_skin('skin-blue-light');
 }

documentation/build/include/layout.html

@@ -200,7 +200,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

documentation/index.html

@@ -407,7 +407,7 @@ AdminLTE/
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/buttons.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/general.html

@@ -323,7 +323,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/icons.html

@@ -341,7 +341,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/modals.html

@@ -309,7 +309,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/sliders.html

@@ -301,7 +301,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/UI/timeline.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/calendar.html

@@ -298,7 +298,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/charts/chartjs.html

@@ -187,7 +187,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/charts/flot.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/charts/inline.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/charts/morris.html

@@ -297,7 +297,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/examples/404.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/examples/500.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/examples/blank.html

@@ -191,7 +191,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/examples/invoice.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/forms/advanced.html

@@ -305,7 +305,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/forms/editors.html

@@ -297,7 +297,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/forms/general.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/layout/boxed.html

@@ -189,7 +189,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/layout/collapsed-sidebar.html

@@ -192,7 +192,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/layout/fixed.html

@@ -187,7 +187,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/mailbox/compose.html

@@ -194,7 +194,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/mailbox/mailbox.html

@@ -191,7 +191,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/mailbox/read-mail.html

@@ -191,7 +191,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/tables/data.html

@@ -297,7 +297,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/tables/simple.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>

pages/widgets.html

@@ -295,7 +295,7 @@
             <div class="input-group">
               <input type="text" name="q" class="form-control" placeholder="Search..."/>
               <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
               </span>
             </div>
           </form>