Updates to control sidebar

This commit is contained in:
Abdullah Almsaeed 2015-03-28 20:39:26 -04:00
parent 4dacac85ec
commit 5e888faa31
23 changed files with 622 additions and 443 deletions

View file

@ -23,9 +23,20 @@
//Open state
&.control-sidebar-open {
.translate(0, 0);
.box-shadow(-1px 0 3px rgba(0,0,0,.2));
}
}
//Open without silde over content
.control-sidebar-open {
.control-sidebar {
.translate(0,0);
}
.content-wrapper,
.right-side,
.main-footer {
margin-right: @control-sidebar-width;
}
}
//Control sidebar tabs
.control-sidebar-tabs {
border-bottom: darken(@sidebar-dark-bg, 3%);
@ -37,6 +48,7 @@
//Hover and active states
&,
&:hover {
border-top: none;
border-right: none;
border-left: 1px solid darken(@sidebar-dark-bg, 7%)!important;
border-bottom: 1px solid darken(@sidebar-dark-bg, 7%)!important;
@ -44,7 +56,6 @@
&:hover,
&:focus,
&:active {
border-top: none;
background: darken(@sidebar-dark-bg, 3%);
}
.icon {
@ -83,10 +94,50 @@
padding: 10px 0;
margin-bottom: 10px;
}
//Subheadings
.control-sidebar-subheading {
display: block;
color: #fff;
font-weight: 400;
font-size: 14px;
}
//Control Sidebar Menu
.control-sidebar-menu {
list-style: none;
padding: 0;
margin: 0 -15px;
> li > a {
.clearfix();
display: block;
padding: 10px 15px;
&:hover {
background: @sidebar-dark-hover-bg;
}
> .control-sidebar-subheading {
margin-top: 0;
}
}
.menu-icon {
float: left;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
}
.menu-info {
margin-left: 45px;
margin-top: 3px;
> .control-sidebar-subheading {
margin: 0;
}
> p {
margin: 0;
color: @sidebar-dark-color;
font-size: 11px;
}
}
.progress {
margin: 0;
}
}

View file

@ -47,7 +47,7 @@ body {
.main-footer {
//Using disposable variable to join statements with a comma
@transition-rule: @transition-speed @transition-fn,
margin-left @transition-speed @transition-fn;
margin @transition-speed @transition-fn;
.transition-transform(@transition-rule);
margin-left: @sidebar-width;
z-index: 820;

View file

@ -109,7 +109,7 @@
.transition(width @transition-speed @transition-fn);
display: block;
float: left;
height: 50px;
height: @navbar-height;
font-size: 20px;
line-height: 50px;
text-align: center;

View file

@ -112,4 +112,4 @@
//Transition global options
@transition-speed: .3s;
@transition-fn: cubic-bezier(0.32,1.25,0.375,1.15);
@transition-fn: ease-in-out;//cubic-bezier(0.32,1.25,0.375,1.15);

89
dist/css/AdminLTE.css vendored
View file

@ -57,10 +57,10 @@ body {
.content-wrapper,
.right-side,
.main-footer {
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
}
@ -184,9 +184,9 @@ a:focus {
z-index: 1030;
}
.main-header > .navbar {
-webkit-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: margin-left 0.3s ease-in-out;
-o-transition: margin-left 0.3s ease-in-out;
transition: margin-left 0.3s ease-in-out;
margin-bottom: 0;
margin-left: 230px;
border: none;
@ -273,9 +273,9 @@ a:focus {
line-height: .9;
}
.main-header .logo {
-webkit-transition: width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
display: block;
float: left;
height: 50px;
@ -403,10 +403,10 @@ a:focus {
min-height: 100%;
width: 230px;
z-index: 810;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
@media (max-width: 767px) {
.main-sidebar,
@ -667,8 +667,17 @@ a:focus {
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
}
.control-sidebar-open .control-sidebar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.control-sidebar-open .content-wrapper,
.control-sidebar-open .right-side,
.control-sidebar-open .main-footer {
margin-right: 230px;
}
.control-sidebar-tabs {
border-bottom: #1c2529;
@ -680,6 +689,7 @@ a:focus {
}
.control-sidebar-tabs > li > a,
.control-sidebar-tabs > li > a:hover {
border-top: none;
border-right: none;
border-left: 1px solid #141a1d !important;
border-bottom: 1px solid #141a1d !important;
@ -687,7 +697,6 @@ a:focus {
.control-sidebar-tabs > li > a:hover,
.control-sidebar-tabs > li > a:focus,
.control-sidebar-tabs > li > a:active {
border-top: none;
background: #1c2529;
}
.control-sidebar-tabs > li > a .icon {
@ -724,6 +733,52 @@ a:focus {
font-weight: 400;
font-size: 14px;
}
.control-sidebar-menu {
list-style: none;
padding: 0;
margin: 0 -15px;
}
.control-sidebar-menu > li > a {
display: block;
padding: 10px 15px;
}
.control-sidebar-menu > li > a:before,
.control-sidebar-menu > li > a:after {
content: " ";
display: table;
}
.control-sidebar-menu > li > a:after {
clear: both;
}
.control-sidebar-menu > li > a:hover {
background: #1e282c;
}
.control-sidebar-menu > li > a > .control-sidebar-subheading {
margin-top: 0;
}
.control-sidebar-menu .menu-icon {
float: left;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
}
.control-sidebar-menu .menu-info {
margin-left: 45px;
margin-top: 3px;
}
.control-sidebar-menu .menu-info > .control-sidebar-subheading {
margin: 0;
}
.control-sidebar-menu .menu-info > p {
margin: 0;
color: #b8c7ce;
font-size: 11px;
}
.control-sidebar-menu .progress {
margin: 0;
}
/*
* Component: Dropdown menus
* -------------------------

File diff suppressed because one or more lines are too long

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-blue .sidebar-form input[type="text"] {
color: #666;
@ -264,9 +264,9 @@
background-color: #fff;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-blue-light .sidebar-form input[type="text"] {
color: #666;
@ -434,9 +434,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-black .sidebar-form input[type="text"] {
color: #666;
@ -604,9 +604,9 @@
background-color: #fff;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-black-light .sidebar-form input[type="text"] {
color: #666;
@ -743,9 +743,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-green .sidebar-form input[type="text"] {
color: #666;
@ -893,9 +893,9 @@
background-color: #fff;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-green-light .sidebar-form input[type="text"] {
color: #666;
@ -1032,9 +1032,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-red .sidebar-form input[type="text"] {
color: #666;
@ -1166,9 +1166,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-red-light .sidebar-form input[type="text"] {
color: #666;
@ -1300,9 +1300,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-yellow .sidebar-form input[type="text"] {
color: #666;
@ -1434,9 +1434,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-yellow-light .sidebar-form input[type="text"] {
color: #666;
@ -1568,9 +1568,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-purple .sidebar-form input[type="text"] {
color: #666;
@ -1702,9 +1702,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-purple-light .sidebar-form input[type="text"] {
color: #666;

File diff suppressed because one or more lines are too long

View file

@ -126,9 +126,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-black .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo:hover{background:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo:hover{background:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .wrapper,.skin-black .main-sidebar,.skin-black .left-side{background-color:#222d32}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#fff}.skin-black .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-black .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-black .sidebar-menu>li:hover>a,.skin-black .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#fff}.skin-black .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-black .sidebar a{color:#b8c7ce}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#8aa4af}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo:hover{background:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo:hover{background:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .wrapper,.skin-black .main-sidebar,.skin-black .left-side{background-color:#222d32}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#fff}.skin-black .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-black .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-black .sidebar-menu>li:hover>a,.skin-black .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#fff}.skin-black .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-black .sidebar a{color:#b8c7ce}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#8aa4af}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-blue .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background:#3b8ab8}
.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background:#3b8ab8}

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-green .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-green .main-header .navbar{background-color:#00a65a}.skin-green .main-header .navbar .nav>li>a{color:#fff}.skin-green .main-header .navbar .nav>li>a:hover,.skin-green .main-header .navbar .nav>li>a:active,.skin-green .main-header .navbar .nav>li>a:focus,.skin-green .main-header .navbar .nav .open>a,.skin-green .main-header .navbar .nav .open>a:hover,.skin-green .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green .main-header .logo{background-color:#008d4c;color:#fff;border-bottom:0 solid transparent}.skin-green .main-header .logo:hover{background:#008749}.skin-green .main-header li.user-header{background-color:#00a65a}.skin-green .content-header{background:transparent}.skin-green .wrapper,.skin-green .main-sidebar,.skin-green .left-side{background-color:#222d32}.skin-green .user-panel>.info,.skin-green .user-panel>.info>a{color:#fff}.skin-green .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-green .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-green .sidebar-menu>li:hover>a,.skin-green .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#00a65a}.skin-green .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-green .sidebar a{color:#b8c7ce}.skin-green .sidebar a:hover{text-decoration:none}.skin-green .treeview-menu>li>a{color:#8aa4af}.skin-green .treeview-menu>li.active>a,.skin-green .treeview-menu>li>a:hover{color:#fff}.skin-green .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-green .sidebar-form input[type="text"],.skin-green .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-green .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green .sidebar-form input[type="text"]:focus,.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
.skin-green .main-header .navbar{background-color:#00a65a}.skin-green .main-header .navbar .nav>li>a{color:#fff}.skin-green .main-header .navbar .nav>li>a:hover,.skin-green .main-header .navbar .nav>li>a:active,.skin-green .main-header .navbar .nav>li>a:focus,.skin-green .main-header .navbar .nav .open>a,.skin-green .main-header .navbar .nav .open>a:hover,.skin-green .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green .main-header .logo{background-color:#008d4c;color:#fff;border-bottom:0 solid transparent}.skin-green .main-header .logo:hover{background:#008749}.skin-green .main-header li.user-header{background-color:#00a65a}.skin-green .content-header{background:transparent}.skin-green .wrapper,.skin-green .main-sidebar,.skin-green .left-side{background-color:#222d32}.skin-green .user-panel>.info,.skin-green .user-panel>.info>a{color:#fff}.skin-green .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-green .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-green .sidebar-menu>li:hover>a,.skin-green .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#00a65a}.skin-green .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-green .sidebar a{color:#b8c7ce}.skin-green .sidebar a:hover{text-decoration:none}.skin-green .treeview-menu>li>a{color:#8aa4af}.skin-green .treeview-menu>li.active>a,.skin-green .treeview-menu>li>a:hover{color:#fff}.skin-green .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-green .sidebar-form input[type="text"],.skin-green .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-green .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green .sidebar-form input[type="text"]:focus,.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-purple .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-purple .main-header .navbar{background-color:#605ca8}.skin-purple .main-header .navbar .nav>li>a{color:#fff}.skin-purple .main-header .navbar .nav>li>a:hover,.skin-purple .main-header .navbar .nav>li>a:active,.skin-purple .main-header .navbar .nav>li>a:focus,.skin-purple .main-header .navbar .nav .open>a,.skin-purple .main-header .navbar .nav .open>a:hover,.skin-purple .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple .main-header .logo{background-color:#555299;color:#fff;border-bottom:0 solid transparent}.skin-purple .main-header .logo:hover{background:#545096}.skin-purple .main-header li.user-header{background-color:#605ca8}.skin-purple .content-header{background:transparent}.skin-purple .wrapper,.skin-purple .main-sidebar,.skin-purple .left-side{background-color:#222d32}.skin-purple .user-panel>.info,.skin-purple .user-panel>.info>a{color:#fff}.skin-purple .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-purple .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-purple .sidebar-menu>li:hover>a,.skin-purple .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#605ca8}.skin-purple .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-purple .sidebar a{color:#b8c7ce}.skin-purple .sidebar a:hover{text-decoration:none}.skin-purple .treeview-menu>li>a{color:#8aa4af}.skin-purple .treeview-menu>li.active>a,.skin-purple .treeview-menu>li>a:hover{color:#fff}.skin-purple .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-purple .sidebar-form input[type="text"],.skin-purple .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-purple .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple .sidebar-form input[type="text"]:focus,.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
.skin-purple .main-header .navbar{background-color:#605ca8}.skin-purple .main-header .navbar .nav>li>a{color:#fff}.skin-purple .main-header .navbar .nav>li>a:hover,.skin-purple .main-header .navbar .nav>li>a:active,.skin-purple .main-header .navbar .nav>li>a:focus,.skin-purple .main-header .navbar .nav .open>a,.skin-purple .main-header .navbar .nav .open>a:hover,.skin-purple .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple .main-header .logo{background-color:#555299;color:#fff;border-bottom:0 solid transparent}.skin-purple .main-header .logo:hover{background:#545096}.skin-purple .main-header li.user-header{background-color:#605ca8}.skin-purple .content-header{background:transparent}.skin-purple .wrapper,.skin-purple .main-sidebar,.skin-purple .left-side{background-color:#222d32}.skin-purple .user-panel>.info,.skin-purple .user-panel>.info>a{color:#fff}.skin-purple .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-purple .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-purple .sidebar-menu>li:hover>a,.skin-purple .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#605ca8}.skin-purple .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-purple .sidebar a{color:#b8c7ce}.skin-purple .sidebar a:hover{text-decoration:none}.skin-purple .treeview-menu>li>a{color:#8aa4af}.skin-purple .treeview-menu>li.active>a,.skin-purple .treeview-menu>li>a:hover{color:#fff}.skin-purple .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-purple .sidebar-form input[type="text"],.skin-purple .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-purple .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple .sidebar-form input[type="text"]:focus,.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-red .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-red .main-header .navbar{background-color:#dd4b39}.skin-red .main-header .navbar .nav>li>a{color:#fff}.skin-red .main-header .navbar .nav>li>a:hover,.skin-red .main-header .navbar .nav>li>a:active,.skin-red .main-header .navbar .nav>li>a:focus,.skin-red .main-header .navbar .nav .open>a,.skin-red .main-header .navbar .nav .open>a:hover,.skin-red .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red .main-header .logo{background-color:#d73925;color:#fff;border-bottom:0 solid transparent}.skin-red .main-header .logo:hover{background:#d33724}.skin-red .main-header li.user-header{background-color:#dd4b39}.skin-red .content-header{background:transparent}.skin-red .wrapper,.skin-red .main-sidebar,.skin-red .left-side{background-color:#222d32}.skin-red .user-panel>.info,.skin-red .user-panel>.info>a{color:#fff}.skin-red .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-red .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-red .sidebar-menu>li:hover>a,.skin-red .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#dd4b39}.skin-red .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-red .sidebar a{color:#b8c7ce}.skin-red .sidebar a:hover{text-decoration:none}.skin-red .treeview-menu>li>a{color:#8aa4af}.skin-red .treeview-menu>li.active>a,.skin-red .treeview-menu>li>a:hover{color:#fff}.skin-red .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-red .sidebar-form input[type="text"],.skin-red .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-red .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red .sidebar-form input[type="text"]:focus,.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
.skin-red .main-header .navbar{background-color:#dd4b39}.skin-red .main-header .navbar .nav>li>a{color:#fff}.skin-red .main-header .navbar .nav>li>a:hover,.skin-red .main-header .navbar .nav>li>a:active,.skin-red .main-header .navbar .nav>li>a:focus,.skin-red .main-header .navbar .nav .open>a,.skin-red .main-header .navbar .nav .open>a:hover,.skin-red .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red .main-header .logo{background-color:#d73925;color:#fff;border-bottom:0 solid transparent}.skin-red .main-header .logo:hover{background:#d33724}.skin-red .main-header li.user-header{background-color:#dd4b39}.skin-red .content-header{background:transparent}.skin-red .wrapper,.skin-red .main-sidebar,.skin-red .left-side{background-color:#222d32}.skin-red .user-panel>.info,.skin-red .user-panel>.info>a{color:#fff}.skin-red .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-red .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-red .sidebar-menu>li:hover>a,.skin-red .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#dd4b39}.skin-red .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-red .sidebar a{color:#b8c7ce}.skin-red .sidebar a:hover{text-decoration:none}.skin-red .treeview-menu>li>a{color:#8aa4af}.skin-red .treeview-menu>li.active>a,.skin-red .treeview-menu>li>a:hover{color:#fff}.skin-red .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-red .sidebar-form input[type="text"],.skin-red .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-red .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red .sidebar-form input[type="text"]:focus,.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}

View file

@ -106,9 +106,9 @@
background-color: #374850;
border: 1px solid transparent;
height: 35px;
-webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.skin-yellow .sidebar-form input[type="text"] {
color: #666;

View file

@ -1 +1 @@
.skin-yellow .main-header .navbar{background-color:#f39c12}.skin-yellow .main-header .navbar .nav>li>a{color:#fff}.skin-yellow .main-header .navbar .nav>li>a:hover,.skin-yellow .main-header .navbar .nav>li>a:active,.skin-yellow .main-header .navbar .nav>li>a:focus,.skin-yellow .main-header .navbar .nav .open>a,.skin-yellow .main-header .navbar .nav .open>a:hover,.skin-yellow .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow .main-header .logo{background-color:#e08e0b;color:#fff;border-bottom:0 solid transparent}.skin-yellow .main-header .logo:hover{background:#db8b0b}.skin-yellow .main-header li.user-header{background-color:#f39c12}.skin-yellow .content-header{background:transparent}.skin-yellow .wrapper,.skin-yellow .main-sidebar,.skin-yellow .left-side{background-color:#222d32}.skin-yellow .user-panel>.info,.skin-yellow .user-panel>.info>a{color:#fff}.skin-yellow .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-yellow .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-yellow .sidebar-menu>li:hover>a,.skin-yellow .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#f39c12}.skin-yellow .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-yellow .sidebar a{color:#b8c7ce}.skin-yellow .sidebar a:hover{text-decoration:none}.skin-yellow .treeview-menu>li>a{color:#8aa4af}.skin-yellow .treeview-menu>li.active>a,.skin-yellow .treeview-menu>li>a:hover{color:#fff}.skin-yellow .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-yellow .sidebar-form input[type="text"],.skin-yellow .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-yellow .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow .sidebar-form input[type="text"]:focus,.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
.skin-yellow .main-header .navbar{background-color:#f39c12}.skin-yellow .main-header .navbar .nav>li>a{color:#fff}.skin-yellow .main-header .navbar .nav>li>a:hover,.skin-yellow .main-header .navbar .nav>li>a:active,.skin-yellow .main-header .navbar .nav>li>a:focus,.skin-yellow .main-header .navbar .nav .open>a,.skin-yellow .main-header .navbar .nav .open>a:hover,.skin-yellow .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow .main-header .logo{background-color:#e08e0b;color:#fff;border-bottom:0 solid transparent}.skin-yellow .main-header .logo:hover{background:#db8b0b}.skin-yellow .main-header li.user-header{background-color:#f39c12}.skin-yellow .content-header{background:transparent}.skin-yellow .wrapper,.skin-yellow .main-sidebar,.skin-yellow .left-side{background-color:#222d32}.skin-yellow .user-panel>.info,.skin-yellow .user-panel>.info>a{color:#fff}.skin-yellow .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-yellow .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-yellow .sidebar-menu>li:hover>a,.skin-yellow .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#f39c12}.skin-yellow .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-yellow .sidebar a{color:#b8c7ce}.skin-yellow .sidebar a:hover{text-decoration:none}.skin-yellow .treeview-menu>li>a{color:#8aa4af}.skin-yellow .treeview-menu>li.active>a,.skin-yellow .treeview-menu>li>a:hover{color:#fff}.skin-yellow .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-yellow .sidebar-form input[type="text"],.skin-yellow .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-yellow .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow .sidebar-form input[type="text"]:focus,.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}

59
dist/js/app.js vendored
View file

@ -64,9 +64,8 @@ $.AdminLTE.options = {
toggleBtnSelector: "[data-toggle='control-sidebar']",
//The sidebar selector
selector: ".control-sidebar",
//Enable slide over content animation
slide: false,
animationSpeed: 300
//Enable slide over content
slide: true
},
//Box Widget Plugin. Enable this plugin
//to allow boxes to be collapsed and/or removed
@ -147,7 +146,7 @@ $(function () {
//Enable control sidebar
if (o.enableControlSidebar) {
$.AdminLTE.controlSidebar.activate(o.controlSidebarOptions);
$.AdminLTE.controlSidebar.activate();
}
//Add slimscroll to navbar dropdown
@ -366,59 +365,59 @@ function _init() {
/* ControlSidebar
* ==============
* Adds functionality to the right sidebar
*
* Adds functionality to the right sidebar
*
* @type Object
* @usage $.AdminLTE.controlSidebar.activate(options)
*/
$.AdminLTE.controlSidebar = {
//Default settings
defaults: {
toggleBtnSelector: "[data-toggle='control-sidebar']",
selector: ".control-sidebar",
slide: true
},
//instantiate the object
activate: function (options) {
activate: function () {
//Get the object
var _this = this;
//Update options
var o = $.extend({}, options, this.defaults);
var o = $.AdminLTE.options.controlSidebarOptions;
//Get the sidebar
var sidebar = $(o.selector);
//The toggle button
var btn = $(o.toggleBtnSelector);
//Initial height fix
_this.fixHeight(sidebar);
//Fix the height when the screen size changes
$(window, ".content").resize(function(){
_this.fixHeight(sidebar);
console.log('debug');
$(window).resize(function () {
_this.fixHeight(sidebar);
});
//Listen to the click event
btn.click(function(e){
btn.click(function (e) {
e.preventDefault();
if(!sidebar.hasClass('control-sidebar-open')) {
if (!sidebar.hasClass('control-sidebar-open')
&& !$('body').hasClass('control-sidebar-open')) {
//Open the sidebar
_this.open(sidebar);
_this.open(sidebar, o.slide);
} else {
_this.close(sidebar);
_this.close(sidebar, o.slide);
}
});
},
//Open the control sidebar
open: function (sidebar) {
sidebar.addClass('control-sidebar-open');
open: function (sidebar, slide) {
if (slide)
sidebar.addClass('control-sidebar-open');
else
$('body').addClass('control-sidebar-open');
},
//Close the control sidebar
close: function (sidebar) {
sidebar.removeClass('control-sidebar-open');
},
close: function (sidebar, slide) {
if (slide)
sidebar.removeClass('control-sidebar-open');
else
$('body').removeClass('control-sidebar-open');
},
//Fix the height of the sidebar
fixHeight: function(sidebar) {
//We'll have to make it small then stretch it again so it
fixHeight: function (sidebar) {
//We'll have to make it small then stretch it again so it
//doesn't occupy more than the space it needs
sidebar.css('min-height', $(window).height() - $(".main-header").height());
sidebar.css('min-height', $(document).height() - $(".main-header").height());

2
dist/js/app.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -654,324 +654,226 @@
</div><!-- /.row -->
</div><!-- /.box-body -->
</div><!-- /.box -->
<div class="row">
<div class="col-md-6">
<!-- DIRECT CHAT -->
<div class="box box-warning direct-chat direct-chat-warning">
<div class="box-header with-border">
<h3 class="box-title">Direct Chat</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-left'>Alexander Pierce</span>
<span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!-- /.col -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-right'>Sarah Bullock</span>
<span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<div class="col-md-4">
<!-- Info Boxes Style 2 -->
<div class="info-box bg-yellow">
<span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Inventory</span>
<span class="info-box-number">5,200</span>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<span class="progress-description">
50% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Mentions</span>
<span class="info-box-number">92,050</span>
<div class="progress">
<div class="progress-bar" style="width: 20%"></div>
</div>
<span class="progress-description">
20% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Downloads</span>
<span class="info-box-number">114,381</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-aqua">
<span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Direct Messages</span>
<span class="info-box-number">163,921</span>
<div class="progress">
<div class="progress-bar" style="width: 40%"></div>
</div>
<span class="progress-description">
40% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
</div><!-- /.col -->
</div><!-- /.row -->
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-left'>Alexander Pierce</span>
<span class='direct-chat-timestamp pull-right'>23 Jan 5:37 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<div class='row'>
<div class='col-md-4'>
<!-- DIRECT CHAT -->
<div class="box box-warning direct-chat direct-chat-warning">
<div class="box-header with-border">
<h3 class="box-title">Direct Chat</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-left'>Alexander Pierce</span>
<span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-right'>Sarah Bullock</span>
<span class='direct-chat-timestamp pull-left'>23 Jan 6:10 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-right'>Sarah Bullock</span>
<span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-left'>Alexander Pierce</span>
<span class='direct-chat-timestamp pull-right'>23 Jan 5:37 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class='direct-chat-info clearfix'>
<span class='direct-chat-name pull-right'>Sarah Bullock</span>
<span class='direct-chat-timestamp pull-left'>23 Jan 6:10 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class='contacts-list'>
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user1-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Count Dracula
<small class='contacts-list-date pull-right'>2/28/2015</small>
</span>
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user7-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Sarah Doe
<small class='contacts-list-date pull-right'>2/23/2015</small>
</span>
<span class='contacts-list-msg'>I will be waiting for...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user3-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Nadia Jolie
<small class='contacts-list-date pull-right'>2/20/2015</small>
</span>
<span class='contacts-list-msg'>I'll call you back at...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user5-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Nora S. Vans
<small class='contacts-list-date pull-right'>2/10/2015</small>
</span>
<span class='contacts-list-msg'>Where is your new...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user6-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
John K.
<small class='contacts-list-date pull-right'>1/27/2015</small>
</span>
<span class='contacts-list-msg'>Can I take a look at...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user8-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Kenneth M.
<small class='contacts-list-date pull-right'>1/4/2015</small>
</span>
<span class='contacts-list-msg'>Never mind I found...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
<span class="input-group-btn">
<button type="button" class="btn btn-warning btn-flat">Send</button>
</span>
</div>
</form>
</div><!-- /.box-footer-->
</div><!--/.direct-chat -->
</div><!-- /.col -->
<div class='col-md-4'>
<!-- USERS LIST -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Latest Members</h3>
<div class="box-tools pull-right">
<span class="label label-danger">8 New Members</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="dist/img/user1-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Alexander Pierce</a>
<span class="users-list-date">Today</span>
</li>
<li>
<img src="dist/img/user8-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Norman</a>
<span class="users-list-date">Yesterday</span>
</li>
<li>
<img src="dist/img/user7-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Jane</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="dist/img/user6-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">John</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="dist/img/user2-160x160.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Alexander</a>
<span class="users-list-date">13 Jan</span>
</li>
<li>
<img src="dist/img/user5-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Sarah</a>
<span class="users-list-date">14 Jan</span>
</li>
<li>
<img src="dist/img/user4-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">15 Jan</span>
</li>
<li>
<img src="dist/img/user3-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">15 Jan</span>
</li>
</ul><!-- /.users-list -->
</div><!-- /.box-body -->
<div class="box-footer text-center">
<a href="javascript::" class="uppercase">View All Users</a>
</div><!-- /.box-footer -->
</div><!--/.box -->
</div><!-- /.col -->
<div class='col-md-4'>
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Browser Usage</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-8">
<div class="chart-responsive">
<canvas id="pieChart" height="150"></canvas>
</div><!-- ./chart-responsive -->
</div><!-- /.col -->
<div class="col-md-4">
<ul class="chart-legend clearfix">
<li><i class="fa fa-circle-o text-red"></i> Chrome</li>
<li><i class="fa fa-circle-o text-green"></i> IE</li>
<li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
<li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
<li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
<li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
</ul>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.box-body -->
<div class="box-footer no-padding">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
<li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
<li><a href="#">China <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
</ul>
</div><!-- /.footer -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class='contacts-list'>
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user1-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Count Dracula
<small class='contacts-list-date pull-right'>2/28/2015</small>
</span>
<span class='contacts-list-msg'>How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user7-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Sarah Doe
<small class='contacts-list-date pull-right'>2/23/2015</small>
</span>
<span class='contacts-list-msg'>I will be waiting for...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user3-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Nadia Jolie
<small class='contacts-list-date pull-right'>2/20/2015</small>
</span>
<span class='contacts-list-msg'>I'll call you back at...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user5-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Nora S. Vans
<small class='contacts-list-date pull-right'>2/10/2015</small>
</span>
<span class='contacts-list-msg'>Where is your new...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user6-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
John K.
<small class='contacts-list-date pull-right'>1/27/2015</small>
</span>
<span class='contacts-list-msg'>Can I take a look at...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
<li>
<a href='#'>
<img class='contacts-list-img' src='dist/img/user8-128x128.jpg'/>
<div class='contacts-list-info'>
<span class='contacts-list-name'>
Kenneth M.
<small class='contacts-list-date pull-right'>1/4/2015</small>
</span>
<span class='contacts-list-msg'>Never mind I found...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
<div class="box-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
<span class="input-group-btn">
<button type="button" class="btn btn-warning btn-flat">Send</button>
</span>
</div>
</form>
</div><!-- /.box-footer-->
</div><!--/.direct-chat -->
</div><!-- /.col -->
<div class="row">
<div class="col-md-8">
<div class="col-md-6">
<!-- USERS LIST -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Latest Members</h3>
<div class="box-tools pull-right">
<span class="label label-danger">8 New Members</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="dist/img/user1-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Alexander Pierce</a>
<span class="users-list-date">Today</span>
</li>
<li>
<img src="dist/img/user8-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Norman</a>
<span class="users-list-date">Yesterday</span>
</li>
<li>
<img src="dist/img/user7-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Jane</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="dist/img/user6-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">John</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="dist/img/user2-160x160.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Alexander</a>
<span class="users-list-date">13 Jan</span>
</li>
<li>
<img src="dist/img/user5-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Sarah</a>
<span class="users-list-date">14 Jan</span>
</li>
<li>
<img src="dist/img/user4-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">15 Jan</span>
</li>
<li>
<img src="dist/img/user3-128x128.jpg" alt="User Image"/>
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">15 Jan</span>
</li>
</ul><!-- /.users-list -->
</div><!-- /.box-body -->
<div class="box-footer text-center">
<a href="javascript::" class="uppercase">View All Users</a>
</div><!-- /.box-footer -->
</div><!--/.box -->
</div><!-- /.col -->
</div><!-- /.row -->
<!-- TABLE: LATEST ORDERS -->
<div class="box box-info">
<div class="box-header with-border">
@ -1045,7 +947,98 @@
</div><!-- /.box-footer -->
</div><!-- /.box -->
</div><!-- /.col -->
<div class="col-md-4">
<!-- Info Boxes Style 2 -->
<div class="info-box bg-yellow">
<span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Inventory</span>
<span class="info-box-number">5,200</span>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<span class="progress-description">
50% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Mentions</span>
<span class="info-box-number">92,050</span>
<div class="progress">
<div class="progress-bar" style="width: 20%"></div>
</div>
<span class="progress-description">
20% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Downloads</span>
<span class="info-box-number">114,381</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="info-box bg-aqua">
<span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
<div class="info-box-content">
<span class="info-box-text">Direct Messages</span>
<span class="info-box-number">163,921</span>
<div class="progress">
<div class="progress-bar" style="width: 40%"></div>
</div>
<span class="progress-description">
40% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Browser Usage</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-8">
<div class="chart-responsive">
<canvas id="pieChart" height="150"></canvas>
</div><!-- ./chart-responsive -->
</div><!-- /.col -->
<div class="col-md-4">
<ul class="chart-legend clearfix">
<li><i class="fa fa-circle-o text-red"></i> Chrome</li>
<li><i class="fa fa-circle-o text-green"></i> IE</li>
<li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
<li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
<li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
<li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
</ul>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.box-body -->
<div class="box-footer no-padding">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
<li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
<li><a href="#">China <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
</ul>
</div><!-- /.footer -->
</div><!-- /.box -->
<!-- PRODUCT LIST -->
<div class="box box-primary">
<div class="box-header with-border">
@ -1109,7 +1102,6 @@
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
@ -1125,18 +1117,100 @@
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-stats-tab" data-toggle="tab"><i class="fa fa-pie-chart"></i></a></li>
<!--li><a href="#control-sidebar-stats-tab" data-toggle="tab"><i class="fa fa-pie-chart"></i></a></li-->
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h5 class="control-sidebar-heading">News Feed</h5>
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class='control-sidebar-menu'>
<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora@example.com</p>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul><!-- /.control-sidebar-menu -->
<h5 class="control-sidebar-heading">Mail</h5>
<h5 class="control-sidebar-heading">Todo List</h5>
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class='control-sidebar-menu'>
<li>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-waring pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul><!-- /.control-sidebar-menu -->
</div><!-- /.tab-pane -->
<!-- Stats tab content -->
@ -1144,7 +1218,7 @@
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h5 class="control-sidebar-heading">General Settings</h5>
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
@ -1154,7 +1228,7 @@
Some information about this general settings option
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
@ -1164,7 +1238,7 @@
Other sets of options are available
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
@ -1174,23 +1248,23 @@
Allow the user to show his name in blog posts
</p>
</div><!-- /.form-group -->
<h5 class="control-sidebar-heading">Chat Settings</h5>
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
@ -1230,7 +1304,7 @@
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes --
<script src="dist/js/demo.js" type="text/javascript"></script-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js" type="text/javascript"></script>
</body>
</html>