body(oncontextmenu='return false', onselectstart='return false', ondragstart='return false')
.dashboard
header
.logo
img(src='https://image.flaticon.com/icons/svg/184/184671.svg', width='60', height='60')
.menu
ul
li
a(href='#!') overview
i.icon-down-open
li
a(href='#!') analitycs
i.icon-down-open
li
a(href='#!') data
i.icon-down-open
li
a(href='#!') alerts
i.icon-down-open
.user-container
ul
li.user
a(href='https://twitter.com/HeyEusse', target='_blanck')
img.avatar(src='https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png')
li.user-dropdown
i.icon-down-open
.container
section.filters-container
.filters
ul
li
.filters-count
span.title-filter filters
span.count
label 100/
| 1973
button(value='reset') RESET
.searcher
input(type='text', placeholder='Text Filter')
li.active
p
span.title region
span.info north west
i.icon-right-open
li.active
p
span.title routes
span.info route N°234567
i.icon-right-open
li
p
span.title timeframe
span.info.current current condition
i.icon-right-open
li
p
span.info whsl
select.state
option(value='off') off
option(value='on') on
input.length(placeholder='136.067 mm')
li
p
span.title switch range
span.info all swtiches
i.icon-right-open
li
p
span.info + add new filter
i.icon-right-open
section.switch-selector
.selector
ul
li
span.head-title switch selector
li
span zx2924
li
span zx2925
li
span zx2926
li
span zx2927
li
span zx2928
li
span zx2929
li
span zx2930
li
span zx2931
li
span zx2932
li
span zx2933
li
span zx2934
main.data-space
.header
h2 asset report
.charts-container
.status-history
h2 status history
.last-mesurements
.first
canvas#myChartA
.second
canvas#myChartB/**
Variables
*/
/* colors */
// Body
$gradient-a: #0196C0;
$gradient-b: #07C4CB;
// APP
$header: #1B2E58;
$notification-color: #FF7E82;
$color-head: #fff;
$filters-section: #17294D;
$filter-active: #63A7B2;
$btn-filter: #01C2C7;
$temperature-color: #0F667A;
$switch-selector: #132344;
$test-color: #FE6881;
$test-second: #755250;
$test-third: #793E5A;
$test-fourth: #0D5B72;
$bkg-data: #F8FAF9;
/**
Styles
*/
::selection {
background-color: none;
}
html, body {
margin: 0;
padding: 0;
}
body {
align-items: center;
background: linear-gradient(to right, #0196C0, #07C4CB);
display: flex;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.dashboard {
background-color: $header;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.39);
height: 600px;
//min-width: 1240px;
overflow: hidden;
header {
align-items: center;
background-color: $header;
display: flex;
font-family: 'Amiko', sans-serif;
height: 4em;
padding: .5em 0 .5em 1.5em;
.logo {
margin-right: 4em;
}
.menu {
margin-right: auto;
ul {
list-style: none;
display: flex;
margin: 0;
padding-top: .6em;
li {
margin: 0 3em 0 0;
padding: 0;
display: flex;
&:first-child {
a, i {
color: $color-head;
}
}
&:last-child {
position: relative;
&:after {
background-color: $test-color;
border-radius: 50%;
content: '';
height: 12px;
left: 52px;
position: absolute;
top: -4px;
width: 12px;
}
}
a {
color: darken($color-head, 30);
display: inline-block;
outline: none;
padding-right: .5em;
text-decoration: none;
text-transform: uppercase;
transition: all .2s;
}
i {
color: darken($color-head, 30);
font-size: 20px;
transition: all .2s;
}
&:hover,
& > :hover,
& > :active {
cursor: pointer;
color: $color-head;
}
}
}
}
.user-container {
box-sizing: border-box;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 1em 0 0;
padding: 0;
&.user {
a {
display: block;
outline: none;
img {
border-radius: 50%;
height: 42px;
vertical-align: middle;
width: 42px;
}
}
}
&.user-dropdown {
align-items: center;
display: flex;
i {
color: darken($color-head, 30);
cursor: pointer;
font-size: 20px;
padding-top: .4em;
}
}
}
}
}
}
/* End Styles Header */
.container {
background-color: gray;
display: flex;
height: 38em;
@mixin input-style() {
background-color: darken($filters-section, 4);
border: none;
border-radius: .4em;
box-sizing: border-box;
color: darken($color-head, 10);
font-family: 'Amiko', sans-serif;
outline: none;
padding: .5em;
}
.filters-container {
background-color: $filters-section;
flex-basis: 20%;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
align-items: center;
border-bottom: 1px solid #132344;
cursor: pointer;
display: flex;
padding: 1em 2em 1em 2em;
&.active {
padding: 1em 2em 1em 0;
p {
border-left: 4px solid #78D6D6;
padding-left: 2em;
}
}
&:nth-child(1) {
align-items: flex-start;
cursor: default;
flex-direction: column;
padding: 1em 2em 1em 2em;
.filters-count {
display: flex;
align-items: center;
width: 100%;
span.title-filter {
color: $color-head;
margin-right: auto;
text-transform: uppercase;
}
span.count {
color: darken($color-head, 30);
margin: 0 1em 0 1.5em;
label {
color: darken($btn-filter, 5);
}
}
button {
background-color: $btn-filter;
border: none;
border-radius: .2em;
color: $color-head;
cursor: pointer;
font-size: .8em;
line-height: 2;
outline: none;
}
}
.searcher {
margin-top: 1em;
display: flex;
width: 100%;
input {
@include input-style();
flex: auto;
padding: .8em;
}
input[placeholder] {
color: darken($color-head, 40);
}
}
}
p {
display: flex;
flex-direction: column;
margin: 0;
margin-right: auto;
span.title {
color: darken($color-head, 25);
font-size: .8em;
text-transform: uppercase;
}
span.info {
color: $color-head;
margin-top: .5em;
text-transform: capitalize;
}
span.current {
color: darken($btn-filter, 5);
}
}
i {
color: darken($color-head, 30);
}
&:nth-child(5) {
p {
flex-direction: row;
.info {
text-transform: uppercase;
width: 25%;
margin-right: .4em;
}
.state {
@include input-style();
margin-right: .4em;
width: 30%;
}
.length {
@include input-style();
width: 50%;
}
}
}
}
}
}
.switch-selector {
background-color: $switch-selector;
flex-basis: 1%;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
cursor: pointer;
display: flex;
justify-content: center;
padding: .4em;
margin-bottom: 1em;
span.head-title {
color: darken($color-head, 25);
}
span {
color: $color-head;
text-transform: uppercase;
}
&:nth-child(2) {
border-left: 8px solid $test-color;
}
&:nth-child(3),
&:nth-child(4),
&:nth-child(7),
&:nth-child(8) {
border-left: 3px solid $test-second;
}
&:nth-child(5),
&:nth-child(6),
&:nth-child(9) {
border-left: 3px solid $test-third;
}
&:nth-child(10),
&:nth-child(11),
&:nth-child(12) {
border-left: 3px solid $test-fourth;
}
}
}
}
.data-space {
background-color: $bkg-data;
flex: 70 1 auto;
display: flex;
flex-direction: column;
@mixin title-style($fz) {
color: #33415C;
font-weight: 600;
font-size: $fz;
line-height: 2;
padding-left: 1.5em;
text-transform: uppercase;
}
.header {
background-color: #fff;
box-shadow: 0 0 .2em lightgray;
height: 10%;
h2 {
@include title-style(1.1em);
}
}
.charts-container {
display: flex;
flex-direction: column;
height: 90%;
justify-content: space-around;
padding: 1.5em;
.status-history {
background-color: #fff;
box-shadow: 0 0 1px lightgray;
height: 20%;
h2 {
@include title-style(1em);
}
}
.last-mesurements {
background-color: #fff;
box-shadow: 0 0 1px lightgray;
height: 30%;
display: flex;
margin-top: 1em;
width: 100%;
height: 100%;
}
}
}
}
}let optsWhsl = {
type: 'line',
data: {
labels: [ "April 10",,, "April 11",,, "April 12",,, "April 13",,, "April 14",,, ],
datasets: [
{
label: 'Graphic A',
fill: false,
lineTension: 0.1,
backgroundColor: "#32A7EC",
borderColor: "#32A7EC",
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [ 2, 2.1, 3, 2.5, 3, 2.7, 2.8, 2.3, 3, 4.7, 3.9, 4.3, 4.3, 3.7, 3 ],
pointBorderColor: false,
spanGaps: false,
}
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scale: {
ticks: {
beginAtZero: true
}
}
}
}
let optsTemp = {
type: 'line',
data: {
labels: [ "April 10",,, "April 11",,, "April 12",,, "April 13",,, "April 14",,, ],
datasets: [
{
label: 'Graphic B',
fill: false,
lineTension: 0.1,
backgroundColor: "#5176E8",
borderColor: "#5176E8",
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [ 3, 3.2, 4, 3.4, 4.2, 2.9, 2.5, 2.8, 2.7, 3, 2.8, 3, 2.8, 3.5, 2.8 ],
pointBorderColor: false,
spanGaps: false,
}
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scale: {
ticks: {
beginAtZero: true
}
}
}
}
const ctxA = document.querySelector("#myChartA");
const ctxB = document.querySelector('#myChartB');
new Chart(ctxA, optsWhsl);
new Chart(ctxB, optsTemp);
External CSS
This Pen doesn't use any external CSS resources.