<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="wrapper" class="container-fluid">
<!-- Chart bar -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-area-chart"></i> Posts per Month</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-area-chart"></i> Posts per Month</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* Footer */
.social-icon {
list-style: none;
padding: 0;
margin: 0;
}
.social-icon li{
display: inline-block;
text-align: center;
}
.social-icon a {
display: block;
width: 44px;
height: 28px;
line-height: 28px;
margin-right: 5px;
}
.social-icon>li:nth-child(1) a {
color: #337ab7; /* social icon color */
}
.social-icon>li:nth-child(2) a {
color: #CC0000; /* social icon color */
}
.social-icon>li:nth-child(3) a {
color: #48802C; /* social icon color */
}
.social-icon>li:nth-child(1) a:hover {
color: #fff; /* social icon hover color */
}
.social-icon>li:nth-child(2) a:hover {
color: #fff; /* social icon hover color */
}
.social-icon>li:nth-child(3) a:hover {
color: #fff; /* social icon hover color */
}
.footer {
position: relative;
bottom: 0;
width: 100%;
height: 28px;
background-color:#222;
}
/* End Footer */
/* TopNav Bar */
.navbar-blog .navbar-nav>li>.dropdown-menu {
border-radius: 4px;
margin-right: -1px;
min-width: 220px;
padding: 0px;
}
.navbar-blog .navbar-nav>li>.dropdown-menu>li>a {
border-left: 0 solid #CC0000;
color: #000000;
font-size: smaller;
padding: 10px 20px;
white-space: nowrap
}
.navbar-blog .navbar-nav>li>.dropdown-menu>li.active>a,
.navbar-blog .navbar-nav>li>.dropdown-menu>li>a:focus,
.navbar-blog .navbar-nav>li>.dropdown-menu>li>a:hover {
background-color: #F5F5F5;
border-left-width: 5px;
padding-left: 15px
}
.navbar-blog .navbar-nav>li>.dropdown-menu>li.divider {
margin: 0px 0;
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
.navbar-border {
border-bottom: solid 3px #CC0000;
}
@media screen and (min-width: 768px) {
.navbar-xs {
min-height: 28px;
height: 28px;
}
.navbar-xs .navbar-brand {
padding: 0px 12px;
font-size: small;
line-height: 25px;
color: #FFFFFF;
}
.navbar-xs .navbar-nav > li > a {
color: #FFFFFF;
padding-top: 0px;
padding-bottom: 0px;
line-height: 25px;
font-size: small;
}
.navbar-xs .navbar-nav > li > a:hover {
color: #AAAAAA;
}
}
/* End Navbar Top*/
/* SideBar */
#wrapper {
padding-top: 50px;
padding-left: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
@media (min-width: 768px) {
#wrapper {
padding-left: 225px;
}
}
@media (min-width: 768px) {
#wrapper #sidebar-wrapper {
width: 225px;
}
}
#sidebar-wrapper {
border-right: 1px solid lightgray;
}
#sidebar-wrapper {
position: fixed;
left: 225px;
width: 0;
height: 100%;
margin-left: -225px;
overflow-y: auto;
background: lightgray;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#sidebar-wrapper .sidebar-nav {
top: 10px;
width: 225px;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#sidebar-wrapper .sidebar-nav li {
text-indent: 0;
line-height: 45px;
}
#sidebar-wrapper .sidebar-nav li a {
display: block;
text-decoration: none;
}
#sidebar-wrapper .sidebar-nav li a .sidebar-icon {
width: 45px;
height: 45px;
font-size: 14px;
padding: 0 2px;
display: inline-block;
text-indent: 7px;
margin-right: 10px;
color: #fff;
float: left;
}
#sidebar-wrapper .sidebar-nav li a .caret {
position: absolute;
right: 23px;
top: auto;
margin-top: 20px;
}
#sidebar-wrapper .sidebar-nav li ul.panel-collapse {
list-style: none;
-moz-padding-start: 0;
-webkit-padding-start: 0;
-khtml-padding-start: 0;
-o-padding-start: 0;
padding-start: 0;
padding: 0;
}
#sidebar-wrapper .sidebar-nav li ul.panel-collapse li i {
margin-right: 10px;
}
#sidebar-wrapper .sidebar-nav li ul.panel-collapse li {
text-indent: 15px;
}
@media (max-width: 768px) {
#wrapper #sidebar-wrapper {
width: 45px;
}
#wrapper #sidebar-wrapper #sidebar #sidemenu li ul {
position: fixed;
left: 45px;
margin-top: -45px;
z-index: 1000;
width: 200px;
height: 0;
}
}
.sidebar-nav li:first-child a {
border-left: 3px solid #CC0000;
background: #222;
color: #fff;
}
.sidebar-nav li a:hover {
color:#9d9d9d;
}
.sidebar-nav li:nth-child(2) a {
border-left: 3px solid #255B17;
background: #222 ;
color: #fff;
}
.sidebar-nav li:nth-child(2) a:hover {
color:#9d9d9d;
}
.sidebar-nav li:nth-child(3) a {
border-left: 3px solid #FFD700;
background: #222 ;
color: #fff ;
}
.sidebar-nav li:nth-child(3) a:hover {
color:#9d9d9d;
}
.sidebar-nav li:nth-child(4) a {
border-left: 3px solid #37115A;
background: #222 ;
color: #fff ;
}
.sidebar-nav li:nth-child(4) a:hover {
color:#9d9d9d;
}
.sidebar-nav li:nth-child(5) a {
border-left: 3px solid #E16600;
background: #222 ;
color: #fff ;
}
.sidebar-nav li:nth-child(5) a:hover {
color:#9d9d9d;
}
/* ennd sibebar */
/* Panel */
#mainPanel,#secondPanel {
border-radius: 3px;
border-top: 3px solid #a94442;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
#mainPanel .panel-heading ,#secondPanel .panel-heading
{
border-bottom: 1px solid #f4f4f4;
background-color: #FFF;
}
.clickable{
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px
}
.box-tools [data-toggle="tooltip"] {
position: relative
}
.box-tools.pull-right .dropdown-menu {
right: 0;
left: auto
}
.btn-box-tool {
padding: 5px;
font-size: 12px;
background: transparent;
color: #97a0b3
}
.open .btn-box-tool,
.btn-box-tool:hover {
color: #606c84
}
.btn-box-tool.btn:active {
box-shadow: none
}
body
{
background-color: lightgray;
}
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}
$(document).on('click', '.panel-heading span.clickable', function(e){
var $this = $(this);
if(!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
