<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<body class="home">
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation">
<div class="navi">
<ul>
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Home</span></a></li>
<li><a href="#"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Workflow</span></a></li>
<li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Statistics</span></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Calender</span></a></li>
<li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Users</span></a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Setting</span></a></li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-11 display-table-cell v-align">
<!--<button type="button" class="slide-toggle">Slide Toggle</button> -->
<div class="user-dashboard">
<h1>Hello, JS</h1>
<button type="button" class="btn form-btn">Botón</button>
<li class="hidden-xs"><a href="#" class="add-project">Add Project</a></li>
<br>
<a href="#" class="view btn-sm active">View Profile</a>
<input type="text" placeholder="Project Title" name="name">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 gutter">
<div class="sales">
<h2>Your Sale</h2>
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Period:</span> Last Year
</button>
<div class="dropdown-menu">
<a href="#">2012</a>
<a href="#">2014</a>
<a href="#">2015</a>
<a href="#">2016</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
/*Main CSS*/
li,ul{
list-style: none;
padding: 0;
margin: 0;
}
.form-btn {
background: #5584ff none repeat scroll 0 0;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-weight: 400;
max-width: 250px;
padding: 10px 0;
position: relative;
width: 100%;
margin: 40px 0;
box-shadow: 0 2px 8px #d2d2d2;
-moz-box-shadow: 0 2px 8px #d2d2d2;
-webkit-box-shadow: 0 2px 8px #d2d2d2;
}
.form-btn::before {
content: "";
font-family: FontAwesome;
position: absolute;
right: 17px;
top: 9px;
}
/*Home Page*/
.home {
background: #f6f7fa;
}
#navigation {
background: #0e1a35;
}
#navigation {
padding: 0;
}
.display-table {
display: table;
padding: 0;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
.add-project {
background: #5584ff none repeat scroll 0 0;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 27px 10px 45px;
position: relative;
}
.add-project::before {
background: rgba(0, 0, 0, 0) url("../images/plus.png") no-repeat scroll 0 0;
content: "";
;
height: 12px;
left: 17px;
position: absolute;
top: 12px;
width: 12px;
}
.add-project:hover {
color: #ffffff;
}
.navi i {
font-size: 20px;
}
.navbar-content > span {
font-size: 13px;
font-weight: 700;
}
.img-responsive {
width: 100%;
}
#navigation{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navi a {
border-bottom: 1px solid #0d172e;
border-top: 1px solid #0d172e;
color: #ffffff;
display: block;
font-size: 17px;
font-weight: 500;
padding: 28px 20px;
text-decoration: none;
}
.navi i {
margin-right: 15px;
color: #5584ff;
}
.navi .active a {
background: #122143;
border-left: 5px solid #5584ff;
padding-left: 15px;
}
.navi a:hover {
background: #122143 none repeat scroll 0 0;
border-left: 5px solid #5584ff;
display: block;
padding-left: 15px;
}
.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: rgba(0, 0, 0, 0);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #0e1a35;
}
.hidden-xs{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.user-dashboard {
padding: 0 20px;
}
.user-dashboard h1 {
color: #0e1a35;
font-size: 30px;
font-weight: 500;
margin: 0;
padding: 21px 0;
}
.sales {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #d4d9e3;
display: inline-block;
padding: 15px;
width: 100%;
}
.sales button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #dadee7;
border-radius: 100px;
font-size: 15px;
letter-spacing: 0.5px;
padding-right: 32px;
color: #0e1a35;
}
.sales button::before {
content: "";
font-family: FontAwesome;
position: absolute;
right: 12px;
top: 11px;
}
.sales .btn-group {
float: right;
}
.sales h2 {
color: #8492af;
float: left;
font-size: 21px;
font-weight: 600;
margin: 0;
padding: 9px 0 0;
}
.btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
}
.sales .dropdown-menu{
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
width: 100%;
color: #0e1a35;
}
.sales .btn-group.open .dropdown-toggle, .btn.active, .btn:active{
box-shadow: none;
}
.sales .dropdown-menu > a {
color: #0e1a35;
display: inline-block;
font-weight: 800;
padding: 9px 0;
text-align: center;
width: 100%;
}
#my-cool-chart svg {
width: 100%;
}
.sales .dropdown-menu > a:hover{
color: #5584FF;
}
.shield-buttons {
display: none;
}
@media only screen and (max-device-width: 767px) {
.login-logo img {
margin: 0 auto;
}
.login-details .nav-tabs > li {
text-align: center;
width: 50%;
}
.login-signup .login-inner h1 {
font-size: 26px;
margin-bottom: 0;
margin-top: 10px;
}
.login-inner .login-form input {
font-size: 15px;
max-width: 100%;
padding: 15px 45px;
}
.login-inner .form-details {
padding: 25px;
}
.login-inner .login-form label {
margin-bottom: 20px;
width: 100%;
}
.login-inner .form-btn {
margin: 0;
max-width: 180px;
}
.tab-content .tab-pane {
padding: 20px 0;
}
#navigation .navi a {
font-size: 14px;
padding: 20px;
text-align: center;
}
#navigation .navi i {
margin-right: 0px;
}
#navigation .navi a:hover,
#navigation .navi .active a {
background: #122143 none repeat scroll 0 0;
border-left: none;
display: block;
padding-left: 20px;
}
.navbar-default .navbar-toggle {
border-color: rgba(0, 0, 0, 0);
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
outline: medium none;
}
.user-dashboard .sales h2 {
color: #8492af;
float: left;
font-size: 14px;
font-weight: 600;
margin: 0;
padding: 13px 0 0;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 11px;
}
.user-dashboard .sales button {
font-size: 11px;
padding-right: 23px;
}
.user-dashboard .sales h2 {
font-size: 12px;
}
.gutter{
padding: 0;
}
}
@media only screen and (min-device-width: 767px) and (max-device-width: 998px){
.user-dashboard .header-top {
padding-top: 5px;
}
.user-dashboard .header-rightside {
display: inline-block;
float: left;
width: 100%;
}
.user-dashboard .header-rightside .header-top img {
max-width: 41px !important;
}
.user-dashboard .sales button {
font-size: 10px;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 12px;
}
.user-dashboard .sales h2 {
font-size: 15px;
}
}
@media only screen and (min-device-width:998px) and (max-device-width: 1350px){
#navigation .logo img {
max-width: 130px;
padding: 16px 0 17px;
width: 100%;
}
}
$(document).ready(function(){
$('[data-toggle="offcanvas"]').click(function(){
$("#navigation").toggleClass("hidden-xs");
});
});
