Seperate treeview plugin and fix control sidebar for the fixed layout

pull/1498/head
Abdullah Almsaeed 2017-02-25 14:52:04 -05:00
parent a7d49bd656
commit 3c672fe9aa
8 changed files with 169 additions and 170 deletions

View File

@ -42,6 +42,7 @@
@import "carousel.less";
@import "modal.less";
@import "social-widgets.less";
@import "treeview.less";
//PAGES
//------
@import "mailbox.less";

View File

@ -42,6 +42,7 @@
@import "carousel.less";
@import "modal.less";
@import "social-widgets.less";
@import "treeview.less";
//PAGES
//------
@import "mailbox.less";

View File

@ -55,6 +55,16 @@
}
}
// Fixed Layout
.fixed {
.control-sidebar {
position: fixed;
height: 100%;
overflow-y: auto;
padding-bottom: 50px;
}
}
// Control sidebar tabs
.nav-tabs.control-sidebar-tabs {
> li {

View File

@ -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);
}

View File

@ -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;

View File

@ -47,44 +47,6 @@
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,

View File

@ -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 {
}
.active > .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;
}
}
}
}
}

View File

@ -68,6 +68,9 @@
@sidebar-light-submenu-color: #777;
@sidebar-light-submenu-hover-color: #000;
// sidebar-expanded-on-hover
@sidebar-expanded-shadow: 3px 0 8px rgba(0,0,0,.125);
// CONTROL SIDEBAR
// --------------------------------------------------------
@control-sidebar-width: @sidebar-width;