first commit
This commit is contained in:
8
libraries/framework/skin/base/components/all.less
Normal file
8
libraries/framework/skin/base/components/all.less
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
@import "navbar";
|
||||
@import "content_trays";
|
||||
@import "sidebar_left";
|
||||
@import "sidebar_right";
|
||||
@import "sidebar_actions";
|
||||
@import "topbar";
|
||||
@import "footer"; // Added update v1.45
|
||||
474
libraries/framework/skin/base/components/content_trays.less
Normal file
474
libraries/framework/skin/base/components/content_trays.less
Normal file
@@ -0,0 +1,474 @@
|
||||
/* ==============================================
|
||||
Content Trays
|
||||
A. Trays
|
||||
B. Tray Sizes
|
||||
C. Tray Bin
|
||||
D. Misc Tray Helpers
|
||||
E. Tray Navigation
|
||||
F. Tray Hover Settings
|
||||
=================================================
|
||||
A. Content Trays
|
||||
================================================= */
|
||||
|
||||
/*tray table layout*/
|
||||
#content.table-layout {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content.table-layout > div,
|
||||
#content.table-layout > section {
|
||||
vertical-align: top;
|
||||
padding: 25px 20px 50px;
|
||||
}
|
||||
#content.table-layout > aside {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*trays*/
|
||||
.tray-left,
|
||||
.tray-right {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
min-height: 100%;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #DDD;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/*Right tray*/
|
||||
.tray-right {
|
||||
border-left: 1px solid #DDD;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
/*Top tray*/
|
||||
.tray-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background-color: #f2f2f2;
|
||||
padding: 15px;
|
||||
}
|
||||
.tray-top.light {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
B. Tray Sizes
|
||||
================================================= */
|
||||
.tray200 {
|
||||
width: 200px;
|
||||
}
|
||||
.tray240 {
|
||||
width: 240px;
|
||||
}
|
||||
.tray270 {
|
||||
width: 270px;
|
||||
}
|
||||
.tray290 {
|
||||
width: 290px;
|
||||
}
|
||||
.tray300 {
|
||||
width: 300px;
|
||||
}
|
||||
.tray320 {
|
||||
width: 320px;
|
||||
}
|
||||
.tray350 {
|
||||
width: 350px;
|
||||
}
|
||||
.tray400 {
|
||||
width: 400px;
|
||||
}
|
||||
/* affixed tray widths - we subtract 1px to make
|
||||
* sure the parent left/right border is display */
|
||||
.tray200 .tray-nav.affix {
|
||||
width: 199px;
|
||||
}
|
||||
.tray200 .tray-nav.affix {
|
||||
width: 239px;
|
||||
}
|
||||
.tray270 .tray-nav.affix {
|
||||
width: 269px;
|
||||
}
|
||||
.tray290 .tray-nav.affix {
|
||||
width: 289px;
|
||||
}
|
||||
.tray300 .tray-nav.affix {
|
||||
width: 299px;
|
||||
}
|
||||
.tray320 .tray-nav.affix {
|
||||
width: 319px;
|
||||
}
|
||||
.tray350 .tray-nav.affix {
|
||||
width: 349px;
|
||||
}
|
||||
.tray400 .tray-nav.affix {
|
||||
width: 399px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
C. Tray Bin
|
||||
================================================= */
|
||||
|
||||
/* tray bin - great for organizing buttons and links
|
||||
* negative margin added to counter parent tray padding
|
||||
*/
|
||||
.tray-bin {
|
||||
min-height: 65px;
|
||||
padding: 7px;
|
||||
margin: 0 -15px 15px;
|
||||
border: 1px dashed #CCC;
|
||||
background: #eee;
|
||||
}
|
||||
.tray-bin.stretch {
|
||||
border-left: 0;
|
||||
border-right: 0
|
||||
}
|
||||
/*If navbar has a contextual bg we make menu links white*/
|
||||
.tray-bin div[class*='col-'] {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/*traybin divider text. Used primarily in li navs*/
|
||||
.tray-bin .nav-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: @muted;
|
||||
padding-left: 5px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
D. Misc Tray Helpers
|
||||
================================================= */
|
||||
|
||||
/* often used as first title in tray */
|
||||
.tray-title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 5px 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Icon list commonly seen in tray header */
|
||||
.icon-list {
|
||||
margin: 20px 0 30px;
|
||||
font-size: 14px;
|
||||
padding-left: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
.icon-list li + li {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
E. Tray Navigation
|
||||
================================================= */
|
||||
/* tray navigation - negative margin added
|
||||
* to counter parent tray padding
|
||||
*/
|
||||
ul.tray-nav {
|
||||
margin: 15px -15px;
|
||||
}
|
||||
/* item link */
|
||||
ul.tray-nav li a {
|
||||
width: 100%;
|
||||
padding: 11px 15px 11px 30px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
background: #f2f2f2;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
/* item icon */
|
||||
ul.tray-nav li a .fa {
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
/* active item */
|
||||
ul.tray-nav li.active a {
|
||||
color: #666;
|
||||
background: #fbfbfb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* active item icon */
|
||||
ul.tray-nav li.active a .fa {
|
||||
color:@tray-nav-active-icon;
|
||||
}
|
||||
|
||||
/*Tray nav style option - Arrow*/
|
||||
|
||||
/* active item bottom border */
|
||||
ul.tray-nav.tray-nav-arrow li.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
ul.tray-nav.tray-nav-arrow li.active a:before,
|
||||
ul.tray-nav.tray-nav-arrow li.active a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-left: 20px solid;
|
||||
border-left-color: #fbfbfb;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
ul.tray-nav.tray-nav-arrow li.active a:before {
|
||||
border-left-color: #888;
|
||||
}
|
||||
|
||||
/* item hover */
|
||||
ul.tray-nav.tray-nav-arrow li:hover a:after {
|
||||
border-left-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/*settings for arrows when used on a right aligned tray (.tray-right)*/
|
||||
|
||||
/* active item bottom border */
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active:before {
|
||||
width: 100%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before,
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:after {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
border-right: 20px solid;
|
||||
border-left-color: transparent;
|
||||
border-right-color: #fbfbfb;
|
||||
}
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before {
|
||||
border-left-color: transparent;
|
||||
border-right-color: #888;
|
||||
}
|
||||
|
||||
/* item hover */
|
||||
.tray-right ul.tray-nav.tray-nav-arrow li:hover a:after {
|
||||
border-left-color: transparent;
|
||||
border-right-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/*Tray nav style option - Bordered*/
|
||||
.tray-nav.tray-nav-border li {
|
||||
position: relative;
|
||||
}
|
||||
.tray-nav.tray-nav-border li a {
|
||||
font-size: 14px;
|
||||
padding: 12px 15px 12px 23px;
|
||||
}
|
||||
.tray-nav.tray-nav-border li:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #CCC;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active:after {
|
||||
background: @tray-nav-active-border;
|
||||
}
|
||||
.tray-nav.tray-nav-border li:hover:after {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/*modifcation for right side trays (.tray-right)*/
|
||||
.tray-right .tray-nav.tray-nav-border li:after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/*border skin contextuals*/
|
||||
.tray-nav.tray-nav-border li.active.nav-primary:after {
|
||||
background: @brand-primary;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-success:after {
|
||||
background: @brand-success;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-info:after {
|
||||
background: @brand-info;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-warning:after {
|
||||
background: @brand-warning;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-danger:after {
|
||||
background: @brand-danger;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-alert:after {
|
||||
background: @brand-alert;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-system:after {
|
||||
background: @brand-system;
|
||||
}
|
||||
.tray-nav.tray-nav-border li.active.nav-dark:after {
|
||||
background: @brand-dark;
|
||||
}
|
||||
|
||||
/* Tray elements fixed settings */
|
||||
.tray-nav.affix,
|
||||
.tray .tray-affix {
|
||||
top: 55px;
|
||||
}
|
||||
#topbar.affix + #content .tray-nav.affix,
|
||||
#topbar.affix + #content .tray .tray-affix {
|
||||
top: 115px;
|
||||
}
|
||||
|
||||
|
||||
/* tray-nav animation helper class */
|
||||
.tray-nav[data-nav-animate] li {
|
||||
display: none;
|
||||
}
|
||||
.tray-nav[data-nav-animate] li.animated {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
F. Tray Hover Settings
|
||||
|
||||
At <1000 window width javascript will add a
|
||||
"tray-rescale" class to the document body. This
|
||||
will shift the menu over out of sight and
|
||||
expand it only when the user hovers over the
|
||||
portion that's still visible
|
||||
================================================= */
|
||||
body.tray-rescale {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body.tray-rescale.sb-r-o .tray-center {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
body.tray-rescale.sb-r-o .tray-left,
|
||||
body.tray-rescale.sb-r-o .tray-right {
|
||||
display: none;
|
||||
}
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {right: -275px;}
|
||||
|
||||
body.tray-rescale .tray-left {
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
|
||||
/* adjust center tray to fill window width add needed
|
||||
padding to offset the partially hidden tray */
|
||||
body.tray-rescale .tray-center {
|
||||
width: 100%;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
padding-right: 58px !important;
|
||||
}
|
||||
body.tray-rescale .tray-top + .tray-center {
|
||||
padding-right: inherit !important;
|
||||
}
|
||||
/* adjust depending on tray size */
|
||||
body.tray-rescale .tray.tray200 {
|
||||
right: -155px;
|
||||
}
|
||||
body.tray-rescale .tray.tray225 {
|
||||
right: -180px;
|
||||
}
|
||||
body.tray-rescale .tray.tray250 {
|
||||
right: -205px;
|
||||
}
|
||||
body.tray-rescale .tray.tray270 {
|
||||
right: -225px;
|
||||
}
|
||||
body.tray-rescale .tray.tray290 {
|
||||
right: -245px;
|
||||
}
|
||||
body.tray-rescale .tray.tray300 {
|
||||
right: -255px;
|
||||
}
|
||||
body.tray-rescale .tray.tray320 {
|
||||
right: -275px;
|
||||
}
|
||||
body.tray-rescale .tray.tray350 {
|
||||
right: -305px;
|
||||
}
|
||||
body.tray-rescale .tray.tray400 {
|
||||
right: -355px;
|
||||
}
|
||||
|
||||
/* on hover open the menus */
|
||||
body.tray-rescale .tray-left:hover,
|
||||
body.tray-rescale .tray-right:hover {
|
||||
opacity: 1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
body.tray-rescale .tray-left:hover,
|
||||
body.tray-rescale .tray-right:hover {right: 0px;}
|
||||
|
||||
|
||||
/* adjust any bootstrap affix settings if they exist */
|
||||
// body.tray-rescale .tray .tray-nav.affix,
|
||||
// body.tray-rescale .tray .affix-pane.affix {
|
||||
// top: auto;
|
||||
// }
|
||||
|
||||
// Changes added via updates
|
||||
// Update v1.2
|
||||
//
|
||||
|
||||
// Tray Responsive Changes
|
||||
// Hide the tray completely iff window is <600 px
|
||||
|
||||
/* Disable completely on resolutions <600 */
|
||||
@media (max-width: 600px) {
|
||||
body.tray-rescale .tray-left,
|
||||
body.tray-rescale .tray-right {
|
||||
display: none;
|
||||
}
|
||||
body.tray-rescale .tray-center {
|
||||
padding-right: 13px !important;
|
||||
}
|
||||
body.tray-rescale #content.table-layout > div,
|
||||
body.tray-rescale #content.table-layout > section {
|
||||
padding: 10px 13px 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Changes added via updates
|
||||
// Update v1.5
|
||||
//
|
||||
// Tray Scroller Settings (Fixed content panes)
|
||||
.tray-scroller { min-height: 500px; }
|
||||
.tray-left .tray-scroller { margin-right: -16px; }
|
||||
.tray-center .tray-scroller { margin-right: -20px; padding-right: 5px; }
|
||||
.tray-right .tray-scroller { margin-right: -13px; }
|
||||
.tray-scroller .scroller-handle {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.tray-scroller:hover .scroller-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
68
libraries/framework/skin/base/components/footer.less
Normal file
68
libraries/framework/skin/base/components/footer.less
Normal file
@@ -0,0 +1,68 @@
|
||||
/* ==============================================
|
||||
Page Footer
|
||||
================================================= */
|
||||
#content-footer {
|
||||
color: #AAA;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
padding: 12px 15px;
|
||||
background-color: #f8f8f8;
|
||||
border-top: 1px solid #DDD;
|
||||
|
||||
-webkit-transition: margin 0.2s ease;
|
||||
transition: margin 0.2s ease;
|
||||
|
||||
b { color: #888; }
|
||||
.footer-meta { padding-right: 30px; }
|
||||
.footer-return-top {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: #eaeaea;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.footer-return-top span {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
color: #AAA;
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 0.23s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.footer-return-top:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
.footer-return-top:hover span {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fixed Setting */
|
||||
#content-footer.affix {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
margin-left: @sidebar-open-width;
|
||||
}
|
||||
/* Match Sidebar States */
|
||||
body.sb-l-c #content-footer.affix {
|
||||
margin-left: @sidebar-closed-width;
|
||||
}
|
||||
body.sb-l-m #content-footer.affix {
|
||||
margin-left: @sidebar-minified-width;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
body.sb-l-m #content-footer.affix {
|
||||
margin-left: 45px;
|
||||
}
|
||||
}
|
||||
1011
libraries/framework/skin/base/components/navbar.less
Normal file
1011
libraries/framework/skin/base/components/navbar.less
Normal file
File diff suppressed because it is too large
Load Diff
105
libraries/framework/skin/base/components/sidebar_actions.less
Normal file
105
libraries/framework/skin/base/components/sidebar_actions.less
Normal file
@@ -0,0 +1,105 @@
|
||||
/* ==============================================
|
||||
Sidebar Actions
|
||||
A. Sidebar Left Toggle
|
||||
B. Sidebar Right Toggle
|
||||
C. Left Sidebar Minified Helper
|
||||
D. Mobile Menu Modifications
|
||||
=================================================
|
||||
A. Sidebar Left Toggle
|
||||
================================================= */
|
||||
|
||||
/*left sidebar open*/
|
||||
.sb-l-o #sidebar_left {
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-l-o #content_wrapper {
|
||||
margin-left: @sidebar-open-width;
|
||||
}
|
||||
|
||||
/*left sidebar closed*/
|
||||
.sb-l-c #sidebar_left {
|
||||
left: -(@sidebar-open-width);
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-l-c #content_wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Adjust navbar branding when closed */
|
||||
.sb-l-c .navbar-branding {
|
||||
width: @sidebar-minified-width;
|
||||
}
|
||||
.sb-l-c .navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*====================================================
|
||||
B. Sidebar Right Toggle
|
||||
====================================================== */
|
||||
|
||||
/*Sidebar Right Open */
|
||||
.sb-r-o #sidebar_right {
|
||||
right: 0;
|
||||
}
|
||||
.sb-r-o #content_wrapper {
|
||||
margin-right: 300px;
|
||||
}
|
||||
|
||||
/*Sidebar Right Closed*/
|
||||
.sb-r-c #sidebar_right {
|
||||
right: -300px;
|
||||
}
|
||||
.sb-r-c #content_wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*====================================================
|
||||
C. Left Sidebar Minified Helper
|
||||
====================================================== */
|
||||
.sb-l-c.sb-l-m #sidebar_left {
|
||||
left: -(@sidebar-minified-width);
|
||||
}
|
||||
|
||||
/*hide sidebar user menu button when the sidebar is
|
||||
collapsed. As it's not accessible in this mode*/
|
||||
.sb-l-m .navbar .sidebar-menu-toggle,
|
||||
.sb-l-c .navbar .sidebar-menu-toggle {
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
D. Mobile Menu Modifications
|
||||
================================================= */
|
||||
|
||||
/* At less than 1100px we collapse any open sidebars via
|
||||
Media Queries. Theme Javscript will also add a a
|
||||
".mobile-view" class so that you can do any needed
|
||||
manipulation using an html class aswell */
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
/* Sidebar Left Open/Default */
|
||||
#content_wrapper,
|
||||
.sb-l-o #content_wrapper {
|
||||
margin-left: 0;
|
||||
left: @sidebar-open-width;
|
||||
}
|
||||
|
||||
/* Sidebar Left Minified */
|
||||
.sb-l-m #content_wrapper {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Sidebar Left Closed */
|
||||
.sb-l-c #content_wrapper {
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Sidebar Right Open */
|
||||
.sb-r-o #content_wrapper {
|
||||
margin-right: 0;
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
803
libraries/framework/skin/base/components/sidebar_left.less
Normal file
803
libraries/framework/skin/base/components/sidebar_left.less
Normal file
@@ -0,0 +1,803 @@
|
||||
/* ==============================================
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
66
libraries/framework/skin/base/components/sidebar_right.less
Normal file
66
libraries/framework/skin/base/components/sidebar_right.less
Normal file
@@ -0,0 +1,66 @@
|
||||
/* ==============================================
|
||||
Right Sidebar
|
||||
A. Default Closed State
|
||||
B. Sidebar Right Panel Menu
|
||||
C. Nano Sidebar Scroller Settings
|
||||
=================================================
|
||||
A. Default Closed State
|
||||
================================================= */
|
||||
#sidebar_right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
padding-top: 60px;
|
||||
right: -300px;
|
||||
border-left: 1px solid #ddd;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
#sidebar_right.affix {
|
||||
position: fixed;
|
||||
}
|
||||
#sidebar_right .sidebar-right-header {
|
||||
width: 100%;
|
||||
height: 59px;
|
||||
padding: 4px 10px 4px 20px;
|
||||
}
|
||||
#sidebar_right .sidebar_right_content a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
B. Sidebar Right Panel Menu
|
||||
================================================= */
|
||||
.title-divider {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 0 5px 9px 5px;
|
||||
}
|
||||
#sidebar_right .panel {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#sidebar_right .panel-heading {
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#sidebar_right .panel-tabs li a {
|
||||
padding: 17px 18px;
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
#sidebar_right .panel-tabs li:first-child a {
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
C. Nano Sidebar Scroller Settings
|
||||
================================================= */
|
||||
#sidebar_right.nano > .nano-pane {
|
||||
background: rgba(0, 0, 0, .07);
|
||||
}
|
||||
#sidebar_right.nano > .nano-pane > .nano-slider {
|
||||
background: #444;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
261
libraries/framework/skin/base/components/topbar.less
Normal file
261
libraries/framework/skin/base/components/topbar.less
Normal file
@@ -0,0 +1,261 @@
|
||||
/* ==============================================
|
||||
Topbar
|
||||
A. Topbar
|
||||
B. Topbar Dropdown Menu
|
||||
C. Topbar Alternate Style
|
||||
D. Topbar Navigation - List
|
||||
E. Topbar Responsive Settings
|
||||
=================================================
|
||||
A. Topbar
|
||||
================================================= */
|
||||
|
||||
#topbar {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 51px;
|
||||
padding: 10px 21px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
&:extend(.clearfix all);
|
||||
|
||||
.topbar-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* Topbar Breadcrumbs */
|
||||
.breadcrumb {
|
||||
float: left;
|
||||
position: relative;
|
||||
padding: 1px 25px 0 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 12px;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
|
||||
> li {
|
||||
color: #888;
|
||||
}
|
||||
> li.crumb-active > a {
|
||||
color: #555;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*Toggle sidemenu button*/
|
||||
#toggle_sidemenu_r i.fa,
|
||||
#toggle_sidemenu_r span.glyphicon,
|
||||
#toggle_sidemenu_r span.glyphicons {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* toggle sidemenu button (when menu is open) */
|
||||
body.sb-r-o #toggle_sidemenu_r i.fa,
|
||||
body.sb-r-o #toggle_sidemenu_r span.glyphicon,
|
||||
body.sb-r-o #toggle_sidemenu_r span.glyphicons {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Toggle Right Sidebar - Badge */
|
||||
.badge.badge-hero {
|
||||
position: relative;
|
||||
top: -12px;
|
||||
margin-left: -10px;
|
||||
padding: 2px 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/*===============================================
|
||||
B. Topbar - Alternate Style
|
||||
Requires ".alt" class on #topbar
|
||||
================================================= */
|
||||
|
||||
#topbar.alt {
|
||||
min-height: 70px;
|
||||
padding: 20px 22px;
|
||||
background: #e7e7e7;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
C. Topbar Dropmenu
|
||||
================================================= */
|
||||
|
||||
#topbar-dropmenu {
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
padding: 17px 20px 10px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background: url("@{img-path}/patterns/topbar-bg.jpg") repeat -60px top;
|
||||
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
|
||||
}
|
||||
#topbar-dropmenu:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.navbar[class*='bg-'] + #sidebar_left + #content_wrapper > #topbar-dropmenu {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topbar-menu .metro-tile {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
color: #FFF;
|
||||
height: 95px;
|
||||
position: relative;
|
||||
padding: 15px 5px 0;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
-webkit-transition: background 0.2s ease;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.topbar-menu .metro-tile:hover,
|
||||
.topbar-menu .metro-tile:focus,
|
||||
.topbar-menu .metro-tile:active {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.topbar-menu .metro-tile span:first-child {
|
||||
font-size: 44px;
|
||||
}
|
||||
.topbar-menu .metro-tile .metro-title {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Topbar Menu Modal */
|
||||
.metro-modal {
|
||||
z-index: 9998;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* if topbar is fixed we force it relative upon topbar
|
||||
* dropmenu open as it will create scrolling problems */
|
||||
#topbar-dropmenu.topbar-menu-open + #topbar.affix {
|
||||
position: relative !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
D. Topbar Dropdown Menu - Alternate Style
|
||||
Requires ".alt" class on #topbar-dropmenu
|
||||
and bg classes on all ".metro-tiles"
|
||||
================================================= */
|
||||
|
||||
#topbar-dropmenu.alt {
|
||||
z-index: 1025;
|
||||
padding: 17px 20px 10px;
|
||||
background: #DDD;
|
||||
border-bottom: 1px solid #ccc;
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar-menu > div {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.topbar-menu .metro-tile {
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(0,0,0, 0.15);
|
||||
}
|
||||
.topbar-menu .metro-tile:hover,
|
||||
.topbar-menu .metro-tile:focus,
|
||||
.topbar-menu .metro-tile:active {
|
||||
color: #fff;
|
||||
background: inherit;
|
||||
}
|
||||
.topbar-menu .metro-tile .metro-title {
|
||||
bottom: 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
D. Topbar List Navigation
|
||||
================================================= */
|
||||
|
||||
#topbar .nav.nav-list-topbar {
|
||||
margin: -10px 15px;
|
||||
|
||||
li a {
|
||||
padding: 16px 14px 12px;
|
||||
}
|
||||
li.active a {
|
||||
border-bottom: 3px solid @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*===============================================
|
||||
E. Topbar Settings - Responsive
|
||||
================================================= */
|
||||
|
||||
@media (max-width: 815px) {
|
||||
#topbar {
|
||||
padding: 10px 6px 10px 14px;
|
||||
}
|
||||
// Topbar Alt
|
||||
#topbar.alt {
|
||||
min-height: 40px;
|
||||
padding: 10px 6px 10px 14px;
|
||||
}
|
||||
#topbar .topbar-dropdown {
|
||||
display: none !important;
|
||||
}
|
||||
// when fixed
|
||||
#topbar.affix.alt + #content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#topbar .breadcrumb {
|
||||
font-size: 14px;
|
||||
padding-top: 5px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
#topbar .breadcrumb .crumb-active {
|
||||
display: none;
|
||||
}
|
||||
#topbar .breadcrumb > li.crumb-active + li:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user