nav
header Sales Report
section
header Main
ul
li.active Dashboard
li(data-value="8") Reports
li Groups
section
header Account
ul
li Activity
li(data-value="4") Messages
li Downloads
section
header Categories
ul
li.red Credit Sales
li.yellow Channel Sales
li.green Direct Sales
li.new
i.fa.fa-plus-circle
| Add Category
article
header
.title Dashboard
.user
.interval
ul
li Weekly
li.active Monthly
section
.chart
canvas#c1(width=900, height=200)
section
header Total Sales
.inlineChart
canvas#c2(width=100, height=100)
.info
.value $36,146
.title Credit sales
.inlineChart
canvas#c3(width=100, height=100)
.info
.value $24,734
.title Channel Sales
.inlineChart
canvas#c4(width=100, height=100)
.info
.value $15,650
.title Direct Sales
section
table
thead
tr
th November Sales
th Quantity
th Total
tbody
tr
td Dallas Oak Dining Chair
td 20
td $1,342
tr
td Benmore Glass Coffee Table
td 18
td $1,550
tr
td Aoraki Leather Sofa
td 15
td $4,170
tr
td Bali Outdoor Wicker Chair
td 25
td $2,974
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Dosis:300|Lato:300,400,600,700|Roboto+Condensed:300,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700|Maven+Pro:400,700);
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
$bgColor: #202B33;
$textColor: #738491;
$titleColor: #D3D3D3;
$selectedColor: #2278AE;
$greyColor: #545f68;
$navWidth: 18%;
* {
@include box-sizing(border-box);
}
html, body {
background-color: $bgColor;
color: $textColor;
font-family: "Open Sans";
font-size: 16px;
font-smoothing: antialiased;
overflow: hidden;
}
header {
color: $titleColor;
}
nav {
position: absolute;
top: 0;
bottom: 0;
right: 100% - $navWidth;
left: 0;
padding: 22px;
border-right: 2px solid darken($bgColor, 5%);
> header {
font-weight: 700;
font-size: 1.2rem;
text-transform: uppercase;
}
section {
font-weight: 600;
header {
padding-top: 30px;
}
ul {
list-style: none;
padding: 0px;
li {
position: relative;
padding: 10px 0px;
&.active {
color: $selectedColor;
}
&:after {
content: attr(data-value);
position: absolute;
right: 0px;
width: 19px;
background-color: $textColor;
font-size: 0.9rem;
color: $bgColor;
@include border-radius(19px);
text-align: center;
}
&.red:after {
content: '';
position: absolute;
top: 14px;
right: 0px;
width: 10px;
height: 10px;
background-color: rgba(236,72,127,1);
@include border-radius(10px);
}
&.yellow:after {
content: '';
position: absolute;
top: 14px;
right: 0px;
width: 10px;
height: 10px;
background-color: rgba(234,142,57,1);
@include border-radius(10px);
}
&.green:after {
content: '';
position: absolute;
top: 14px;
right: 0px;
width: 10px;
height: 10px;
background-color: rgba(56,175,91,1);
@include border-radius(10px);
}
&.new {
font-size: 0.9rem;
color: $greyColor;
//font-style: italic;
}
} // li
} // ul
} // section
} // nav
article {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: $navWidth;
overflow: auto;
border-left: 2px solid lighten($bgColor, 5%);
padding: 20px;
> header {
height: 60px;
border-bottom: 1px solid lighten($bgColor, 5%);
.title {
float: left;
font-size: 1.3rem;
font-weight: 600;
}
.user {
float: right;
width: 48px;
height: 48px;
background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/peterlandt/48.jpg');
@include border-radius(48px);
margin-left: 20px;
}
.interval {
float: right;
ul {
padding: 0;
list-style: none;
li {
float: right;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 600;
padding: 2px 10px;
margin: 0px 10px;
&.active {
background-color: $titleColor;
color: $bgColor;
@include border-radius(10px);
}
} // li
} // ul
} // interval
} // header
section {
margin-top: 20px;
margin-bottom: 20px;
> header {
margin-bottom: 20px;
font-size: 1.1rem;
font-weight: 600;
}
.chart {
height: 200px;
#c1 {
}
} // .chart
.inlineChart {
float: left;
width: 30%;
margin-bottom: 50px;
canvas {
float: left;
}
.info {
float: left;
padding-left: 20px;
padding-top: 16px;
.value {
font-size: 2.0rem;
color: $titleColor;
}
.title {
}
} // .info
} // .inlineChart
table {
width: 100%;
th, td {
padding: 15px 0px;
border-bottom: 1px solid lighten($bgColor, 5%);
}
thead {
th {
text-align: left;
font-size: 0.9rem;
text-transform: uppercase;
color: $titleColor;
}
} // thead
tbody {
}
} // table
} // section
} // article
// Inspired by https://dribbble.com/shots/1821178-Sales-Report/
var data1 = {
labels : ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
datasets : [
{
fillColor : "rgba(56,175,91,.1)",
strokeColor : "rgba(56,175,91,1)",
pointColor : "rgba(56,175,91,1)",
pointStrokeColor : "rgba(0,0,0,0.6)",
data : [1000,1200,935,990,1050,1030,1040]
},
{
fillColor : "rgba(234,142,57,.1)",
strokeColor : "rgba(234,142,57,1)",
pointColor : "rgba(234,142,57,1)",
pointStrokeColor : "rgba(0,0,0,0.6)",
data : [1300, 1200, 1000, 1200, 1100, 1150, 1180]
},
{
fillColor : "rgba(236,72,127,.1)",
strokeColor : "rgba(236,72,127,1)",
pointColor : "rgba(236,72,127,1)",
pointStrokeColor : "rgba(0,0,0,0.6)",
data : [1400,1350,1250,1250,1350,1500,1550]
}
]
}
var options1 = {
scaleFontColor : "rgba(255,255,255,0.7)",
scaleLineColor : "rgba(0,0,0,0)",
scaleGridLineColor : "rgba(255,255,255,0.1)",
scaleFontFamily: "Open Sans",
scaleFontSize: 14,
bezierCurve : true,
scaleShowLabels: true,
pointDotRadius: 6,
animation: true,
scaleShowGridLines: true,
datasetFill: true,
responsive: true
}
new Chart(c1.getContext("2d")).Line(data1,options1);
var data2 = [{
value: 80,
color: "rgba(236,72,127,1)",
label: ""
},
{
value: 20,
color: "#3c4449",
label: ""
}];
var options2 = {
animation: false,
responsive: true,
segmentShowStroke: false,
percentageInnerCutout: 90
}
new Chart($("#c2").get(0).getContext("2d")).Doughnut(data2,options2);
var data2 = [{
value: 64,
color: "rgba(234,142,57,1)",
label: ""
},
{
value: 36,
color: "#3c4449",
label: ""
}];
var options2 = {
animation: false,
responsive: true,
segmentShowStroke: false,
percentageInnerCutout: 90
}
new Chart($("#c3").get(0).getContext("2d")).Doughnut(data2,options2);
var data2 = [{
value: 34,
color: "rgba(56,175,91,1)",
label: ""
},
{
value: 66,
color: "#3c4449",
label: ""
}];
var options2 = {
animation: false,
responsive: true,
segmentShowStroke: false,
percentageInnerCutout: 90
}
new Chart($("#c4").get(0).getContext("2d")).Doughnut(data2,options2);
External CSS
This Pen doesn't use any external CSS resources.