diff --git a/build/less/AdminLTE-without-plugins.less b/build/less/AdminLTE-without-plugins.less
index 179e9b75b..65c9d8f8a 100644
--- a/build/less/AdminLTE-without-plugins.less
+++ b/build/less/AdminLTE-without-plugins.less
@@ -42,6 +42,7 @@
@import "carousel.less";
@import "modal.less";
@import "social-widgets.less";
+@import "treeview.less";
//PAGES
//------
@import "mailbox.less";
diff --git a/build/less/AdminLTE.less b/build/less/AdminLTE.less
index 44f4e4826..0da591aa2 100644
--- a/build/less/AdminLTE.less
+++ b/build/less/AdminLTE.less
@@ -42,6 +42,7 @@
@import "carousel.less";
@import "modal.less";
@import "social-widgets.less";
+@import "treeview.less";
//PAGES
//------
@import "mailbox.less";
diff --git a/build/less/control-sidebar.less b/build/less/control-sidebar.less
index dbc897551..de039dbcb 100644
--- a/build/less/control-sidebar.less
+++ b/build/less/control-sidebar.less
@@ -1,15 +1,15 @@
/*
* Component: Control sidebar. By default, this is the right sidebar.
*/
-//The sidebar's background control class
-//This is a hack to make the background visible while scrolling
+// The sidebar's background control class
+// This is a hack to make the background visible while scrolling
.control-sidebar-bg {
position: fixed;
z-index: 1000;
bottom: 0;
}
-//Transitions
+// Transitions
.control-sidebar-bg,
.control-sidebar {
top: 0;
@@ -18,20 +18,20 @@
.transition(right @transition-speed ease-in-out);
}
-//The sidebar
+// The sidebar
.control-sidebar {
position: absolute;
padding-top: @navbar-height;
z-index: 1010;
- //Fix position after header collapse
+ // Fix position after header collapse
@media (max-width: @screen-sm) {
padding-top: @navbar-height + 50;
}
- //Tab panes
+ // Tab panes
> .tab-content {
padding: 10px 15px;
}
- //Open state with slide over content effect
+ // Open state with slide over content effect
&.control-sidebar-open {
&,
+ .control-sidebar-bg {
@@ -40,7 +40,7 @@
}
}
-//Open without slide over content
+// Open without slide over content
.control-sidebar-open {
.control-sidebar-bg,
.control-sidebar {
@@ -55,7 +55,17 @@
}
}
-//Control sidebar tabs
+// Fixed Layout
+.fixed {
+ .control-sidebar {
+ position: fixed;
+ height: 100%;
+ overflow-y: auto;
+ padding-bottom: 50px;
+ }
+}
+
+// Control sidebar tabs
.nav-tabs.control-sidebar-tabs {
> li {
&:first-of-type > a {
@@ -68,7 +78,7 @@
> a {
.border-radius(0);
- //Hover and active states
+ // Hover and active states
&,
&:hover {
border-top: none;
@@ -80,7 +90,7 @@
font-size: 16px;
}
}
- //Active state
+ // Active state
&.active {
> a {
&,
@@ -94,7 +104,7 @@
}
}
}
- //Remove responsiveness on small screens
+ // Remove responsiveness on small screens
@media (max-width: @screen-sm) {
display: table;
> li {
@@ -103,7 +113,7 @@
}
}
-//Headings in the sidebar content
+// Headings in the sidebar content
.control-sidebar-heading {
font-weight: 400;
font-size: 16px;
@@ -111,14 +121,14 @@
margin-bottom: 10px;
}
-//Subheadings
+// Subheadings
.control-sidebar-subheading {
display: block;
font-weight: 400;
font-size: 14px;
}
-//Control Sidebar Menu
+// Control Sidebar Menu
.control-sidebar-menu {
list-style: none;
padding: 0;
@@ -155,22 +165,22 @@
}
}
-//Dark skin
+// Dark skin
.control-sidebar-dark {
color: @sidebar-dark-color;
- // Background
+ // Background
&,
+ .control-sidebar-bg {
background: @sidebar-dark-bg;
}
- // Sidebar tabs
+ // Sidebar tabs
.nav-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 and active states
&,
&:hover,
&:focus {
@@ -186,7 +196,7 @@
color: #fff;
}
}
- //Active state
+ // Active state
&.active {
> a {
&,
@@ -200,12 +210,12 @@
}
}
}
- //Heading & subheading
+ // Heading & subheading
.control-sidebar-heading,
.control-sidebar-subheading {
color: #fff;
}
- //Sidebar list
+ // Sidebar list
.control-sidebar-menu {
> li {
> a {
@@ -222,23 +232,23 @@
}
}
-//Light skin
+// Light skin
.control-sidebar-light {
color: lighten(@sidebar-light-color, 10%);
- // Background
+ // Background
&,
+ .control-sidebar-bg {
background: @sidebar-light-bg;
border-left: 1px solid @gray-lte;
}
- // Sidebar tabs
+ // Sidebar tabs
.nav-tabs.control-sidebar-tabs {
border-bottom: @gray-lte;
> li {
> a {
background: darken(@sidebar-light-bg, 5%);
color: @sidebar-light-color;
- //Hover and active states
+ // Hover and active states
&,
&:hover,
&:focus {
@@ -251,7 +261,7 @@
background: darken(@sidebar-light-bg, 3%);
}
}
- //Active state
+ // Active state
&.active {
> a {
&,
@@ -265,12 +275,12 @@
}
}
}
- //Heading & subheading
+ // Heading & subheading
.control-sidebar-heading,
.control-sidebar-subheading {
color: #111;
}
- //Sidebar list
+ // Sidebar list
.control-sidebar-menu {
margin-left: -14px;
> li {
diff --git a/build/less/core.less b/build/less/core.less
index f0cc2cb18..0a2a19e7c 100644
--- a/build/less/core.less
+++ b/build/less/core.less
@@ -44,26 +44,26 @@ body {
.content-wrapper,
.right-side,
.main-footer {
- //Using disposable variable to join statements with a comma
+ // Using disposable variable to join statements with a comma
@transition-rule: @transition-speed @transition-fn,
margin @transition-speed @transition-fn;
.transition-transform(@transition-rule);
margin-left: @sidebar-width;
z-index: 820;
- //Top nav layout
+ // Top nav layout
.layout-top-nav & {
margin-left: 0;
}
@media (max-width: @screen-xs-max) {
margin-left: 0;
}
- //When opening the sidebar on large screens
+ // When opening the sidebar on large screens
.sidebar-collapse & {
@media (min-width: @screen-sm) {
margin-left: 0;
}
}
- //When opening the sidebar on small screens
+ // When opening the sidebar on small screens
.sidebar-open & {
@media (max-width: @screen-xs-max) {
.translate(@sidebar-width, 0);
@@ -109,16 +109,20 @@ body {
max-width: 100%;
}
}
+ .wrapper {
+ overflow: hidden;
+ }
}
-body.hold-transition {
+.hold-transition {
.content-wrapper,
.right-side,
.main-footer,
.main-sidebar,
.left-side,
.main-header .navbar,
- .main-header .logo {
+ .main-header .logo,
+ .menu-open .fa-angle-left {
/* Fix for IE */
.transition(none);
}
diff --git a/build/less/mixins.less b/build/less/mixins.less
index 133f16c17..749bc55a6 100644
--- a/build/less/mixins.less
+++ b/build/less/mixins.less
@@ -74,22 +74,12 @@
}
//Different radius each side
-.border-radius(@top-left;
-@top-right
-;
-@bottom-left
-;
-@bottom-right
-)
+.border-radius(@top-left, @top-right, @bottom-left, @bottom-right)
{
- border-top-left-radius: @top-left
-;
- border-top-right-radius: @top-right
-;
- border-bottom-right-radius: @bottom-right
-;
- border-bottom-left-radius: @bottom-left
-;
+ border-top-left-radius: @top-left;
+ border-top-right-radius: @top-right;
+ border-bottom-right-radius: @bottom-right;
+ border-bottom-left-radius: @bottom-left;
}
//Gradient background
@@ -140,9 +130,13 @@
border-left: 3px solid transparent;
}
//Hover and active states
- &:hover > a, &.active > a {
+ &:hover > a,
+ &.active > a,
+ &.menu-open > a {
color: @sidebar-dark-hover-color;
background: @sidebar-dark-hover-bg;
+ }
+ &.active > a {
border-left-color: @link-hover-border-color;
}
//First Level Submenu
@@ -159,7 +153,7 @@
}
}
//All submenus
- .treeview-menu {
+ .sidebar-menu .treeview-menu {
> li {
> a {
color: @sidebar-dark-submenu-color;
@@ -211,7 +205,10 @@
}
.content-wrapper,
.main-footer {
- border-left: 1px solid @gray-lte;
+ //border-left: 1px solid @gray-lte;
+ }
+ .main-sidebar {
+ border-right: 1px solid @gray-lte;
}
//User Panel (resides in the sidebar)
.user-panel {
@@ -261,7 +258,7 @@
}
}
//All submenus
- .treeview-menu {
+ .sidebar-menu .treeview-menu {
> li {
> a {
color: @sidebar-light-submenu-color;
diff --git a/build/less/sidebar-mini.less b/build/less/sidebar-mini.less
index 94868fc15..8e25d77e3 100644
--- a/build/less/sidebar-mini.less
+++ b/build/less/sidebar-mini.less
@@ -42,49 +42,11 @@
}
> .treeview-menu {
- //Add some padding to the treeview menu
+ // Add some padding to the treeview menu
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
}
-
- //Show menu items on hover
- &:hover {
- > a {
- //overflow: visible;
- }
- > a > span:not(.pull-right),//:not(.pull-right-container),
- > .treeview-menu {
- display: block !important;
- position: absolute;
- width: @sidebar-width - 50;
- left: 50px;
- }
-
- //position the header & treeview menus
- > a > span {
- top: 0;
- margin-left: -3px;
- padding: 12px 5px 12px 20px;
- background-color: inherit;
- }
- > a > .pull-right-container {
- //display: block!important;
- position: relative!important;
- float: right;
- width: auto!important;
- left: 200px - 20px!important;
- top: -22px!important;
- z-index: 900;
- > .label:not(:first-of-type) {
- display: none;
- }
- }
- > .treeview-menu {
- top: 44px;
- margin-left: 0;
- }
- }
}
}
@@ -124,6 +86,56 @@
}
}
+// Show menu items on hover
+.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse {
+ .sidebar-menu > li:hover {
+ > a {
+ //overflow: visible;
+ }
+ > a > span:not(.pull-right), //:not(.pull-right-container),
+ > .treeview-menu {
+ display: block !important;
+ position: absolute;
+ width: @sidebar-width - 50;
+ left: 50px;
+ }
+
+ //position the header & treeview menus
+ > a > span {
+ top: 0;
+ margin-left: -3px;
+ padding: 12px 5px 12px 20px;
+ background-color: inherit;
+ }
+ > a > .pull-right-container {
+ //display: block!important;
+ position: relative !important;
+ float: right;
+ width: auto !important;
+ left: 200px - 20px !important;
+ top: -22px !important;
+ z-index: 900;
+ > .label:not(:first-of-type) {
+ display: none;
+ }
+ }
+ > .treeview-menu {
+ top: 44px;
+ margin-left: 0;
+ }
+ }
+}
+
+.sidebar-expanded-on-hover {
+ .main-footer,
+ .content-wrapper {
+ margin-left: 50px;
+ }
+ .main-sidebar {
+ box-shadow: @sidebar-expanded-shadow;
+ }
+}
+
//A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.main-sidebar .user-panel,
diff --git a/build/less/sidebar.less b/build/less/sidebar.less
index 9c669a64b..59d1cae4c 100644
--- a/build/less/sidebar.less
+++ b/build/less/sidebar.less
@@ -119,6 +119,7 @@
height: auto;
padding: 0;
margin-right: 10px;
+ .transition(transform .5s ease);
}
li > a > .fa-angle-left {
position: absolute;
@@ -126,44 +127,14 @@
right: 10px;
margin-top: -8px;
}
- li.active {
+
+ .menu-open {
> a > .fa-angle-left,
> a > .pull-right-container > .fa-angle-left {
.rotate(-90deg);
}
- > .treeview-menu {
- display: block;
- }
}
-
- // Tree view menu
- .treeview-menu {
- display: none;
- list-style: none;
- padding: 0;
- margin: 0;
- padding-left: 5px;
- .treeview-menu {
- padding-left: 20px;
- }
- > li {
- margin: 0;
- > a {
- padding: 5px 5px 5px 15px;
- display: block;
- font-size: 14px;
- > .fa,
- > .glyphicon,
- > .ion {
- width: 20px;
- }
- > .pull-right-container > .fa-angle-left,
- > .pull-right-container > .fa-angle-down,
- > .fa-angle-left,
- > .fa-angle-down {
- width: auto;
- }
- }
- }
+ .active > .treeview-menu {
+ display: block;
}
}
diff --git a/build/less/variables.less b/build/less/variables.less
index 94677f73b..d1cd45862 100644
--- a/build/less/variables.less
+++ b/build/less/variables.less
@@ -1,22 +1,22 @@
-//AdminLTE 2 Variables.less
-//=========================
+// AdminLTE 2 Variables.less
+// =========================
-//PATHS
-//--------------------------------------------------------
+// PATHS
+// --------------------------------------------------------
@boxed-layout-bg-image-path: "../img/boxed-bg.jpg";
-//COLORS
-//--------------------------------------------------------
-//Primary
+// COLORS
+// --------------------------------------------------------
+// Primary
@light-blue: #3c8dbc;
-//Danger
+// Danger
@red: #dd4b39;
-//Success
+// Success
@green: #00a65a;
-//Info
+// Info
@aqua: #00c0ef;
-//Warning
+// Warning
@yellow: #f39c12;
@blue: #0073b7;
@navy: #001F3F;
@@ -30,27 +30,27 @@
@black: #111;
@gray-lte: #d2d6de;
-//LAYOUT
-//--------------------------------------------------------
+// LAYOUT
+// --------------------------------------------------------
-//Side bar and logo width
+// Side bar and logo width
@sidebar-width: 230px;
-//Boxed layout maximum width
+// Boxed layout maximum width
@boxed-layout-max-width: 1024px;
-//When the logo should go to the top of the screen
+// When the logo should go to the top of the screen
@screen-header-collapse: @screen-xs-max;
-//Link colors (Aka: tags)
+// Link colors (Aka: tags)
@link-color: @light-blue;
@link-hover-color: lighten(@link-color, 15%);
-//Body background (Affects main content background only)
+// Body background (Affects main content background only)
@body-bg: #ecf0f5;
-//SIDEBAR SKINS
-//--------------------------------------------------------
+// SIDEBAR SKINS
+// --------------------------------------------------------
-//Dark sidebar
+// Dark sidebar
@sidebar-dark-bg: #222d32;
@sidebar-dark-hover-bg: darken(@sidebar-dark-bg, 2%);
@sidebar-dark-color: lighten(@sidebar-dark-bg, 60%);
@@ -59,7 +59,7 @@
@sidebar-dark-submenu-color: lighten(@sidebar-dark-submenu-bg, 40%);
@sidebar-dark-submenu-hover-color: #fff;
-//Light sidebar
+// Light sidebar
@sidebar-light-bg: #f9fafc;
@sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%);
@sidebar-light-color: #444;
@@ -68,55 +68,58 @@
@sidebar-light-submenu-color: #777;
@sidebar-light-submenu-hover-color: #000;
-//CONTROL SIDEBAR
-//--------------------------------------------------------
+// sidebar-expanded-on-hover
+@sidebar-expanded-shadow: 3px 0 8px rgba(0,0,0,.125);
+
+// CONTROL SIDEBAR
+// --------------------------------------------------------
@control-sidebar-width: @sidebar-width;
-//BOXES
-//--------------------------------------------------------
+// BOXES
+// --------------------------------------------------------
@box-border-color: #f4f4f4;
@box-border-radius: 3px;
@box-footer-bg: #fff;
@box-boxshadow: 0 1px 1px rgba(0, 0, 0, .1);
@box-padding: 10px;
-//Box variants
+// Box variants
@box-default-border-top-color: #d2d6de;
-//BUTTONS
-//--------------------------------------------------------
+// BUTTONS
+// --------------------------------------------------------
@btn-boxshadow: none;
-//PROGRESS BARS
-//--------------------------------------------------------
+// PROGRESS BARS
+// --------------------------------------------------------
@progress-bar-border-radius: 1px;
@progress-bar-sm-border-radius: 1px;
@progress-bar-xs-border-radius: 1px;
-//FORMS
-//--------------------------------------------------------
+// FORMS
+// --------------------------------------------------------
@input-radius: 0;
-//BUTTONS
-//--------------------------------------------------------
+// BUTTONS
+// --------------------------------------------------------
-//Border radius for non flat buttons
+// Border radius for non flat buttons
@btn-border-radius: 3px;
-//DIRECT CHAT
-//--------------------------------------------------------
+// DIRECT CHAT
+// --------------------------------------------------------
@direct-chat-height: 250px;
@direct-chat-default-msg-bg: @gray-lte;
@direct-chat-default-font-color: #444;
@direct-chat-default-msg-border-color: @gray-lte;
-//CHAT WIDGET
-//--------------------------------------------------------
+// CHAT WIDGET
+// --------------------------------------------------------
@attachment-border-radius: 3px;
-//TRANSITIONS SETTINGS
-//--------------------------------------------------------
+// TRANSITIONS SETTINGS
+// --------------------------------------------------------
-//Transition global options
+// Transition global options
@transition-speed: .3s;
@transition-fn: ease-in-out;