<!-- begin #sidebar -->
<div id="page-container" class="page-header-fixed page-sidebar-fixed">
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar nav -->
<ul class="nav">
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-th-large"></i>
<span>User</span>
</a>
<ul class="sub-menu active">
<li><a href="index.html">Add User</a></li>
<li><a href="index_v2.html">Edit User</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-gem"></i>
<span>Faculty </span>
</a>
<ul class="sub-menu">
<li><a href="ui_general.html">Add Faculty <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="ui_typography.html">Edit Faculty</a></li>
<li><a href="ui_tabs_accordions.html">Delete Faculty</a></li>
<li><a href="ui_unlimited_tabs.html">Unlimited Nav Tabs</a></li>
<li><a href="ui_modal_notification.html">Modal & Notification <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="ui_widget_boxes.html">Widget Boxes</a></li>
<li><a href="ui_media_object.html">Media Object</a></li>
<li class="active"><a href="ui_buttons.html">Buttons <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="ui_icons.html">Icons</a></li>
<li><a href="ui_simple_line_icons.html">Simple Line Icons</a></li>
<li><a href="ui_ionicons.html">Ionicons</a></li>
<li><a href="ui_tree.html">Tree View</a></li>
<li><a href="ui_language_bar_icon.html">Language Bar & Icon</a></li>
<li><a href="ui_social_buttons.html">Social Buttons</a></li>
<li><a href="ui_tour.html">Intro JS</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-list-ol"></i>
<span>Course </span>
</a>
<ul class="sub-menu">
<li><a href="form_elements.html">Add Course <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="form_plugins.html">Edit Course <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="form_slider_switcher.html">Grades</a></li>
<li><a href="form_validation.html">Topics/CLO</a></li>
<li><a href="form_wizards.html">Sections</a></li>
<li><a href="form_wizards_validation.html">Delete Course</a></li>
<li><a href="form_wysiwyg.html">WYSIWYG</a></li>
<li><a href="form_editable.html">X-Editable</a></li>
<li><a href="form_multiple_upload.html">Multiple File Upload</a></li>
<li><a href="form_summernote.html">Summernote</a></li>
<li><a href="form_dropzone.html">Dropzone</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-table"></i>
<span>Print Report</span>
</a>
<ul class="sub-menu">
<li><a href="table_basic.html">Basic Tables</a></li>
<li class="has-sub">
<a href="javascript:;"><b class="caret pull-right"></b> Managed Tables</a>
<ul class="sub-menu">
<li><a href="table_manage.html">Default</a></li>
<li><a href="table_manage_autofill.html">Autofill</a></li>
<li><a href="table_manage_buttons.html">Buttons</a></li>
<li><a href="table_manage_colreorder.html">ColReorder</a></li>
<li><a href="table_manage_fixed_columns.html">Fixed Column</a></li>
<li><a href="table_manage_fixed_header.html">Fixed Header</a></li>
<li><a href="table_manage_keytable.html">KeyTable</a></li>
<li><a href="table_manage_responsive.html">Responsive</a></li>
<li><a href="table_manage_rowreorder.html">RowReorder</a></li>
<li><a href="table_manage_scroller.html">Scroller</a></li>
<li><a href="table_manage_select.html">Select</a></li>
<li><a href="table_manage_combine.html">Extension Combination</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-star"></i>
<span>Front End</span>
</a>
<ul class="sub-menu">
<li><a href="../../frontend/one-page-parallax/index.html" target="_blank">One Page Parallax</a></li>
<li><a href="../../frontend/blog/index.html" target="_blank">Blog</a></li>
<li><a href="../../frontend/forum/index.html" target="_blank">Forum</a></li>
<li><a href="../../frontend/e-commerce/index.html" target="_blank">E-Commerce</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-envelope"></i>
<span>Email Template</span>
</a>
<ul class="sub-menu">
<li><a href="email_system.html">System Template</a></li>
<li><a href="email_newsletter.html">Newsletter Template</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-chart-pie"></i>
<span>Chart</span>
</a>
<ul class="sub-menu">
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-js.html">Chart JS</a></li>
<li><a href="chart-d3.html">d3 Chart</a></li>
</ul>
</li>
<li><a href="calendar.html"><i class="fa fa-calendar"></i> <span>Calendar</span></a></li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-map"></i>
<span>Map</span>
</a>
<ul class="sub-menu">
<li><a href="map_vector.html">Vector Map</a></li>
<li><a href="map_google.html">Google Map</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-image"></i>
<span>Gallery</span>
</a>
<ul class="sub-menu">
<li><a href="gallery.html">Gallery v1</a></li>
<li><a href="gallery_v2.html">Gallery v2</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-cogs"></i>
<span>Page Options</span>
</a>
<ul class="sub-menu">
<li><a href="page_blank.html">Blank Page</a></li>
<li><a href="page_with_footer.html">Page with Footer</a></li>
<li><a href="page_without_sidebar.html">Page without Sidebar</a></li>
<li><a href="page_with_right_sidebar.html">Page with Right Sidebar</a></li>
<li><a href="page_with_minified_sidebar.html">Page with Minified Sidebar</a></li>
<li><a href="page_with_two_sidebar.html">Page with Two Sidebar</a></li>
<li><a href="page_with_line_icons.html">Page with Line Icons</a></li>
<li><a href="page_with_ionicons.html">Page with Ionicons</a></li>
<li><a href="page_full_height.html">Full Height Content</a></li>
<li><a href="page_with_wide_sidebar.html">Page with Wide Sidebar</a></li>
<li><a href="page_with_light_sidebar.html">Page with Light Sidebar</a></li>
<li><a href="page_with_mega_menu.html">Page with Mega Menu</a></li>
<li><a href="page_with_top_menu.html">Page with Top Menu</a></li>
<li><a href="page_with_boxed_layout.html">Page with Boxed Layout</a></li>
<li><a href="page_with_mixed_menu.html">Page with Mixed Menu</a></li>
<li><a href="page_boxed_layout_with_mixed_menu.html">Boxed Layout with Mixed Menu</a></li>
<li><a href="page_with_transparent_sidebar.html">Page with Transparent Sidebar</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-gift"></i>
<span>Extra</span>
</a>
<ul class="sub-menu">
<li><a href="extra_timeline.html">Timeline</a></li>
<li><a href="extra_coming_soon.html">Coming Soon Page</a></li>
<li><a href="extra_search_results.html">Search Results</a></li>
<li><a href="extra_invoice.html">Invoice</a></li>
<li><a href="extra_404_error.html">404 Error Page</a></li>
<li><a href="extra_profile.html">Profile Page</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-key"></i>
<span>Login & Register</span>
</a>
<ul class="sub-menu">
<li><a href="login.html">Login</a></li>
<li><a href="login_v2.html">Login v2</a></li>
<li><a href="login_v3.html">Login v3</a></li>
<li><a href="register_v3.html">Register v3</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-cubes"></i>
<span>Version <span class="label label-theme m-l-5">NEW</span></span>
</a>
<ul class="sub-menu">
<li><a href="javascript:;">HTML</a></li>
<li><a href="../ajax/index.html">AJAX</a></li>
<li><a href="../angularjs/index.html">ANGULAR JS</a></li>
<li><a href="../angularjs6/index.html">ANGULAR JS 6 <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="javascript:alert('Laravel Preview is not available on our demo site.')">LARAVEL <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="../vuejs/index.html">VUE JS <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="../reactjs/index.html">REACT JS <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="../material/index.html">MATERIAL DESIGN</a></li>
<li><a href="../apple/index.html">APPLE DESIGN</a></li>
<li><a href="../transparent/index.html">TRANSPARENT DESIGN <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
<li><a href="../facebook/index.html">FACEBOOK DESIGN <i class="fa fa-paper-plane text-theme m-l-5"></i></a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-medkit"></i>
<span>Helper</span>
</a>
<ul class="sub-menu">
<li><a href="helper_css.html">Predefined CSS Classes</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-align-left"></i>
<span>Menu Level</span>
</a>
<ul class="sub-menu">
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
Menu 1.1
</a>
<ul class="sub-menu">
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
Menu 2.1
</a>
<ul class="sub-menu">
<li><a href="javascript:;">Menu 3.1</a></li>
<li><a href="javascript:;">Menu 3.2</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu 2.2</a></li>
<li><a href="javascript:;">Menu 2.3</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu 1.2</a></li>
<li><a href="javascript:;">Menu 1.3</a></li>
</ul>
</li>
<!-- begin sidebar minify button -->
<li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
<!-- end sidebar minify button -->
</ul>
<!-- end sidebar nav -->
</div>
<!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
<div id="content" class="content">
<h1>Hello</h1>
</div>
</div>
body,
html {
height: 100%
}
body {
background: #d9e0e7;
font-size: 12px;
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #707478;
line-height: 1.42857143;
font-smoothing: antialiased;
osx-font-smoothing: grayscale
}
.attached-document>li:before,
.bootstrap-calendar .calendar .icon-arrow-left,
.bootstrap-calendar .calendar .icon-arrow-right,
.bootstrap-datetimepicker-widget .glyphicon,
.bootstrap-timepicker-widget .glyphicon,
.combobox-container .glyphicon-remove,
.combobox-container .icon-remove:before,
.datepicker th.next,
.datepicker th.prev,
.editable-buttons .glyphicon,
.fc button .fc-icon,
.float-sub-menu li>a .caret:before,
.gallery .rating span.star,
.input-append .icon-eye-close,
.input-append .icon-eye-open,
.input-prepend .icon-eye-close,
.input-prepend .icon-eye-open,
.jstree-default .jstree-checked>.jstree-checkbox:after,
.jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:after,
.sidebar li>a .caret:before,
.simplecolorpicker.fontawesome span.color[data-selected]:after,
.simplecolorpicker.glyphicons span.color[data-selected]:after,
.sw-main>ul.step-anchor.nav-tabs>li.done>a .number:before,
.tagit .ui-icon-close:before,
.theme-panel .theme-list>li.active>a:before,
.top-menu li>a .caret,
.wysihtml5-toolbar .glyphicon,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc_disabled:after {
font-family: Font Awesome\ 5 Free, Font Awesome\ 5 Pro, FontAwesome!important;
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto
}
.spinner-small {
border: 2px solid rgba(0, 0, 0, .05);
border-top: 2px solid #24B498;
height: 30px;
width: 30px;
margin: -15px 0 0 -15px
}
.header {
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 1020;
margin-bottom: 0;
padding: 0;
transition: box-shadow .2s linear
}
.header:after,
.header:before {
content: '';
display: table;
clear: both
}
.header .navbar-toggle {
position: relative;
float: right;
padding: 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: none;
border-radius: 4px;
outline: 0
}
.header .navbar-toggle:focus,
.header .navbar-toggle:hover {
background: 0 0!important;
opacity: .6
}
.header .navbar-toggle.pull-left {
margin-left: 15px;
margin-right: 0
}
.header .navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px
}
.header .navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px
}
.header .navbar-header:after,
.header .navbar-header:before {
content: '';
display: table;
clear: both
}
.header .navbar-brand {
float: left;
margin-right: 10px;
padding: 10px 20px;
height: 50px;
width: 220px;
font-weight: 100;
font-size: 18px;
line-height: 30px;
text-decoration: none
}
.header .navbar-logo {
float: left;
margin-right: 10px;
margin-top: 5px;
background: #00acac;
border: 10px solid transparent;
border-color: transparent rgba(0, 0, 0, .15) rgba(0, 0, 0, .3);
position: relative;
overflow: hidden;
border-radius: 4px
}
.header .navbar {
border: none;
border-radius: 0;
box-shadow: none
}
.header .navbar-nav {
list-style-type: none;
margin: 0;
padding: 0;
display: block
}
.header .navbar-nav>li {
float: left;
position: relative
}
.header .navbar-nav>li.divider {
height: 34px;
margin-top: 10px;
background: #e2e7eb;
width: 1px
}
.header .navbar-nav>li .dropdown-toggle,
.header .navbar-nav>li>a {
display: block;
text-decoration: none;
line-height: 20px;
padding: 15px;
border: none
}
.header .navbar-nav>li>a:focus,
.header .navbar-nav>li>a:hover {
opacity: .6
}
.header .navbar-nav>li .dropdown-toggle .label,
.header .navbar-nav>li>a .label {
position: absolute;
top: 8px;
right: 5px;
display: block;
background: #00acac;
line-height: 12px;
font-weight: 600;
color: #fff;
padding: .3em .6em;
border-radius: 20px
}
.header .navbar-nav>li>a>i {
top: 1px;
position: relative;
font-size: 16px
}
.header .navbar-nav>li>a.icon i {
font-size: 24px;
height: 24px;
margin: -2px 0;
display: block
}
.header .navbar-nav>.open>a,
.header .navbar-nav>.open>a:focus,
.header .navbar-nav>.open>a:hover {
background: 0 0!important;
color: #333;
opacity: 1
}
.header .navbar-nav .dropdown-toggle:after {
display: none
}
.header .navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-top: 1px solid #f2f3f4;
box-shadow: 0 13px 25px -2px rgba(0, 0, 0, .2);
border-top-left-radius: 0;
border-top-right-radius: 0
}
.header .navbar-nav>li>.dropdown-menu.media-list .media-heading {
font-weight: 600;
margin: 0;
line-height: 16px;
font-size: 12px
}
.header .navbar-form {
padding: 0 15px;
margin: 9px 0
}
.header .navbar-form .form-group {
margin: 0
}
.header .navbar-form .btn-search {
position: absolute;
right: 15px;
top: 9px;
height: 32px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
background: 0 0;
border-radius: 0 30px 30px 0
}
.header .navbar-form .btn-search>i[class*=ion-] {
font-size: 22px;
display: block
}
.header .navbar-form .form-control {
width: 220px;
padding: 5px 15px;
height: 32px;
background: #f2f3f4;
border-color: #f2f3f4;
border-radius: 30px
}
@keyframes expand {
from {
width: 220px
}
to {
width: 300px
}
}
@-webkit-keyframes expand {
from {
width: 220px
}
to {
width: 300px
}
}
.header .navbar-form .form-control:focus {
width: 300px;
border-color: #f2f3f4;
box-shadow: none;
animation: expand .2s;
animation: expand .2s
}
.header .navbar-user .image,
.header .navbar-user .image.image-icon,
.header .navbar-user img {
width: 30px;
margin: -5px 10px -5px 0;
border-radius: 30px;
height: 30px;
float: left
}
.fade .navbar-form .form-control {
animation: none
}
.header .navbar-user .image {
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.header .navbar-user .image.image-icon {
text-align: center;
font-size: 22px;
line-height: 40px;
overflow: hidden
}
.header .navbar-user .image.im .navbar-header.navbar-header-without-bg .navbar-brand {
background: 0 0!important
}
.navbar-language .flag-icon {
font-size: 15px;
margin: 2px 7px 0;
float: left
}
.header.navbar-default {
background: #fff
}
.header.navbar-default .brand,
.header.navbar-default .navbar-brand {
color: #333
}
.header.navbar-default .navbar-toggle .icon-bar {
background: #2d353c
}
.header.navbar-default .navbar-nav>li .dropdown-toggle,
.header.navbar-default .navbar-nav>li>a {
color: #585663
}
.header.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #333
}
.header.navbar-inverse {
background: #1a2229
}
.header.navbar-inverse .navbar-toggle .icon-bar {
background: #585d61
}
.header.navbar-inverse .navbar-brand,
.header.navbar-inverse .navbar-nav>li .dropdown-toggle,
.header.navbar-inverse .navbar-nav>li>a {
color: #a8acb1
}
.header.navbar-inverse .navbar-nav>li.divider {
background: #3F4B55
}
.header.navbar-inverse .navbar-form {
margin: 10px 0
}
.header.navbar-inverse .navbar-form .form-control,
.header.navbar-inverse .navbar-form .form-control:focus {
background: #585d62;
border-color: #585d62;
color: #fff;
height: 30px
}
.header.navbar-inverse .navbar-form .form-control::input-placeholder {
color: #a8acb1
}
.header.navbar-inverse .navbar-form .form-control::placeholder {
color: #a8acb1
}
.header.navbar-inverse .navbar-form .form-control:input-placeholder {
color: #a8acb1
}
.header.navbar-inverse .navbar-form .form-control:placeholder {
color: #a8acb1
}
.header.navbar-inverse .navbar-form .btn-search {
color: #a8acb1
}
.dropdown.dropdown-lg,
.header .dropdown.dropdown-lg {
position: static
}
.dropdown-menu.dropdown-menu-lg {
left: 20px;
right: 20px;
padding: 20px
}
.dropdown-header {
font-size: 14px;
font-weight: 700;
color: #242a30;
padding: 0;
margin: 0 0 10px
}
.dropdown-menu.dropdown-menu-lg .nav>li>a {
padding: 0;
background: 0 0;
line-height: 24px
}
.navbar-default .navbar-nav>.active.open>a,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background: #f4f6f7!important;
opacity: 1
}
.sidebar,
.sidebar-bg {
background: #2d353c;
width: 220px;
left: 0;
top: 0;
bottom: 0
}
.sidebar {
position: absolute;
z-index: 1010;
transform: translateZ(0);
transform: translateZ(0)
}
.sidebar-bg {
position: fixed;
z-index: 1000
}
.sidebar .nav {
display: block
}
.sidebar .nav>li {
position: relative
}
.sidebar .nav>li>a {
padding: 7px 20px;
line-height: 20px;
color: #a8acb1;
display: block;
text-decoration: none
}
.sidebar .nav>li>a:focus,
.sidebar .nav>li>a:hover {
background: 0 0;
color: #fff
}
.sidebar .nav>li:after,
.sidebar .nav>li:before,
.sidebar .nav>li>a:after,
.sidebar .nav>li>a:before {
content: '';
clear: both;
display: table
}
.sidebar .nav>li>a i {
float: left;
margin-right: 10px;
width: 14px;
text-align: center;
line-height: 20px;
font-size: 14px
}
.sidebar .nav>li>a i[class^=ion-] {
margin-right: 8px;
width: 18px;
font-size: 18px;
margin-left: -2px
}
.sidebar .nav>li>a .icon-img {
float: left;
margin-right: 10px;
margin-top: 3px;
width: 14px;
height: 14px;
overflow: hidden;
border-radius: 3px
}
.sidebar .nav>li>a .icon-img img {
display: block
}
.sidebar .nav>li>a .badge {
margin-top: 1px;
padding: 3px 8px;
background: #1b1f24;
font-weight: 600;
font-size: 10px
}
.sidebar .nav>li.active>a {
position: relative;
z-index: 10
}
.sidebar .nav>li.active>a,
.sidebar .nav>li.active>a:focus,
.sidebar .nav>li.active>a:hover {
color: #fff;
background: #242a31
}
.sidebar .nav>li.active>a i {
color: #00acac
}
.sidebar .nav>li.active>a .badge.badge-success,
.sidebar .nav>li.active>a .label.label-success {
background: #008a8a
}
.sidebar .nav>li.nav-header {
margin: 0;
padding: 15px 20px 3px;
line-height: 20px;
font-size: 11px;
color: #889097;
font-weight: 600
}
.sidebar .nav>li.nav-header a {
padding: 0;
margin: 0;
display: inline
}
.sidebar .nav>li.nav-header a:focus,
.sidebar .nav>li.nav-header a:hover {
background: 0 0;
color: #fff
}
.sidebar .nav>li.nav-header a i {
float: none;
margin: 0
}
.sidebar .nav>li.nav-profile {
padding: 20px;
color: #fff;
background: #1a2229;
overflow: hidden
}
.sidebar .nav>li.nav-profile a {
padding: 0
}
.sidebar .nav>li.nav-profile>a {
margin: -20px;
padding: 20px;
display: block;
color: #fff
}
.sidebar .nav>li.nav-profile .image {
width: 34px;
height: 34px;
margin-bottom: 10px;
overflow: hidden;
border-radius: 50%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.sidebar .nav>li.nav-profile .image.image-icon i {
float: none;
line-height: 48px;
font-size: 24px;
text-align: center;
display: block;
width: auto;
margin: 0
}
.sidebar .nav>li.nav-profile .info {
font-size: 14px;
position: relative
}
.sidebar .nav>li.nav-profile .info .caret {
margin-top: 2px
}
.sidebar .nav>li.nav-profile .info small {
display: block;
color: rgba(255, 255, 255, .75);
font-size: 12px;
margin-bottom: -5px
}
.sidebar .nav>li.nav-profile .cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(images/cover-sidebar-user.jpg) no-repeat;
background-size: cover
}
.sidebar .nav>li.nav-profile .cover.with-shadow:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all .2s linear;
background: rgba(26, 34, 41, .75)
}
.sidebar .nav>li.nav-profile a:focus .cover.with-shadow:before,
.sidebar .nav>li.nav-profile a:hover .cover.with-shadow:before {
opacity: .75
}
.sidebar .nav>li.nav-widget {
padding: 10px 20px
}
.sidebar .nav>li.nav-widget i {
margin-right: auto
}
.sidebar .nav.nav-profile {
padding: 0 0 5px;
border-bottom: 1px solid #242a31;
display: none
}
.sidebar .nav.nav-profile.active {
display: block
}
.sidebar.sidebar-grid .nav>li>a {
border-bottom: 1px solid #46505a;
border-top: 1px solid #46505a
}
.sidebar.sidebar-grid .nav>li.active>a {
border-color: #242a31;
z-index: 10
}
.sidebar.sidebar-grid .nav>li.expand>a,
.sidebar.sidebar-grid .nav>li.expanding>a {
border-bottom-color: transparent
}
.sidebar.sidebar-grid .nav>li+li {
margin-top: -1px
}
.gradient-enabled .sidebar .nav>li.active>a .badge,
.gradient-enabled .sidebar .nav>li.active>a .label.label-theme {
background: rgba(0, 0, 0, .4)
}
.float-sub-menu li>a .caret,
.sidebar li>a .caret {
display: block;
float: right;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 11px;
border: none
}
.float-sub-menu li>a .caret:before,
.sidebar li>a .caret:before {
content: '\f054';
display: block;
text-align: center;
transition: all .2s linear;
opacity: .5
}
.float-sub-menu li.active>a .caret:before,
.float-sub-menu li.expand>a .caret:before,
.float-sub-menu li.expanding>a .caret:before,
.sidebar li.active>a .caret:before,
.sidebar li.expand>a .caret:before,
.sidebar li.expanding>a .caret:before {
opacity: 1;
transform: rotate(90deg)
}
.float-sub-menu li.closed>a .caret:before,
.float-sub-menu li.closing>a .caret:before,
.page-sidebar-minified .sidebar .caret:before,
.page-sidebar-minified .sidebar li.active .caret:before,
.page-sidebar-minified .sidebar li.expand .caret:before,
.page-sidebar-minified .sidebar li.expanding .caret:before,
.sidebar li.closed>a .caret:before,
.sidebar li.closing>a .caret:before {
transform: rotate(0)
}
.sidebar .sub-menu {
list-style-type: none;
padding: 5px 0 10px 39px;
margin: 0;
position: relative;
display: none
}
.sidebar .sub-menu>li {
position: relative
}
.sidebar .sub-menu>li:after,
.sidebar .sub-menu>li:before {
position: absolute;
content: ''
}
.sidebar .sub-menu>li:before {
left: -13px;
top: 0;
bottom: 0;
width: 2px
}
.sidebar .sub-menu>li:after {
left: 0;
width: 6px;
height: 6px;
border: 1px solid #889097;
top: 11px;
border-radius: 4px;
margin-top: -2px;
z-index: 10;
background: #2d353c
}
.sidebar .sub-menu>li:first-child:before {
top: -14px
}
.sidebar .sub-menu>li:first-child:last-child:before {
height: 27px
}
.sidebar .sub-menu>li:last-child:before {
bottom: auto;
height: 13px
}
.sidebar .sub-menu>li.has-sub>a:before,
.sidebar .sub-menu>li:before,
.sidebar .sub-menu>li>a:after {
background: #242a31
}
.sidebar .sub-menu>li.active:after {
border-color: #00acac
}
.sidebar .sub-menu>li>a {
padding: 3px 20px 3px 15px;
display: block;
color: #889097;
text-decoration: none;
position: relative
}
.sidebar .sub-menu>li.active>a,
.sidebar .sub-menu>li.active>a:focus,
.sidebar .sub-menu>li.active>a:hover,
.sidebar .sub-menu>li>a:focus,
.sidebar .sub-menu>li>a:hover {
color: #fff
}
.sidebar .sub-menu>li>a:after {
content: '';
position: absolute;
left: -11px;
top: 11px;
width: 11px;
height: 2px
}
.sidebar .sub-menu>li.has-sub>a:before {
content: '';
position: absolute;
left: 2px;
top: 11px;
bottom: 11px;
width: 2px
}
.sidebar .sub-menu .sub-menu {
padding: 0 0 0 15px;
background: 0 0
}
.sidebar .nav>li li.has-sub.active>a {
color: #889097
}
.sidebar .has-sub.active>.sub-menu {
display: block
}
.sidebar .nav .sub-menu>li>a .caret {
margin-top: -1px;
left: -5px;
color: #a3a7ac
}
.page-sidebar-minified .sidebar {
width: 60px;
position: absolute
}
.page-sidebar-minified .sidebar-bg {
width: 60px
}
.page-sidebar-minified .content {
margin-left: 60px
}
.page-sidebar-minified .footer {
margin-left: 85px
}
.page-sidebar-minified.page-sidebar-fixed .sidebar {
position: fixed
}
.page-sidebar-minified:not(.page-sidebar-fixed) .sidebar .slimScrollDiv,
.page-sidebar-minified:not(.page-sidebar-fixed) .sidebar .slimScrollDiv>div {
overflow: visible!important;
height: auto!important
}
.page-sidebar-minified .sidebar.sidebar-right .slimScrollDiv,
.page-sidebar-minified .sidebar.sidebar-right .slimScrollDiv>div,
.page-sidebar-minified.page-sidebar-fixed .sidebar .slimScrollDiv,
.page-sidebar-minified.page-sidebar-fixed .sidebar .slimScrollDiv>div {
overflow: hidden!important
}
.page-sidebar-minified .sidebar .nav>li>a {
padding: 10px 20px
}
.page-sidebar-minified .sidebar .nav-header,
.page-sidebar-minified .sidebar .nav-profile,
.page-sidebar-minified .sidebar .nav>li>a>span {
display: none
}
.page-sidebar-minified .sidebar .nav-profile.expand {
display: none!important
}
.page-sidebar-minified .sidebar .caret {
position: absolute;
top: 10px;
right: 5px
}
.page-sidebar-minified .sidebar .nav>li>a>i {
margin: 0
}
.page-sidebar-minified .sidebar .nav li.has-sub>.sub-menu {
position: absolute;
left: 100%;
top: 0;
width: 220px;
display: none;
padding: 10px 0 10px 30px;
margin: 0;
background: #242a31
}
.page-sidebar-minified .sidebar-minify-btn i:before {
content: '\f101'
}
.page-sidebar-minified.page-with-right-sidebar .content {
margin-right: 60px;
margin-left: 0
}
.page-sidebar-minified.page-with-right-sidebar .footer {
margin-right: 90px;
margin-left: 30px
}
.page-sidebar-minified.page-with-right-sidebar .sub-menu {
left: auto!important;
right: 100%
}
.page-sidebar-minified.page-with-right-sidebar .nav>li.has-sub>a .caret {
position: absolute;
left: 0
}
.page-sidebar-minified.page-with-right-sidebar .nav>li.has-sub>a .caret:before {
content: '\f104'
}
.page-sidebar-minified.page-with-right-sidebar .sidebar .sub-menu .caret {
left: 0;
top: 2px;
border-left: 4px solid transparent!important;
border-right: 4px solid!important
}
.page-sidebar-minified.page-with-right-sidebar .sidebar .nav li.has-sub>.sub-menu {
padding: 10px 30px 10px 0
}
.page-sidebar-minified.page-with-right-sidebar .sidebar .sub-menu:before {
right: 26px;
left: auto
}
.page-sidebar-minified.page-with-right-sidebar .sidebar .sub-menu>li>a:before {
right: 0;
left: auto;
margin-right: -6px;
margin-left: 0
}
.page-sidebar-minified.page-with-right-sidebar .sidebar-minify-btn i:before {
content: '\f100'
}
.page-sidebar-minified .sidebar .slimScrollBar,
.page-sidebar-minified .sidebar .slimScrollRail {
display: none!important
}
.page-sidebar-minified .sidebar.sidebar-right .slimScrollBar {
display: block!important
}
.sidebar-minify-btn {
margin: 10px 0;
float: right;
padding: 5px 20px 5px 10px!important;
background: #1b1f24;
color: #fff;
border-radius: 20px 0 0 20px
}
.sidebar-minify-btn:focus,
.sidebar-minify-btn:hover {
background: #575d63!important
}
.sidebar-minify-btn i {
margin: 0!important;
color: #fff
}
.page-with-light-sidebar .sidebar,
.page-with-light-sidebar .sidebar-bg {
background: #fff
}
.flat-black .page-with-light-sidebar .sidebar .nav>li>a,
.page-with-light-sidebar .sidebar .nav>li>a {
color: #575d63;
font-weight: 600
}
.flat-black .page-with-light-sidebar .sidebar .nav>li>a:focus,
.flat-black .page-with-light-sidebar .sidebar .nav>li>a:hover,
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li>a:focus,
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li>a:hover {
color: #333
}
.page-with-light-sidebar .sidebar .nav>li.nav-profile a,
.page-with-light-sidebar .sidebar .nav>li.nav-profile.active a,
.page-with-light-sidebar .sidebar .nav>li.nav-profile.active a:focus,
.page-with-light-sidebar .sidebar .nav>li.nav-profile.active a:hover {
color: #fff!important
}
.page-sidebar-minified.page-with-light-sidebar .sidebar .nav li.has-sub>.sub-menu,
.page-sidebar-minified.page-with-light-sidebar .sidebar .nav>li.has-sub:focus>a,
.page-sidebar-minified.page-with-light-sidebar .sidebar .nav>li.has-sub:hover>a,
.page-with-light-sidebar .sidebar .nav>li .sub-menu {
background: 0 0;
color: #2d353c
}
.page-with-light-sidebar .sidebar .nav.nav-profile {
border-bottom: 1px solid #B1B9C0
}
.page-with-light-sidebar .sidebar .nav>li .sub-menu:before {
background: #B1B9C0
}
.page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn,
.page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn:focus,
.page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn:hover,
.page-with-light-sidebar .sidebar .nav>li.active.expand>a,
.page-with-light-sidebar .sidebar .nav>li.active>a,
.page-with-light-sidebar .sidebar .nav>li.active>a:focus,
.page-with-light-sidebar .sidebar .nav>li.active>a:hover,
.page-with-light-sidebar.page-sidebar-minified .sidebar .nav>li.active:focus>a,
.page-with-light-sidebar.page-sidebar-minified .sidebar .nav>li.active:hover>a,
.page-with-light-sidebar.page-sidebar-minified .sidebar .nav>li.active>a {
color: #2d353c;
background: #E6E9EA;
font-weight: 600
}
.flat-black .page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn,
.flat-black .page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn:focus,
.flat-black .page-with-light-sidebar .sidebar .nav>li .sidebar-minify-btn:hover,
.flat-black .page-with-light-sidebar .sidebar .nav>li.active.expand>a,
.flat-black .page-with-light-sidebar .sidebar .nav>li.active>a,
.flat-black .page-with-light-sidebar .sidebar .nav>li.active>a:focus,
.flat-black .page-with-light-sidebar .sidebar .nav>li.active>a:hover {
background: #e0e0e0
}
.page-with-light-sidebar .sidebar .nav>li.expand>a,
.page-with-light-sidebar .sidebar .nav>li>a:focus,
.page-with-light-sidebar .sidebar .nav>li>a:hover {
background: 0 0;
color: #2d353c
}
.page-with-light-sidebar .sidebar .nav>li .sub-menu>li.active>a:before {
color: #575d63
}
.page-with-light-sidebar .sidebar .sub-menu>li>a {
font-weight: 400
}
.page-with-light-sidebar .sidebar .sub-menu>li.active>a {
font-weight: 600
}
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li.active>a,
.page-with-light-sidebar .sidebar .sub-menu>li.active>a,
.page-with-light-sidebar .sidebar .sub-menu>li.active>a:focus,
.page-with-light-sidebar .sidebar .sub-menu>li.active>a:hover,
.page-with-light-sidebar .sidebar .sub-menu>li>a:focus,
.page-with-light-sidebar .sidebar .sub-menu>li>a:hover {
color: #333
}
.flat-black .page-with-light-sidebar .sidebar .nav>li.nav-profile,
.flat-black .page-with-light-sidebar .sidebar .sub-menu,
.flat-black .page-with-light-sidebar.page-sidebar-minified .sidebar .nav li.has-sub>.sub-menu {
background: #f5f5f5
}
.page-with-light-sidebar .sidebar .sub-menu>li.has-sub>a:before,
.page-with-light-sidebar .sidebar .sub-menu>li:before,
.page-with-light-sidebar .sidebar .sub-menu>li>a:after {
background: #e7e9ea
}
.page-with-light-sidebar .sidebar .sub-menu>li:after {
background: #fff
}
.page-with-light-sidebar .sidebar .slimScrollBar {
background: #000!important
}
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li.has-sub>a:before,
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li:before,
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li>a:after {
background: #eee
}
.flat-black .page-with-light-sidebar .sidebar .sub-menu>li:after {
background: #fff
}
.flat-black .page-with-light-sidebar .sidebar .slimScrollBar {
background: #000!important
}
.page-with-wide-sidebar .sidebar,
.page-with-wide-sidebar .sidebar+.sidebar-bg,
.page-with-wide-sidebar.page-sidebar-minified .sidebar-bg.sidebar-right,
.page-with-wide-sidebar.page-sidebar-minified .sidebar.sidebar-right {
width: 250px
}
.page-with-wide-sidebar .content {
margin-left: 250px
}
.page-with-wide-sidebar.page-with-right-sidebar:not(.page-sidebar-minified) .content {
margin-right: 250px;
margin-left: 0
}
.page-with-wide-sidebar.page-with-two-sidebar .content {
margin-left: 250px;
margin-right: 250px
}
.page-with-wide-sidebar.page-sidebar-minified .sidebar,
.page-with-wide-sidebar.page-sidebar-minified .sidebar+.sidebar-bg {
width: 60px
}
.page-with-wide-sidebar.page-sidebar-minified:not(.page-with-right-sidebar) .content {
margin-left: 60px
}
.page-with-wide-sidebar .footer {
margin-left: 280px
}
.page-with-wide-sidebar.page-with-right-sidebar:not(.page-sidebar-minified) .footer {
margin-left: 30px;
margin-right: 280px
}
.sidebar.sidebar-transparent {
background: 0 0
}
.sidebar.sidebar-transparent .nav>li.nav-profile,
.sidebar.sidebar-transparent .nav>li.nav-profile.active {
background: rgba(0, 0, 0, .25)
}
.sidebar.sidebar-transparent .nav>li.nav-profile .cover,
.sidebar.sidebar-transparent .nav>li.nav-profile .cover.with-shadow:before,
.sidebar.sidebar-transparent .nav>li.nav-profile a:focus,
.sidebar.sidebar-transparent .nav>li.nav-profile a:hover,
.sidebar.sidebar-transparent .sub-menu {
background: 0 0
}
.page-sidebar-toggled.page-sidebar-minified .sidebar.sidebar-transparent+.sidebar-bg,
.sidebar.sidebar-transparent+.sidebar-bg {
background: url(images/cover-sidebar.jpg);
background-size: cover
}
.sidebar.sidebar-transparent+.sidebar-bg:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(45, 53, 60, .75)
}
.page-sidebar-minified .sidebar.sidebar-transparent .nav>li.has-sub .sub-menu {
background: rgba(26, 34, 41, .85)
}
.sidebar.sidebar-transparent .nav>li.nav-header {
color: #fff
}
.page-sidebar-minified .sidebar.sidebar-transparent .nav>li.has-sub:focus>a,
.page-sidebar-minified .sidebar.sidebar-transparent .nav>li.has-sub:hover>a,
.sidebar.sidebar-transparent .nav>li.expand>a,
.sidebar.sidebar-transparent .nav>li>a:focus,
.sidebar.sidebar-transparent .nav>li>a:hover {
background: 0 0;
color: #fff
}
.sidebar.sidebar-transparent .has-sub.active>.sub-menu {
overflow: hidden
}
.sidebar.sidebar-transparent .nav>li.active>a,
.sidebar.sidebar-transparent .nav>li.active>a:focus,
.sidebar.sidebar-transparent .nav>li.active>a:hover,
.sidebar.sidebar-transparent .sub-menu>li.has-sub>a:before,
.sidebar.sidebar-transparent .sub-menu>li:before,
.sidebar.sidebar-transparent .sub-menu>li>a:after {
background: rgba(0, 0, 0, .3)
}
.page-with-right-sidebar .sidebar {
text-align: right
}
.page-with-right-sidebar .sidebar .nav>li>a .icon-img,
.page-with-right-sidebar .sidebar .nav>li>a i {
float: right;
margin-left: 10px;
margin-right: 0
}
.page-with-right-sidebar .sidebar .sub-menu {
padding-left: 0;
padding-right: 39px
}
.page-with-right-sidebar .sidebar .sub-menu>li:before {
left: auto;
right: -13px
}
.page-with-right-sidebar .sidebar .sub-menu>li:after {
left: auto;
right: 0
}
.page-with-right-sidebar .sidebar .sub-menu>li>a {
padding-left: 20px;
padding-right: 15px
}
.page-with-right-sidebar .sidebar .sub-menu>li>a:after {
left: auto;
right: -11px
}
.page-with-right-sidebar .sidebar .nav>li.nav-profile .image {
margin-left: auto;
margin-right: 0
}
.page-with-right-sidebar .sidebar .sub-menu .sub-menu {
padding-left: 0;
padding-right: 15px
}
.page-with-right-sidebar.page-sidebar-minified .sidebar li>a .caret {
margin-left: 5px
}
.page-with-right-sidebar.page-sidebar-minified .sidebar li>a .caret:before {
transform: none!important
}
.page-with-right-sidebar .float-sub-menu li:after,
.page-with-right-sidebar .float-sub-menu-arrow,
.page-with-right-sidebar .float-sub-menu-line {
left: auto;
right: 0
}
.page-with-right-sidebar .float-sub-menu li.active>a .caret:before,
.page-with-right-sidebar .float-sub-menu li.expand>a .caret:before,
.page-with-right-sidebar .float-sub-menu li.expanding>a .caret:before,
.page-with-right-sidebar .sidebar li.active>a .caret:before,
.page-with-right-sidebar .sidebar li.expand>a .caret:before,
.page-with-right-sidebar .sidebar li.expanding>a .caret:before {
transform: rotate(-90deg)
}
.page-with-right-sidebar .float-sub-menu {
padding-left: 0;
padding-right: 39px;
text-align: right
}
.page-with-right-sidebar .float-sub-menu li>a {
padding-left: 15px;
padding-right: 20px
}
.page-with-right-sidebar .float-sub-menu li>a .caret,
.page-with-right-sidebar .sidebar li>a .caret {
float: left;
margin-left: -5px;
margin-right: 2px
}
.page-with-right-sidebar .float-sub-menu .sub-menu {
padding-left: 0;
padding-right: 15px
}
.page-with-right-sidebar .float-sub-menu li>a .caret:before,
.page-with-right-sidebar .sidebar li>a .caret:before {
content: '\f053'
}
.page-with-right-sidebar .float-sub-menu li:before {
right: -13px;
left: auto
}
.page-with-right-sidebar .float-sub-menu li>a:after {
right: -11px;
left: auto
}
.float-sub-menu-container {
position: fixed;
width: 220px;
margin: 0;
background: #242a31;
z-index: 1020
}
.float-sub-menu {
padding: 9px 0 9px 39px;
margin: 0;
list-style-type: none
}
.float-sub-menu .sub-menu {
display: none;
list-style-type: none
}
.float-sub-menu .active>.sub-menu {
display: block
}
.float-sub-menu li {
position: relative
}
.float-sub-menu li:first-child:before {
top: -14px
}
.float-sub-menu>li:first-child:before {
top: 11px
}
.float-sub-menu-arrow,
.float-sub-menu-line {
top: 20px;
background: #2e353c;
position: absolute
}
.float-sub-menu-arrow {
left: 0;
width: 28px;
height: 2px
}
.float-sub-menu-line {
left: 26px;
width: 2px
}
.float-sub-menu .float-sub-menu-arrow:after,
.float-sub-menu .float-sub-menu-arrow:before {
display: none!important
}
.float-sub-menu li.has-sub>a:before,
.float-sub-menu li:before,
.float-sub-menu li>a:after {
background: #2d353c
}
.float-sub-menu li:before {
content: '';
position: absolute;
left: -13px;
top: 0;
bottom: 0;
width: 2px
}
.float-sub-menu li.has-sub>a:before,
.float-sub-menu li:after,
.float-sub-menu li>a:after {
content: '';
position: absolute;
top: 11px
}
.float-sub-menu li:last-child:before {
bottom: auto;
height: 13px
}
.float-sub-menu>li:first-child:last-child:before {
height: 0!important
}
.float-sub-menu li:first-child:last-child:before {
height: 27px
}
.float-sub-menu li:after {
left: 0;
width: 6px;
height: 6px;
border: 1px solid #889097;
border-radius: 4px;
margin-top: -2px;
z-index: 10;
background: #242a31
}
.float-sub-menu li.has-sub>a:before {
left: 2px;
bottom: 11px;
width: 2px
}
.float-sub-menu li>a:after {
left: -11px;
width: 11px;
height: 2px
}
.float-sub-menu .sub-menu {
padding: 0 0 0 15px;
background: 0 0
}
.float-sub-menu li>a {
line-height: 18px;
padding: 3px 20px 3px 15px;
display: block;
color: #889097;
text-decoration: none;
position: relative
}
.float-sub-menu li.active>a,
.float-sub-menu li.active>a:focus,
.float-sub-menu li.active>a:hover,
.float-sub-menu li>a:focus,
.float-sub-menu li>a:hover {
color: #fff
}
.float-sub-menu li.active:after {
border-color: #00acac
}
.float-sub-menu li>a .caret {
margin-top: -1px;
color: #a3a7ac
}
.content {
margin-left: 220px;
padding: 20px 30px;
}
var floatSubMenuTimeout, targetFloatMenu, handleSlimScroll = function() {
"use strict";
$.when($("[data-scrollbar=true]").each(function() {
generateSlimScroll($(this))
})).done(function() {
$('[data-scrollbar="true"]').mouseover()
})
},
handleSidebarMenu = function() {
"use strict";
var t = $(".sidebar").attr("data-disable-slide-animation") ? 0 : 250;
$(".sidebar .nav > .has-sub > a").click(function() {
var a = $(this).next(".sub-menu"),
e = $(".sidebar .nav > li.has-sub > .sub-menu").not(a);
0 === $(".page-sidebar-minified").length && ($(e).closest("li").addClass("closing"), $(e).slideUp(t, function() {
$(e).closest("li").addClass("closed").removeClass("expand closing")
}), $(a).is(":visible") ? $(a).closest("li").addClass("closing").removeClass("expand") : $(a).closest("li").addClass("expanding").removeClass("closed"), $(a).slideToggle(t, function() {
var e = $(this).closest("li");
$(a).is(":visible") ? ($(e).addClass("expand"), $(e).removeClass("closed")) : ($(e).addClass("closed"), $(e).removeClass("expand")), $(e).removeClass("expanding closing")
}))
}), $(".sidebar .nav > .has-sub .sub-menu li.has-sub > a").click(function() {
if (0 === $(".page-sidebar-minified").length) {
var a = $(this).next(".sub-menu");
$(a).is(":visible") ? $(a).closest("li").addClass("closing").removeClass("expand") : $(a).closest("li").addClass("expanding").removeClass("closed"), $(a).slideToggle(t, function() {
var e = $(this).closest("li");
$(a).is(":visible") ? ($(e).addClass("expand"), $(e).removeClass("closed")) : ($(e).addClass("closed"), $(e).removeClass("expand")), $(e).removeClass("expanding closing")
})
}
})
},
handleMobileSidebarToggle = function() {
var n = !1;
$(".sidebar").bind("click touchstart", function(e) {
0 !== $(e.target).closest(".sidebar").length ? n = !0 : (n = !1, e.stopPropagation())
}), $(document).bind("click touchstart", function(e) {
0 === $(e.target).closest(".sidebar").length && (n = !1), 0 !== $(e.target).closest("#float-sub-menu").length && (n = !0), e.isPropagationStopped() || !0 === n || ($("#page-container").hasClass("page-sidebar-toggled") && (n = !0, $("#page-container").removeClass("page-sidebar-toggled")), $(window).width() <= 767 && $("#page-container").hasClass("page-right-sidebar-toggled") && (n = !0, $("#page-container").removeClass("page-right-sidebar-toggled")))
}), $("[data-click=right-sidebar-toggled]").click(function(e) {
e.stopPropagation();
var a = "#page-container",
t = "page-right-sidebar-collapsed";
t = $(window).width() < 979 ? "page-right-sidebar-toggled" : t, $(a).hasClass(t) ? $(a).removeClass(t) : !0 !== n ? $(a).addClass(t) : n = !1, $(window).width() < 480 && $("#page-container").removeClass("page-sidebar-toggled"), $(window).trigger("resize")
}), $("[data-click=sidebar-toggled]").click(function(e) {
e.stopPropagation();
var a = "page-sidebar-toggled",
t = "#page-container";
$(t).hasClass(a) ? $(t).removeClass(a) : !0 !== n ? $(t).addClass(a) : n = !1, $(window).width() < 480 && $("#page-container").removeClass("page-right-sidebar-toggled")
})
},
handleSidebarMinify = function() {
$(document).on("click", "[data-click=sidebar-minify]", function(e) {
e.preventDefault();
var a = "page-sidebar-minified",
t = "#page-container";
$(t).hasClass(a) ? $(t).removeClass(a) : ($(t).addClass(a), /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && ($('#sidebar [data-scrollbar="true"]').css("margin-top", "0"), $('#sidebar [data-scrollbar="true"]').css("overflow-x", "scroll"))), $(window).trigger("resize")
})
},
handleLocalStorage = function() {
"use strict";
try {
if ("undefined" != typeof Storage && "undefined" != typeof localStorage) {
var e = window.location.href;
e = (e = e.split("?"))[0];
var a = localStorage.getItem(e);
if (a) {
a = JSON.parse(a);
var t = 0;
$.when($('.panel:not([data-sortable="false"])').parent('[class*="col-"]').each(function() {
var e = a[t],
o = $(this);
e && $.each(e, function(e, a) {
var t = $('[data-sortable-id="' + a.id + '"]').not('[data-init="true"]');
if (0 !== $(t).length) {
var n = $(t).clone();
$(t).remove(), $(o).append(n), $('[data-sortable-id="' + a.id + '"]').attr("data-init", "true")
}
}), t++
})).done(function() {
window.dispatchEvent(new CustomEvent("localstorage-position-loaded"))
})
}
} else alert("Your browser is not supported with the local storage")
} catch (e) {
console.log(e)
}
},
handleClearSidebarSelection = function() {
$(".sidebar .nav > li, .sidebar .nav .sub-menu").removeClass("expand").removeAttr("style")
},
handlePageScrollClass = function() {
$(window).on("scroll", function() {
handleCheckScrollClass()
}), handleCheckScrollClass()
},
handleMouseoverFloatSubMenu = function(e) {
clearTimeout(floatSubMenuTimeout)
},
handleMouseoutFloatSubMenu = function(e) {
floatSubMenuTimeout = setTimeout(function() {
$("#float-sub-menu").remove()
}, 150)
},
handleSidebarMinifyFloatMenu = function() {
$(document).on("click", "#float-sub-menu li.has-sub > a", function(e) {
var a = $(this).next(".sub-menu"),
t = $(a).closest("li"),
r = !1,
d = !1;
$(a).is(":visible") ? ($(t).addClass("closing"), r = !0) : ($(t).addClass("expanding"), d = !0), $(a).slideToggle({
duration: 250,
progress: function() {
var e = $("#float-sub-menu"),
a = $(e).height(),
t = $(e).offset(),
n = $(e).attr("data-offset-top"),
o = $(e).attr("data-menu-offset-top"),
i = t.top - $(window).scrollTop(),
s = $(window).height();
if (r && n < i && (i = n < i ? n : i, $("#float-sub-menu").css({
top: i + "px",
bottom: "auto"
}), $("#float-sub-menu-arrow").css({
top: "20px",
bottom: "auto"
}), $("#float-sub-menu-line").css({
top: "20px",
bottom: "auto"
})), d && s - i < a) {
var l = s - o - 22;
$("#float-sub-menu").css({
top: "auto",
bottom: 0
}), $("#float-sub-menu-arrow").css({
top: "auto",
bottom: l + "px"
}), $("#float-sub-menu-line").css({
top: "20px",
bottom: l + "px"
})
}
},
complete: function() {
$(a).is(":visible") ? $(t).addClass("expand") : $(t).addClass("closed"), $(t).removeClass("closing expanding")
}
})
}), $(".sidebar .nav > li.has-sub > a").hover(function() {
if ($("#page-container").hasClass("page-sidebar-minified")) {
clearTimeout(floatSubMenuTimeout);
var e = $(this).closest("li").find(".sub-menu").first();
if (targetFloatMenu == this && 0 !== $("#float-sub-menu").length) return;
targetFloatMenu = this;
var a = $(e).html();
if (a) {
var t = $("#sidebar").offset(),
n = $("#page-container").hasClass("page-with-right-sidebar") ? $(window).width() - t.left : t.left + 60,
o = $(e).height(),
i = $(this).offset().top - $(window).scrollTop(),
s = $("#page-container").hasClass("page-with-right-sidebar") ? "auto" : n,
l = $("#page-container").hasClass("page-with-right-sidebar") ? n : "auto",
r = $(window).height();
if (0 === $("#float-sub-menu").length ? (a = '<div class="float-sub-menu-container" id="float-sub-menu" data-offset-top="' + i + '" data-menu-offset-top="' + i + '" onmouseover="handleMouseoverFloatSubMenu(this)" onmouseout="handleMouseoutFloatSubMenu(this)">\t<div class="float-sub-menu-arrow" id="float-sub-menu-arrow"></div>\t<div class="float-sub-menu-line" id="float-sub-menu-line"></div>\t<ul class="float-sub-menu">' + a + "</ul></div>", $("#page-container").append(a)) : ($("#float-sub-menu").attr("data-offset-top", i), $("#float-sub-menu").attr("data-menu-offset-top", i), $(".float-sub-menu").html(a)), o < r - i) $("#float-sub-menu").css({
top: i,
left: s,
bottom: "auto",
right: l
}), $("#float-sub-menu-arrow").css({
top: "20px",
bottom: "auto"
}), $("#float-sub-menu-line").css({
top: "20px",
bottom: "auto"
});
else {
$("#float-sub-menu").css({
bottom: 0,
top: "auto",
left: s,
right: l
});
var d = r - i - 21;
$("#float-sub-menu-arrow").css({
top: "auto",
bottom: d + "px"
}), $("#float-sub-menu-line").css({
top: "20px",
bottom: d + "px"
})
}
} else $("#float-sub-menu").remove(), targetFloatMenu = ""
}
}, function() {
$("#page-container").hasClass("page-sidebar-minified") && (floatSubMenuTimeout = setTimeout(function() {
$("#float-sub-menu").remove(), targetFloatMenu = ""
}, 250))
})
},
CLEAR_OPTION = "",
handleSetPageOption = function(e) {
e.pageContentFullHeight && $("#page-container").addClass("page-content-full-height"), e.pageSidebarLight && $("#page-container").addClass("page-with-light-sidebar"), e.pageSidebarRight && $("#page-container").addClass("page-with-right-sidebar"), e.pageSidebarWide && $("#page-container").addClass("page-with-wide-sidebar"), e.pageSidebarMinified && $("#page-container").addClass("page-sidebar-minified"), e.pageSidebarTransparent && $("#sidebar").addClass("sidebar-transparent"), e.pageContentFullWidth && $("#content").addClass("content-full-width"), e.pageContentInverseMode && $("#content").addClass("content-inverse-mode"), e.pageBoxedLayout && $("body").addClass("boxed-layout"), e.clearOptionOnLeave && (CLEAR_OPTION = e)
},
handleClearPageOption = function(e) {
e.pageContentFullHeight && $("#page-container").removeClass("page-content-full-height"), e.pageSidebarLight && $("#page-container").removeClass("page-with-light-sidebar"), e.pageSidebarRight && $("#page-container").removeClass("page-with-right-sidebar"), e.pageSidebarWide && $("#page-container").removeClass("page-with-wide-sidebar"), e.pageSidebarMinified && $("#page-container").removeClass("page-sidebar-minified"), e.pageSidebarTransparent && $("#sidebar").removeClass("sidebar-transparent"), e.pageContentFullWidth && $("#content").removeClass("content-full-width"), e.pageContentInverseMode && $("#content").removeClass("content-inverse-mode"), e.pageBoxedLayout && $("body").removeClass("boxed-layout")
},
App = function() {
"use strict";
var a;
return {
init: function(e) {
e && (a = e), this.initLocalStorage(), this.initSidebar(), this.initTopMenu(), this.initComponent(), this.initThemePanel(), this.initPageLoad(), $(window).trigger("load"), a && a.ajaxMode && this.initAjax()
},
initSidebar: function() {
handleSidebarMenu(), handleMobileSidebarToggle(), handleSidebarMinify(), handleSidebarMinifyFloatMenu(), handleToggleNavProfile(), handleToggleNavbarSearch(), (!a || a && !a.disableSidebarScrollMemory) && handleSidebarScrollMemory()
},
initSidebarSelection: function() {
handleClearSidebarSelection()
},
initComponent: function() {
(!a || a && !a.disableDraggablePanel) && handleSlimScroll(), handleUnlimitedTabsRender(), handlePanelAction(), handleScrollToTopButton(), handleAfterPageLoadAddClass(), handlePageScrollClass(), 767 < $(window).width() && handelTooltipPopoverActivation()
},
initLocalStorage: function() {
(!a || a && !a.disableLocalStorage) && handleLocalStorage()
},
initAjax: function() {
handleAjaxMode(a), $.ajaxSetup({
cache: !0
})
},
scrollTop: function() {
$("html, body").animate({
scrollTop: $("body").offset().top
}, 0)
}
}
}();
$(document).ready(function() {
App.init();
Highlight.init();
});
This Pen doesn't use any external CSS resources.