803 lines
21 KiB
Plaintext
803 lines
21 KiB
Plaintext
/* ==============================================
|
|
LEFT SIDEBAR
|
|
A. Sidebar Default/Open State
|
|
B. Sidebar Active Item Borders
|
|
C. Sidebar Misc Elements
|
|
D. Sidebar Widgets/Menus
|
|
E. Sidebar Minified State
|
|
F. Sidebar Default Color Settings
|
|
G. Sidebar Light Color Settings
|
|
H. Sidebar Nano Plugin Settings
|
|
I. Sidebar Responsive Settings
|
|
=================================================
|
|
A. Default Open State
|
|
================================================= */
|
|
|
|
/* Sidebar Container */
|
|
#sidebar_left {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: @sidebar-open-width;
|
|
min-height: 100%;
|
|
padding-top: 60px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
/* Sidebar Content Container */
|
|
.sidebar-left-content { height: 100%; }
|
|
|
|
/* Sidebar-Menu */
|
|
.sidebar-menu { padding-bottom: 20px; }
|
|
|
|
/* Sidebar-Menu Top Level Items */
|
|
.sidebar-menu > li { margin: 0; }
|
|
.sidebar-menu > li:first-child { padding-top: 4px; }
|
|
|
|
/* Sidebar Menu Links */
|
|
.sidebar-menu > li a {}
|
|
|
|
/* Sidebar-Menu Top Level Links */
|
|
.sidebar-menu > li > a {
|
|
padding: 0;
|
|
line-height: @sidebar-item-spacing;
|
|
height: @sidebar-item-spacing;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Icon */
|
|
.sidebar-menu > li > a > span:nth-child(1) {
|
|
float: left;
|
|
top: 0;
|
|
line-height: @sidebar-item-spacing;
|
|
width: 38px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
padding-left: 13px;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Title */
|
|
.sidebar-menu > li > a > span:nth-child(2) {
|
|
font-weight: 600;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Tray(holds labels,etc) */
|
|
.sidebar-menu li > a > .sidebar-title-tray {
|
|
position: absolute;
|
|
right: 13px;
|
|
top: -2px;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Label */
|
|
.sidebar-menu li > a > .sidebar-title-tray .label {
|
|
padding: .0em .4em .2em;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Caret */
|
|
.sidebar-menu li > a > span.caret {
|
|
position: absolute;
|
|
top: 45%;
|
|
right: 13px;
|
|
border-top: 5px solid;
|
|
border-right: 5px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
}
|
|
/* Open Menu Item Caret - we simply flip the carets border */
|
|
.sidebar-menu li > a.menu-open > span.caret {
|
|
border-top: 0;
|
|
border-bottom: 5px solid;
|
|
}
|
|
|
|
/* Sidebar-Menu Sub Level */
|
|
.sidebar-menu > li > ul {
|
|
clear: both;
|
|
display: none;
|
|
width: @sidebar-open-width;
|
|
height: auto;
|
|
}
|
|
.sidebar-menu li > a.menu-open + ul { display: block; }
|
|
|
|
/* Sidebar-Menu Sub Level Items */
|
|
.sidebar-menu > li > ul > li > a {
|
|
padding: 11px 20px 11px 30px;
|
|
}
|
|
|
|
/* Sidebar-Menu Sub Level - first and last items */
|
|
.sidebar-menu > li > ul > li:first-child > a { padding-top: 14px; }
|
|
.sidebar-menu > li > ul > li:last-child > a { padding-bottom: 17px; }
|
|
|
|
/* Sidebar-Menu Sub Level Item - Title */
|
|
.sidebar-menu > li > ul > li > a > span:nth-child(1) {
|
|
margin-right: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Sidebar-Menu Sub Level Item - Label */
|
|
.sidebar-menu > li > ul > li > a > span.label {
|
|
float: right;
|
|
line-height: 17px;
|
|
}
|
|
|
|
/* Sidebar-Menu Multi-level (submenu inside a submenu and so on) */
|
|
.sidebar-menu > li > ul > li ul {
|
|
clear: both;
|
|
display: none;
|
|
width: @sidebar-open-width;
|
|
height: auto;
|
|
}
|
|
|
|
/* Sidebar-Menu Multi-level - Links */
|
|
.sidebar-menu > li > ul > li > ul li a { padding: 9px 12px 9px 30px; }
|
|
.sidebar-menu > li > ul > li > ul li:last-child a { padding-bottom: 13px; }
|
|
|
|
/* Sidebar-Menu Multi-level - Label(xs) */
|
|
.sidebar-menu > li > ul > li > ul li a .label.label-xs {
|
|
float: right;
|
|
line-height: 17px;
|
|
}
|
|
|
|
|
|
/*===============================================
|
|
B. Sidebar-Menu Active Item Borders
|
|
================================================= */
|
|
|
|
/* Top Level - Active Item Border */
|
|
.sidebar-menu > li > a.menu-open:after,
|
|
.sidebar-menu > li.active > a:after,
|
|
.sidebar-menu > li:hover > a:after,
|
|
.sidebar-menu > li:focus > a:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 3px;
|
|
background: #AAA;
|
|
}
|
|
|
|
/* Sub Level - Active Item Border */
|
|
.sidebar-menu > li > ul > li > a.menu-open:after,
|
|
.sidebar-menu > li > ul > li.active > a:after,
|
|
.sidebar-menu > li > ul > li:hover > a:after,
|
|
.sidebar-menu > li > ul > li:focus > a:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 3px;
|
|
background: #AAA;
|
|
}
|
|
|
|
/* Multi Level - Active Item Border */
|
|
.sidebar-menu > li > ul > li > ul > li.active > a:after,
|
|
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
|
|
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 5%;
|
|
height: 90%;
|
|
width: 3px;
|
|
background: #999;
|
|
}
|
|
|
|
|
|
/*===============================================
|
|
C. Sidebar Misc
|
|
================================================= */
|
|
|
|
/* Sidebar labels */
|
|
.sidebar-menu .sidebar-label {
|
|
text-transform: uppercase;
|
|
color: #70829a;
|
|
font-weight: 600;
|
|
padding-left: 18px;
|
|
padding-bottom: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Sidebar Project Links */
|
|
.sidebar-menu .sidebar-proj {}
|
|
|
|
/* Sidebar Progress Bars */
|
|
.sidebar-menu .sidebar-stat .progress {
|
|
clear: both;
|
|
background-color: #AAA;
|
|
background-color: rgba(0,0,0,0.15);
|
|
}
|
|
/* Sidebar Progress Bars Titles */
|
|
.sidebar-menu .sidebar-stat > a {
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Sidebar Toggle Button */
|
|
.sidebar-toggle-mini {
|
|
width: 35px;
|
|
height: 32px;
|
|
padding: 7px 0;
|
|
}
|
|
.sidebar-toggle-mini a {
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: center;
|
|
padding: 6px 6px 5px;
|
|
background: rgba(0,0,0, 0.15);
|
|
}
|
|
.sidebar-toggle-mini span {
|
|
position: relative;
|
|
color: #999;
|
|
font-size: 16px;
|
|
|
|
-webkit-transition: all ease-in-out 0.2s;
|
|
transition: all ease-in-out 0.2s;
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
.sidebar-toggle-mini:hover span {
|
|
color: #EEE;
|
|
}
|
|
|
|
// If sidebar caret variable has been set to
|
|
// "chevron" we use a mixin to change the style
|
|
& when (@sidebar-caret-style = "chevron") {
|
|
.sidebar-caret(@sidebar-caret-style);
|
|
}
|
|
|
|
/*===============================================
|
|
C. Sidebar "top" - Horizontal Menu
|
|
Activated by adding the ".sidebar-top"
|
|
class to the "#sidebar_left" element
|
|
================================================= */
|
|
|
|
// If the horizontal sidebar variable has been set
|
|
// true we allow the mixin to generate the menu
|
|
body.sb-top when (@sidebar-generate-top-style = true) {
|
|
.sidebar-top-variant();
|
|
}
|
|
|
|
|
|
/*===============================================
|
|
D. Sidebar Widgets
|
|
================================================= */
|
|
|
|
/* Widget Wrapper */
|
|
.sidebar-widget {
|
|
position: relative;
|
|
padding: 8px 13px;
|
|
height: 51px;
|
|
|
|
+ .sidebar-widget { margin-top: 18px; }
|
|
|
|
/* Author Widget */
|
|
&.author-widget {
|
|
margin-top: 15px;
|
|
|
|
.media-left img {
|
|
max-width: 40px;
|
|
border: 2px solid #888;
|
|
border-radius: 50%;
|
|
}
|
|
.media-links a {
|
|
display: inline-block;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
color: #70829a;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
}
|
|
.media-links a:hover {
|
|
color: #FFF;
|
|
}
|
|
.media-body {
|
|
padding-left: 3px;
|
|
color: #FFF;
|
|
}
|
|
|
|
&.menu-widget-open .media-links a.sidebar-menu-toggle { color: #FFF; }
|
|
|
|
} // End Author Widget
|
|
|
|
/* Menu Widget - A Slide-Down Menu. Hidden by default */
|
|
&.menu-widget {
|
|
display: none;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
height: 130px;
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: @sb-widget-bg;
|
|
border-top: 1px solid darken(@sb-widget-bg, 2%);
|
|
border-bottom: 1px solid darken(@sb-widget-bg, 2%);
|
|
|
|
/* Menu Links */
|
|
a {
|
|
position: relative;
|
|
display: block;
|
|
padding: 12px 5px 12px;
|
|
margin-bottom: 3px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
a:hover { background-color: @sb-menuwidget-item-hover; }
|
|
|
|
/* Menu Title(hidden) */
|
|
a h5 { display: none; }
|
|
|
|
/* Menu Icons */
|
|
a span {
|
|
color: @sb-menuwidget-icon;
|
|
font-size: 24px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
a:hover span { color: @sb-menuwidget-icon-hover; }
|
|
|
|
} // End Menu Widget
|
|
|
|
// Sidebar Search Widget
|
|
&.search-widget {
|
|
height: 40px;
|
|
padding: 8px 6px;
|
|
background-color: @sb-widget-bg;
|
|
border-top: 1px solid darken(@sb-widget-bg, 2%);
|
|
border-bottom: 1px solid darken(@sb-widget-bg, 2%);
|
|
|
|
input,
|
|
.input-group-addon {
|
|
color: #70829a;
|
|
height: 22px;
|
|
padding: 3px;
|
|
font-size: 14px;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
input {
|
|
padding-left: 0px;
|
|
border-left: 0;
|
|
}
|
|
// placeholder psuedo text styles
|
|
input::-webkit-input-placeholder { color: #70829a; }
|
|
input::-moz-placeholder { color: #70829a; }
|
|
input:-moz-placeholder { color: #70829a; }
|
|
input:-ms-input-placeholder { color: #70829a; }
|
|
|
|
} // End Search Widget
|
|
|
|
|
|
} // End Sidebar Widget Wrapper
|
|
|
|
|
|
// Author Widget - w/Sidebar Minified
|
|
body.sb-l-m .author-widget .media-body,
|
|
body.sb-l-m .author-widget .media-heading {
|
|
display: none;
|
|
}
|
|
body.sb-l-m .author-widget .media-left img {
|
|
max-width: 30px;
|
|
}
|
|
// extra small minified sidebar
|
|
@media (max-width: 900px) {
|
|
body.sb-l-m .author-widget {
|
|
padding: 8px 7px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*====================================================
|
|
E. Sidebar Minified State
|
|
====================================================== */
|
|
|
|
/* Sidebar Minified State */
|
|
body.sb-l-m #sidebar_left {
|
|
z-index: 1028;
|
|
overflow: visible;
|
|
width: @sidebar-minified-width;
|
|
height: 100%;
|
|
left: 0;
|
|
background-color: @sb-bg-color;
|
|
}
|
|
body.sb-l-m #sidebar_left:before { width: @sidebar-minified-width; }
|
|
|
|
/* Hide Multiple Sidebar Elements */
|
|
body.sb-l-m .sidebar-header,
|
|
body.sb-l-m #sidebar_left .sidebar-title,
|
|
body.sb-l-m #sidebar_left .sidebar-label,
|
|
body.sb-l-m #sidebar_left .sidebar-title-tray,
|
|
body.sb-l-m #sidebar_left .caret,
|
|
body.sb-l-m #sidebar_left .sidebar-proj,
|
|
body.sb-l-m #sidebar_left .sidebar-stat {
|
|
display: none;
|
|
}
|
|
|
|
/* Only Icon is showing - Modify Padding to fit */
|
|
body.sb-l-m .sidebar-menu > li {
|
|
padding: 7px 0;
|
|
}
|
|
/* Menu will be converted to on:hover - It requires overflow */
|
|
body.sb-l-m .sidebar-menu > li > a {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Icon */
|
|
body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
|
|
color: #ccc;
|
|
left: -1px;
|
|
width: @sidebar-minified-width;
|
|
font-size: 18px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Sidebar-Menu Top Level - Title */
|
|
body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
|
|
position: absolute;
|
|
left: @sidebar-minified-width;
|
|
top: -4px;
|
|
width: 180px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
font-size: 14px;
|
|
padding-left: 15px;
|
|
border-left: 1px solid #222;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Menus have been converted to show only on:hover. Hide by default */
|
|
body.sb-l-m .sidebar-menu > li > a.menu-open + ul {
|
|
display: none;
|
|
}
|
|
/* Menus have been converted. We display them on:hover */
|
|
body.sb-l-m .sidebar-menu > li:hover > a + ul,
|
|
body.sb-l-m .sidebar-menu > li:hover > a > .sidebar-title,
|
|
body.sb-l-m .sidebar-menu > li:hover > ul .caret {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Sidebar-Menu Sub Level */
|
|
body.sb-l-m .sidebar-menu > li > ul {
|
|
position: absolute;
|
|
left: @sidebar-minified-width;
|
|
top: 38px;
|
|
width: 180px;
|
|
height: auto;
|
|
border-left: 1px solid #222;
|
|
padding-bottom: 7px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar-Menu Multi Level */
|
|
body.sb-l-m .sidebar-menu > li > ul > li { overflow: hidden; }
|
|
body.sb-l-m .sidebar-menu > li > ul > li ul { width: 180px; }
|
|
|
|
/* Sidebar-Menu Sub Level - Link Padding */
|
|
body.sb-l-m .sidebar-menu li > ul > li > a { padding: 8px 15px 8px 15px; }
|
|
|
|
/* Sidebar-Menu Multi Level - Link Padding */
|
|
body.sb-l-m .sidebar-menu li > ul > li > ul > li a { padding: 8px 15px 8px 20px; }
|
|
|
|
|
|
/* Adjust Primary Content Container - Sidebar Minified */
|
|
body.sb-l-m #content_wrapper { margin-left: @sidebar-minified-width; }
|
|
|
|
/* Primary Content Container - Sidebar Hidden */
|
|
body.sb-l-c.sb-l-m #content_wrapper { margin-left: 0; }
|
|
|
|
/* Adjust Navbar Logo/Branding - Sidebar Minified */
|
|
body.sb-l-m .navbar-branding { width: @sidebar-minified-width; }
|
|
|
|
/* Adjust Navbar Logo/Branding - Sidebar Hidden */
|
|
body.sb-l-m .navbar-brand { display: none; }
|
|
|
|
|
|
/*=======================================================
|
|
F. Sidebar Default Color Settings
|
|
========================================================= */
|
|
|
|
/* Sidebar Container */
|
|
#sidebar_left {
|
|
background-color: @sb-bg-color;
|
|
}
|
|
|
|
/* Menu Item - Label Color */
|
|
.sidebar-menu .sidebar-label {
|
|
color: @sb-label;
|
|
}
|
|
/* Menu item Caret */
|
|
.sidebar-menu li > a > span.caret {
|
|
color: @sb-caret;
|
|
}
|
|
/* Open Menu item Caret */
|
|
.sidebar-menu li > a.menu-open > span.caret {
|
|
color: @sb-caret-open;
|
|
}
|
|
|
|
/* Top Level Menu Item - Text Color */
|
|
.sidebar-menu > li > a {
|
|
color: @sb-menu-text;
|
|
}
|
|
/* Top Level Menu Item - BG Color:hover */
|
|
.sidebar-menu > li > a:hover,
|
|
.sidebar-menu > li > a:focus,
|
|
.sidebar-menu > li > a:active {
|
|
color: @sb-menu-text-hover;
|
|
background-color: @sb-menu-item-hover;
|
|
}
|
|
/* Top Level Item - Border Color:hover */
|
|
.sidebar-menu > li:hover > a:after,
|
|
.sidebar-menu > li:focus > a:after {
|
|
background: @sb-menu-border-hover;
|
|
}
|
|
/* Top Level Active Menu Item - BG/Text Color */
|
|
.sidebar-menu > li.active > a {
|
|
color: @sb-active-text;
|
|
background-color: @sb-active-bg;
|
|
}
|
|
/* Top Level Active Menu Item - Icon Color */
|
|
.sidebar-menu > li.active > a > span:nth-child(1) {
|
|
color: @sb-active-icon;
|
|
}
|
|
/* Top Level Active Item - Border Color */
|
|
.sidebar-menu > li.active > a:after,
|
|
.sidebar-menu > li > a.menu-open:after {
|
|
background: @sb-active-border;
|
|
}
|
|
|
|
/* Sub-Menu Item - BG Color */
|
|
.sidebar-menu > li > ul {
|
|
background-color: @sub-menu-bg;
|
|
}
|
|
/* Sub-Menu Item - BG Color:hover */
|
|
.sidebar-menu > li > ul > li > a {
|
|
color: @sub-menu-text;
|
|
}
|
|
/* Sub-Menu Item - BG Color:hover */
|
|
.sidebar-menu > li > ul > li > a:hover,
|
|
.sidebar-menu > li > ul > li > a:focus {
|
|
color: @sub-menu-text-hover;
|
|
background-color: @sub-menu-item-hover;
|
|
}
|
|
/* Sub-Menu Item - Border Color:hover */
|
|
.sidebar-menu > li > ul > li:hover > a:after,
|
|
.sidebar-menu > li > ul > li:focus > a:after {
|
|
background: @sub-menu-border-hover;
|
|
}
|
|
/* Sub-Menu Active Item - BG/Text Color */
|
|
.sidebar-menu > li > ul > li.active > a {
|
|
color: @sb-active-text;
|
|
background-color: @sub-active-bg;
|
|
}
|
|
/* Sub-Menu Active Item - Icon Color */
|
|
.sidebar-menu > li > ul > li.active > a > span:nth-child(1),
|
|
.sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {
|
|
color: @sub-active-icon;
|
|
}
|
|
/* Sub-Menu Active Item - Border Color */
|
|
.sidebar-menu > li > ul > li.active > a:after,
|
|
.sidebar-menu > li > ul > li > a.menu-open:after {
|
|
background: @sub-active-border;
|
|
}
|
|
|
|
/* Multi-Menu Item - BG Color */
|
|
.sidebar-menu > li > ul > li ul {
|
|
background-color: @multi-menu-bg;
|
|
}
|
|
/* Multi-level Item - BG Color:hover */
|
|
.sidebar-menu > li > ul > li > ul > li > a {
|
|
color: @multi-menu-text;
|
|
}
|
|
/* Multi-level Item - BG Color:hover */
|
|
.sidebar-menu > li > ul > li > ul > li > a:hover,
|
|
.sidebar-menu > li > ul > li > ul > li > a:focus {
|
|
color: @multi-menu-text-hover;
|
|
background-color: @multi-menu-item-hover;
|
|
}
|
|
/* Multi-level Active Item - Border Color:hover */
|
|
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
|
|
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
|
|
background: @multi-menu-border-hover;
|
|
}
|
|
/* Multi-level Active Item - BG/Text Color */
|
|
.sidebar-menu > li > ul > li > ul > li.active > a {
|
|
color: @sb-active-text;
|
|
background: @multi-active-bg;
|
|
}
|
|
/* Multi-level Active Item - Icon Color */
|
|
.sidebar-menu > li > ul > li > ul > li.active > a > span:nth-child(1),
|
|
.sidebar-menu > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
|
|
color: @multi-active-icon;
|
|
}
|
|
/* Multi-level Active Item - Border Color */
|
|
.sidebar-menu > li > ul > li > ul > li.active > a:after {
|
|
background: @multi-active-border;
|
|
}
|
|
|
|
/* Minified Sidebar - Title */
|
|
body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
|
|
background-color: @sub-menu-bg;
|
|
}
|
|
/* Minified Sidebar - Active Icon */
|
|
body.sb-l-m .sidebar-menu > li.active > a > span:nth-child(1) {
|
|
color: @sb-active-icon;
|
|
}
|
|
|
|
|
|
|
|
/*=======================================================
|
|
G. Sidebar Light Color Settings
|
|
Applied via class to "#sidebar"
|
|
eg: <aside id="sidebar_left" class="sidebar-light">
|
|
========================================================= */
|
|
|
|
// Mixin which creates sidebar-light
|
|
#sidebar_left.sidebar-light {
|
|
.sidebar-light-variant();
|
|
}
|
|
|
|
// Manual changes added to sidebar-light
|
|
body.sb-l-m {
|
|
#sidebar_left.sidebar-light {
|
|
background-color: #FAFAFA;
|
|
}
|
|
#sidebar_left.sidebar-light.light {
|
|
background-color: #FFF;
|
|
}
|
|
#sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title,
|
|
#sidebar_left.sidebar-light .sidebar-menu > li > ul {
|
|
border: 1px solid #DDD;
|
|
border-top: 0;
|
|
background-color: #f8f8f8;
|
|
left: 59px;
|
|
box-shadow: none;
|
|
}
|
|
#sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title {
|
|
border-top: 1px solid #DDD;
|
|
}
|
|
}
|
|
|
|
|
|
/*==================================================
|
|
H. Sidebar "Nano Scroller" Settings (Core Plugin)
|
|
==================================================== */
|
|
#sidebar_left.nano > .nano-content {}
|
|
#sidebar_left.nano.affix{
|
|
padding-bottom: 0;
|
|
}
|
|
#sidebar_left.affix.nano .tooltip {
|
|
z-index: 9999 !important;
|
|
}
|
|
/* If the sidebar is minified we disable nanoscroll via css
|
|
* otherwise nano scroll hides popout menus and the scroll is
|
|
* needed to see submenus with many items */
|
|
body.sb-l-m #sidebar_left.nano {
|
|
position: absolute;
|
|
}
|
|
body.sb-l-m #sidebar_left.nano > .nano-content {
|
|
overflow: visible;
|
|
right: 0 !important;
|
|
}
|
|
/* If the sidebar is minified and in mobile mode we hard disable
|
|
* the entire plugin via a display !important */
|
|
body.sb-l-m.mobile-view .nano > .nano-pane {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
I. Sidebar Responsive Settings - Added via Update v1.2.
|
|
If window <900px create even smaller minified sidebar
|
|
=========================================================== */
|
|
|
|
@media (max-width: 900px) {
|
|
|
|
/* Sidebar Minified State */
|
|
body.sb-l-m #sidebar_left { width: 45px; }
|
|
body.sb-l-m #sidebar_left:before { width: 45px; }
|
|
|
|
/* Sidebar-menu Top Level - Icon */
|
|
body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
|
|
left: -1px;
|
|
width: 45px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Sidebar-menu Top Level - Title */
|
|
body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
|
|
position: absolute;
|
|
left: 45px;
|
|
top: -4px;
|
|
width: 180px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
font-size: 14px;
|
|
padding-left: 15px;
|
|
border-left: 1px solid #222;
|
|
background-color: #282d33;
|
|
}
|
|
|
|
/* Sidebar-menu Sub Level */
|
|
body.sb-l-m .sidebar-menu > li > ul {
|
|
position: absolute;
|
|
left: 45px;
|
|
top: 38px;
|
|
width: 180px;
|
|
height: auto;
|
|
border-left: 1px solid #222;
|
|
padding-bottom: 7px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar-menu Multi Level */
|
|
body.sb-l-m .sidebar-menu > li > ul > li ul {
|
|
width: 180px;
|
|
}
|
|
|
|
/* Sidebar-menu Sub Level - Link Padding */
|
|
body.sb-l-m .sidebar-menu li > ul > li > a {
|
|
padding: 8px 20px 8px 20px;
|
|
}
|
|
|
|
/* Sidebar-menu Multi Level - Link Padding */
|
|
body.sb-l-m .sidebar-menu li > ul > li > ul > li a {
|
|
padding: 8px 20px 8px 35px;
|
|
}
|
|
|
|
/* Adjust Primary Content Container - Sidebar Minified */
|
|
body.sb-l-m #content_wrapper { margin-left: 45px; }
|
|
|
|
/* Adjust Primary Content Container - Sidebar Hidden */
|
|
body.sb-l-c.sb-l-m #content_wrapper { margin-left: 0; }
|
|
|
|
/* Adjust Navbar Logo/Branding - Hide Logo */
|
|
body.sb-l-o .navbar-brand,
|
|
body.sb-l-m .navbar-brand {
|
|
display: none;
|
|
}
|
|
|
|
/* Adjust Navbar Logo/Branding - Adjust Width */
|
|
body.sb-l-o .navbar-branding,
|
|
body.sb-l-m .navbar-branding {
|
|
max-width: 45px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Adjust Navbar Toggle - Sidebar Open */
|
|
body.sb-l-o .navbar #toggle_sidemenu_l {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Adjust Navbar Toggle - Sidebar Minified */
|
|
body.sb-l-o.sb-l-m .navbar #toggle_sidemenu_l{
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
/* Adjust Navbar Toggle - Sidebar Open + Minified */
|
|
body.sb-l-o .navbar #toggle_sidemenu_l,
|
|
body.sb-l-m .navbar #toggle_sidemenu_l {
|
|
width: 45px;
|
|
}
|
|
|
|
/* Hide sidebar user menu button when the sidebar is
|
|
collapsed. As it's not accessible in this mode*/
|
|
.sb-l-o .navbar .sidebar-menu-toggle,
|
|
.sb-l-c .navbar .sidebar-menu-toggle {
|
|
margin-left: 10px;
|
|
display: none;
|
|
}
|
|
|
|
// Right Sidemenu Button
|
|
#toggle_sidemenu_r { margin-top: 4px; }
|
|
|
|
// Manual Responsive changes added to sidebar-light
|
|
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title,
|
|
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > ul {
|
|
left: 44px;
|
|
}
|
|
|
|
} |