<nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="zmdi zmdi-widgets"></i>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-shopping-cart"></i>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-accounts"></i>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-chart"></i>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-layers"></i>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center pl-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<i class="zmdi zmdi-plus-circle-o"></i>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 my-3">
<div class="card-list">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card blue">
<div class="title">all projects</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">89</div>
<div class="stat"><b>13</b>% increase</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card green">
<div class="title">team members</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">5,990</div>
<div class="stat"><b>4</b>% increase</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card orange">
<div class="title">total budget</div>
<i class="zmdi zmdi-download"></i>
<div class="value">$80,990</div>
<div class="stat"><b>13</b>% decrease</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card red">
<div class="title">new customers</div>
<i class="zmdi zmdi-download"></i>
<div class="value">3</div>
<div class="stat"><b>13</b>% decrease</div>
</div>
</div>
</div>
</div>
<div class="projects mb-4">
<div class="projects-inner">
<header class="projects-header">
<div class="title">Ongoing Projects</div>
<div class="count">| 32 Projects</div>
<i class="zmdi zmdi-download"></i>
</header>
<table class="projects-table">
<thead>
<tr>
<th>Project</th>
<th>Deadline</th>
<th>Leader + Team</th>
<th>Budget</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr class="danger-item">
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-red">Blocked</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-blue">Early stages</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
</table>
</div>
</div>
<div class="chart-data">
<div class="row">
<div class="col-12 col-md-4">
<div class="chart radar-chart dark">
<div class="actions">
<button type="button" class="btn btn-link"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Household Expenditure</h3>
<p class="tagline">Yearly</p>
<canvas height="400" id="radarChartDark"></canvas>
</div>
</div>
<div class="col-12 col-md-4">
<div class="chart bar-chart light">
<div class="actions">
<button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Monthly revenue</h3>
<p class="tagline">2015 (in thousands US$)</p>
<canvas height="400" id="barChartHDark"></canvas>
</div>
</div>
<div class="col-12 col-md-4">
<div class="chart doughnut-chart dark">
<div class="actions">
<button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Exports of Goods</h3>
<p class="tagline">2015 (in billion US$)</p>
<canvas height="400" id="doughnutChartDark"></canvas>
</div>
</div>
</div>
</div>
</main>
</div>
</div>@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/dashboard.scss";
$bg: #1b2431;
$light-text: #738297;
$dark-text: #273142;
$light-bg: #313D4F;
// global stuff
body {
background-color: $bg;
color: #202020;
font-family: "Montserrat", "Helvetica", "Open Sans", "Arial";
font-size: 13px;
}
a:hover {
text-decoration: none;
}
p,
figure {
margin: 0;
padding: 0;
}
@mixin clear() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.navbar {
background-color: $bg;
}
.sidebar {
background-color: $bg;
box-shadow: none;
.nav-link {
border-left: 5px solid transparent;
color: $light-text;
padding: .5rem .75rem;
&:hover {
color: white;
}
&.active {
border-left: 5px solid $light-text;
color: white;
}
}
.zmdi {
display: inline-block;
font-size: 1.35rem;
margin-right: 5px;
min-width: 25px;
}
}
.card-list {
@include clear();
width: 100%;
}
.card {
border-radius: 8px;
color: white;
padding: 10px;
position: relative;
.zmdi {
color: white;
font-size: 28px;
opacity: 0.3;
position: absolute;
right: 13px;
top: 13px;
}
.stat {
border-top: 1px solid rgba(255, 255, 255, 0.3);
font-size: 8px;
margin-top: 25px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.title {
display: inline-block;
font-size: 8px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.value {
font-size: 28px;
padding: 0 10px;
}
&.blue {
background-color: #2298F1;
}
&.green {
background-color: #66B92E;
}
&.orange {
background-color: #DA932C;
}
&.red {
background-color: #D65B4A;
}
}
.projects {
background-color: $dark-text;
border: 1px solid $light-bg;
overflow-x: auto;
width: 100%;
&-inner {
border-radius: 4px;
}
}
.projects-header {
color: white;
padding: 22px;
.count,
.title {
display: inline-block;
}
.count {
color: #738297;
}
.zmdi {
cursor: pointer;
float: right;
font-size: 16px;
margin: 5px 0;
}
.title {
font-size: 21px;
+ .count {
margin-left: 5px;
}
}
}
.projects-table {
background: #273142;
width: 100%;
td,
th {
color: white;
padding: 10px 22px;
vertical-align: middle;
}
td p {
font-size: 12px;
&:last-of-type {
color: $light-text;
font-size: 11px;
}
}
th {
background-color: $light-bg;
}
tr {
&:hover {
background-color: lighten($dark-text, 5%);
}
&:not(:last-of-type) {
border-bottom: 1px solid $light-bg;
}
}
.member {
figure,
.member-info {
display: inline-block;
vertical-align: top;
}
figure + .member-info {
margin-left: 7px;
}
img {
border-radius: 50%;
height: 32px;
width: 32px;
}
}
.status > form {
float: right;
}
.status-text {
display: inline-block;
font-size: 12px;
margin: 11px 0;
padding-left: 20px;
position: relative;
&:before {
border: 3px solid;
border-radius: 50%;
content: "";
height: 14px;
left: 0;
position: absolute;
top: 1px;
width: 14px;
}
&.status-blue:before {
border-color: #1C93ED;
}
&.status-green:before {
border-color: #66B92E;
}
&.status-orange:before {
border-color: #DA932C;
}
&.status-red:before {
border-color: #D65B4A;
}
}
}
// selectric plugin styling
.selectric {
background-color: transparent;
border-color: $light-bg;
border-radius: 4px;
.label {
color: $light-text;
line-height: 34px;
margin-right: 10px;
text-align: left;
}
&-wrapper {
float: right;
width: 150px;
}
}
// charts
.chart {
border-radius: 3px;
// box-shadow: 0 0 10px -3px black;
border: 1px solid $light-bg;
color: white;
padding: 10px;
position: relative;
text-align: center;
canvas {
height: 400px;
margin: 20px 0;
width: 100%;
}
.actions {
margin: 15px;
position: absolute;
right: 0;
top: 0;
span {
cursor: pointer;
display: inline-block;
font-size: 20px;
margin: 5px;
padding: 4px;
}
.btn-link {
color: white;
i {
font-size: 1.75rem;
}
}
}
.title {
font-size: 18px;
margin: 0;
padding: 15px 0 5px;
+ .tagline {
margin-top: 10px;
}
}
.tagline {
font-size: 12px;
}
}
.danger-item {
border-left: 4px solid #A84D43;
}
.zmdi {
line-height: 1;
vertical-align: middle;
}
class Selectize {
constructor() {
this.init();
}
init() {
var initValue: string;
$('.action-box').selectric({
onInit: function(element) {
initValue = $(this).val();
},
onChange: function(element) {
if ($(this).val() !== initValue)
$(element).parents('form').submit();
}
});
}
}
class Charts {
colors;
tickColor: string;
constructor() {
this.colors = ["#DB66AE", "#8185D6", "#89D9DF", "#E08886"];
this.tickColor = "#757681";
this.initRadar();
this.initBarHorizontal();
this.initDoughnut();
}
initRadar(): void {
var ctxD = $('#radarChartDark'),
chartData = {
type: 'radar',
data: {
labels: ["Education", "Food", "Transport", "Drinks", "Other"],
datasets: [
{
label: "2014",
backgroundColor: this.convertHex(this.colors[0], 20),
borderColor: this.colors[0],
borderWidth: 1,
pointRadius: 2,
data: [51, 67, 90, 31, 16],
},
{
label: "2015",
backgroundColor: this.convertHex(this.colors[1], 20),
borderColor: this.colors[1],
borderWidth: 1,
pointRadius: 2,
data: [75, 44, 19, 22, 43],
},
{
label: "2015",
backgroundColor: this.convertHex(this.colors[2], 20),
borderColor: this.colors[2],
borderWidth: 1,
pointRadius: 2,
data: [7, 14, 29, 82, 33]
}
]},
options: {
scale: {
pointLabels: {
fontColor: this.tickColor
},
ticks: {
display: false,
stepSize: 25
}
},
legend: {
position: "bottom",
labels: {
boxWidth: 11,
fontColor: this.tickColor,
fontSize: 11
}
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
initBarHorizontal(): void {
var ctxD = $("#barChartHDark"),
chartData = {
type: 'horizontalBar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
data: [27, 59, 68, 26, 79, 55, 36, 43, 44, 30, 55, 64],
backgroundColor: this.colors[0],
hoverBackgroundColor: this.convertHex(this.colors[0], 70)
},
{
data: [136, 23, 44, 30, 79, 55, 61, 94, 27, 59, 98, 91],
backgroundColor: this.colors[1],
hoverBackgroundColor: this.convertHex(this.colors[1], 70)
},
{
data: [88, 31, 87, 61, 77, 27, 59, 58, 136, 26, 79, 85],
backgroundColor: this.colors[2],
hoverBackgroundColor: this.convertHex(this.colors[2], 70)
}]
},
options: {
barThickness: 10,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
min: 0,
max: 175,
stepSize: 25
}
}]
},
legend: {
display: false
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
initDoughnut(): void {
var ctxD = $('#doughnutChartDark'),
chartData = {
type: 'doughnut',
data: {
labels: ["Brasil", "India", "China"],
datasets: [{
data: [300, 50, 100],
borderWidth: 0,
backgroundColor: [
this.convertHex(this.colors[0], 60),
this.convertHex(this.colors[1], 60),
this.convertHex(this.colors[2], 60),
],
hoverBackgroundColor: [
this.colors[0],
this.colors[1],
this.colors[2],
]
}]
},
options: {
responsive: true,
legend: {
position: "bottom",
labels: {
boxWidth: 11,
fontColor: this.tickColor,
fontSize: 11
}
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
convertHex(hex, opacity) {
hex = hex.replace('#','');
var r = parseInt(hex.substring(0,2), 16);
var g = parseInt(hex.substring(2,4), 16);
var b = parseInt(hex.substring(4,6), 16);
var result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
}
new Selectize();
new Charts();
External CSS
- https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
- https://cdn.jsdelivr.net/jquery.selectric/1.10.1/selectric.css
- https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css
External JavaScript
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
- https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
- https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
- https://cdn.jsdelivr.net/jquery.selectric/1.10.1/jquery.selectric.min.js
- https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js