Dashboard

dashboard.markdown

Dashboard

Design Credit: Jakub Antalík

https://dribbble.com/shots/1646215-Health-app

A Pen by Tom Barton on CodePen.

License.

index.pug

.container
	.menu-column
		ul(class='nav')
			li(class='pulse')
			li(class='chat')
			li(class='calendar')
			li(class='clipboard')
			li(class='settings')
		.profile
			img(src='https://placeimg.com/100/100/face')
	.summary-column
		.profile-img#profileImage
			img(src='https://placeimg.com/400/400/face')
			.name
				.
					Jana <br> Novakova
		.statistics
			h2 summary
			.age
				span(class='title title-age') 22
			.weight
				span(class='title title-weight') 53 kg
			.float-none
			.height
				.icon
				.data
					span 172 cm
			.bmi
				span(class='title title-bmi') 20.4
			.fat
				span(class='title title-fat') 11
					span(class='percentage') %
			.float-none
			h2(class='allergies') allergies
			.row
				.
					peanuts
				.severity
					.fill(style="width: 45%; height: inherit;")
			.row
				.
					penicilin
				.severity
					.fill(style="width: 80%; height: inherit;")
	.content-column
		.header-container#headerContainer
			.nav
				.content
					p 
						| hi 
						span(class='name') jana
						|, it seems you are in
					span(class='shape score') good
					span(class='shape')  shape
			.select-boxes
				.content
					.select-wrapper
						select
							option Bl. Pressure
					.select-wrapper
						select
							option Today
			.float-none
			.graph
				canvas(id='bpChart' style='position: relative; z-index: 100;')
		.split-container
			.split
				h3 Temperature
				.temperature
					.
						36.7
				.split-graph
					canvas(id='temperatureGraph')
			.split
				h3 Calories burned
				.calories
					.
						537
				.split-graph
					canvas(id='calorieGraph')
			.split
				h3 Heart rate
				.heart-rate
					.
						87
				.split-graph
					canvas(id='heartRateGraph')
		.sleep
			.totals
				.collective
					span(class='hours') 8
					span(class='minutes') 25
					p Total sleep time
				.split.first
					.
						6h 12m
					p Deep
				.split
					.
						2h 13m
					p Light
			.sleep-graph
				.sleep-graph-container
					h2  Sleep Analytics
					.sleep-select-wrapper
						select
							option(value='today') Today
					.chart-container
						canvas(id='sleepChart')
		.float-none
		.split-container
			.split.bottom
				h2 Appointments
				.appointments
					.calendar-container
						.calendar
							.
								25
							span(class='date') th
							span(class='month') Jul
						.content
							table(class='appointment-table')
								tr
									td(id='time')
										.
											13:00
								tr
									td(id='title')
										.
											Dentist
								tr
									td(id='name')
										.
											Jozef Novotny
			.split.bottom
				h2 Doctors around
				table(class='doctor-grid')
					tr
						td(height='65')
							img(src='https://placeimg.com/65/65/people')
						td
							img(src='https://placeimg.com/65/65/face')
						td
							img(src='https://placeimg.com/65/65/people')
					tr
						td
							img(src='https://placeimg.com/65/65/face')
						td
							img(src='https://placeimg.com/65/65/people')
						td(id='expand')
							.background
								.
									+8

			.split.bottom
				#map
				.map-overlay
					h2 Steps today
					span(class='steps') 4578
					span(class='distance') 1.7 km
	.search-column
		.search-container
			img(src='https://svgshare.com/i/56w.svg')
			input(type='text' placeholder='Search')
		.activity-list
			h3 Recent Activity
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/face')
				.text
					span(class='name') Peter Smith 
					| added a new appointment to your calendar.
					span(class='time-ago') 2 hours ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/person')
				.text
					span(class='name') Katarina Rychia 
					| commented on your Results 09
					span(class='time-ago') 2 hours ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/face')
				.text
					span(class='name') Tereza Dvorak 
					| added two attachments to Results 238.
					span(class='time-ago') 6 days ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/person')
				.text
					span(class='name') Peter Smith 
					| added a new appointment to your calendar.
					span(class='time-ago') 7 days ago
			.your-doctors
				h3 Your Doctors
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/person')
					.text
						span(class='name-large') Peter Smith
						span(class='title') Dentist
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/face')
					.text
						span(class='name-large') Katarina Rychia 
						span(class='title') Dentist
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/person')
					.text
						span(class='name-large') Tereza Dvorak 
						span(class='title') Physician
				button(class='find-doctor') Find new doctor
			

script.js

// Blood Pressure Chart
let bloodPressureChart = document.getElementById('bpChart').getContext('2d')
let gradient = bloodPressureChart.createLinearGradient(0, 0, 0, 100)
gradient.addColorStop(0, "#29a9e1")
gradient.addColorStop(1, "#2ccec2")

let chart = new Chart(bloodPressureChart, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "Blood Pressure",
            backgroundColor: gradient,
            borderColor: 'transparent',
            data: [105, 112, 105, 120, 110, 119, 110],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 elements: {
       	point: {
        		radius: 2
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Sleep Chart
let sleepChartContainer = document.getElementById('sleepChart').getContext('2d')
let sleepChartGradient = sleepChartContainer.createLinearGradient(0, 0, 400, 0)
sleepChartGradient.addColorStop(0, "#44D1CA")
sleepChartGradient.addColorStop(1, "#28A3D0")

let sleepChartBackgroundGradient = sleepChartContainer.createLinearGradient(0, 0, 400, 0)
sleepChartBackgroundGradient.addColorStop(0, "rgba(68, 209, 202, 0.1)")
sleepChartBackgroundGradient.addColorStop(1, "rgba(40, 163, 208, 0.1)")

let sleepChart = new Chart(sleepChartContainer, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "1", "2", "3"],
        datasets: [{
            label: "Hours of sleep",
            backgroundColor: sleepChartBackgroundGradient,
            borderColor: sleepChartGradient,
            data: [7.5, 6.7, 7.8, 8.2, 6.7, 6.5, 8.2, 7.5, 8.2, 6.9, 7.2, 7.5, 6.9],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 elements: {
       	point: {
        		radius: 2
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: true,
					color: "#F3F4F4"
				},
				ticks: {
					fontColor: "#BDC3C6"
				}
			}],
			 yAxes: [{
				maxBarThickness: 1,
				gridLines: {
					drawBorder: true,
			 		display: false,
					color: "#F3F4F4"
				},
				 ticks: {
					 callback: function(value, index, values) {
						 return null
					 },
					 suggestedMin: 6
				 }
		 	}]
		 }
	 }
})

// Temperature Chart
let temperatureChartContainer = document.getElementById('temperatureGraph').getContext('2d')
let temperatureGradient = temperatureChartContainer.createLinearGradient(0, 0, 100, 0)
temperatureGradient.addColorStop(0, "#feb35e")
temperatureGradient.addColorStop(1, "#fe8550")
let temperatureChart = new Chart(temperatureChartContainer, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: temperatureGradient,
			   fill: false,
            data: [105, 108, 105, 110, 108, 105, 110],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Calorie Chart
let calorieChartContainer = document.getElementById('calorieGraph').getContext('2d')
let calorieChartGradient = calorieChartContainer.createLinearGradient(0, 0, 100, 0)
calorieChartGradient.addColorStop(0, "#03d7a6")
calorieChartGradient.addColorStop(1, "#22b6d1")
let calorieChart = new Chart(calorieChartContainer, {
		type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: calorieChartGradient,
			   fill: false,
            data: [105, 108, 115, 105, 110, 112, 109],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Heart Rate Chart
let heartRateChartContainer = document.getElementById('heartRateGraph').getContext('2d')
let heartRateChartGradient = heartRateChartContainer.createLinearGradient(0, 0, 100, 0)
heartRateChartGradient.addColorStop(0, "#fd6eb5")
heartRateChartGradient.addColorStop(1, "#ca65ff")
let heartRateChart = new Chart(heartRateChartContainer, {
		type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: heartRateChartGradient,
			   fill: false,
            data: [105, 108, 109, 115, 108, 105, 104],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Current Position Helper
function getLocation() {
	return new Promise((resolve, reject) => {
		try {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
					resolve(position.coords)
				})
			} else {
				throw Error('Geolocation disabled.')
			}
		} catch(err) {
			console.log(err)
			reject(err)
		}
	})
}

document.addEventListener("DOMContentLoaded", function() {
	getLocation()
		.then((coords) => {
			googleMapsInit(coords.longitude, coords.latitude)
		})
		.catch((err) => {
			console.log(err)
			googleMapsInit()
		})
})

// Initiate Google Maps render
function googleMapsInit(longitude, latitude) {
	let map = document.getElementById('map')
	// Default Lon/Lat to UK if geolocation is disabled 
	if (!longitude || !latitude) {
		let longitude = 3.4360
		let latitude = 55.3781
	}
	map = new google.maps.Map(document.getElementById('map'), {
	  center: {lat: latitude, lng: longitude},
	  zoom: 7,
		disableDefaultUI: true,
		styles: [
		  {
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#f5f5f5"
				}
			 ]
		  },
		  {
			 "elementType": "geometry.fill",
			 "stylers": [
				{
				  "color": "#ffffff"
				}
			 ]
		  },
		  {
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "elementType": "labels.icon",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#616161"
				}
			 ]
		  },
		  {
			 "elementType": "labels.text.stroke",
			 "stylers": [
				{
				  "color": "#f5f5f5"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.land_parcel",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.land_parcel",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#bdbdbd"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.neighborhood",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "poi",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#eeeeee"
				}
			 ]
		  },
		  {
			 "featureType": "poi",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#757575"
				}
			 ]
		  },
		  {
			 "featureType": "poi.business",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "poi.park",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#e5e5e5"
				}
			 ]
		  },
		  {
			 "featureType": "poi.park",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  },
		  {
			 "featureType": "road",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#ffffff"
				}
			 ]
		  },
		  {
			 "featureType": "road",
			 "elementType": "labels.icon",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.arterial",
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.arterial",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#757575"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#dadada"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#616161"
				}
			 ]
		  },
		  {
			 "featureType": "road.local",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.local",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  },
		  {
			 "featureType": "transit",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "transit.line",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#e5e5e5"
				}
			 ]
		  },
		  {
			 "featureType": "transit.station",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#eeeeee"
				}
			 ]
		  },
		  {
			 "featureType": "water",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#c9c9c9"
				}
			 ]
		  },
		  {
			 "featureType": "water",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  }
		]
	})
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5wVTk5SQ3alGnIqPchU9CmU7v__ypM6Q"></script>

style.scss

body {
	font-family: 'Roboto', sans-serif;
	background: #7e8b91;
	margin: 1%;
	box-sizing: border-box;
}

.container {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	width: 100%;
	min-width: 1180px;
	margin: auto;
	justify-content: center;
}

.menu-column {
	position: relative;
	width: 6%;
	max-width: 50px;
	background: linear-gradient(#2e96ea, #30c8ca);
	min-width: 70px;
	.profile {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 65px;
		img {
			position: relative;
			width: 100%;
			height: 100%;
		}
		&:after {
			content: '';
			display: block;
			height: 10px;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: rgba(245, 244, 120, 0.7);
		}
	}
	.nav {
		list-style-type: none;
		margin: 0 0 100px;
		padding: 0;
		li {
			width: 100%;
			height: 3.5em;
			margin: 0;
			&:hover {
				background-color: #57a8ed;
				cursor: pointer;
			}
		}
	}

	.pulse {
		background-image: url("https://svgshare.com/i/4w9.svg");
		background-position: center;
		background-size: 25px;
		background-repeat: no-repeat;
	}

	.chat {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4uF.svg");
	}

	.calendar {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4vc.svg");
	}

	.clipboard {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4wJ.svg")
	}

	.settings {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4vd.svg")
	}
}

.float-none {
	clear: both;
}

.summary-column {
	position: relative;
	z-index: 2;
	width: 17%;
	min-width: 225px;
	max-width: 300px;
	background: linear-gradient(lighten(#3d6281, 15%), #42656f);
	.profile-img {
		position: relative;
		height: 331px;
		img {
			width: 100%;
			height: 100%;
		}
		.name {
			position: absolute;
			bottom: 25px;
			left: 1em;
			color: white;
			font-size: 1.5em;
			font-weight: 300;
		}
	}
	.statistics {
		margin: 20px 6% 0 6%;		
		h2 {
			color: #a1afbc;
			text-transform: uppercase;
			font-size: 0.75em;
			letter-spacing: 1px;
		}
		.age {
			display: block;
			width: 50%;
			height: 100px;
			box-sizing: border-box;
			float: left;
			border-right: 1px solid rgba(255, 255, 255, 0.2);
			text-align: center;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
		.title {
			color: white;
			letter-spacing: 2px;
			font-size: 1.5em;
			position: relative;
			margin-top: -13px;
			display: block;
			line-height: 100px;
			vertical-align: middle;
			&:after {
				color: #90a0aa;
				font-size: 0.7em;
				letter-spacing: 0px;
				position: absolute;
				bottom: -26px;
				left: 50%;
				transform: translateX(-50%)
			}
		}
		.weight {
			border-right: none;
			@extend .age;
		}
		.title-weight {
			&:after {
				content: 'Weight';
			}
		}
		.title-age {
			&:after {
				content: 'Age';
			}
		}
		.title-bmi {
			&:after {
				content: 'BMI';
			}
		}
		.title-fat {
			&:after {
				content: 'Fat';
			}
		}
		.height {
			height: 150px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			.icon {
				display: block;
				width: 50%;
				height: 100%;
				float: left;
				background:
					url("https://svgshare.com/i/4xQ.svg");
					background-size: 120px;
					background-repeat: no-repeat;
					background-position: center;
			}
			.data {
				display: block;
				width: 50%;
				float: left;
				span {
					display: block;
					position: relative;
					line-height: 130px;
					vertical-align: middle;
					font-size: 1.75em;
					color: white;
					&:after {
						content: 'Height';
						color: #90a0aa;
						font-size: 0.7em;
						line-height: 20px;
						letter-spacing: 0px;
						position: absolute;
						left: 0;
						bottom: 25px;
					}
				}
			}
		}
		.bmi {
			@extend .age;
			border-bottom: none;
		}
		.fat {
			@extend .bmi;
			border-right: none;
		}
		.percentage {
			font-size: 0.7em;
			line-height: 0.7em;
		}
	}
	.allergies {
		padding-top: 20px;
	}
	.row {
		position: relative;
		height: 50px;
		line-height: 50px;
		text-transform: capitalize;
		border-top: 1px solid #537482;
		color: #f1f3f4;
		font-size: 0.8em;
		&:last-child {
			border-bottom: 1px solid #537482;
			margin-bottom: 50px;
		}
		.severity {
			position: absolute;
			top: 50%;
			left: 75%;
			transform: translate(-50%, -75%);
			width: 100px;
			height: 5px;
			background: #567681;
		}
		.fill {
			background: #c3f8ab;
		}
	}
}

.content-column {
	background: white;
	width: 62%;
	min-width: 900px;
	@media only screen and (max-width: 1250px) {
		width: 77%;
	}
	z-index: 0;
	.header-container {
		width: 100%;
		height: 331px;
		overflow: hidden;
	}
	.nav {
		width: 50%;
		float: left;
		font-size: 0.9em;
		font-weight: 500;
		line-height: 1;
		.content {
			margin: 50px 0 0 50px;
			white-space: nowrap;
		}
		p {
			text-transform: uppercase;
			color: #899191;
			letter-spacing: 1px;
		}
		.name {
			color: #636d6d;
		}
		.shape {
			font-family: 'Nunito', sans-serif;
			font-weight: 200;
			font-size: 6em;
			color: #8b9494;	
		}
		.score {	
			color: #34d0c4;
		}
	}
	.select-boxes {
		float: left;
		width: 50%;
		.content {
			margin: 40px;
			float: right;
		}
	}
	.split-container {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		width: 100%;
		margin: auto;
		justify-content: center;
		.split {
			position: relative;
			width: calc(100% / 3);
			min-width: 300px;
			text-align: center;
			font-size: 1.7em;
			font-weight: 300;
			border-right: 1px solid #dddfe1;
			border-bottom: 1px solid #dddfe1;
			.split-graph {
				max-width: 100%;
				height: 125px;
				overflow: hidden;
			}
			h3 {
				font-size: 1.1em;
				font-weight: 300;
				margin: 50px 0 0 0;
				color: #566161;
			}
			&:last-child {
				border-right: none;
			}
		}
		.temperature {
			display: block;
			color: #58676c;
			font-size: 2em;
			line-height: 2em;
			width: 225px;
			margin: auto;
			position: relative;
			font-weight: 300;
			margin: 10px auto;
			&:before {
				content: '';
				position: absolute;
				height: 35px;
				width: 35px;
				background: 
					url('https://svgshare.com/i/50V.svg');
					background-size: 35px 35px;
					background-position: center;
					background-repeat: no-repeat;
				left: 20px;
				top: 50%;
				transform: translateY(-50%);
			}
			&:after {
				content: '°';
				font-weight: 300;
				color: #889599;
				position: absolute;
				right: 35px;
			}
		}
		.calories {
			@extend .temperature;
			&:before {
				background:
					url('https://svgshare.com/i/52_.svg');
				background-size: 35px 35px;
			}
			&:after {
				content: 'cal';
				font-size: 0.5em;
				right: 30px;
				bottom: -9px;
			}
		}
		.heart-rate {
			@extend .calories;
			&:before {
				background:
					url('https://svgshare.com/i/51m.svg');
				background-size: 35px 35px;
				left: 30px;
			}
			&:after {
				content: 'bpm';
				right: 20px;
			}
		}
	}
	.sleep {
		.totals {
			width: 30%;
			float: left;
			.collective {
				margin-top: 75px;
				margin-left: 15%;
				.hours {
					position: relative;
					color: #58676c;
					font-size: 3em;
					height: 20px;
					font-weight: 300;
					margin-right: 0.5em;
					&:after {
						position: absolute;
						font-size: 0.4em;
						color: #899599;
						bottom: 10px;
						right: -15px;
						height: 20px;
						line-height: 20px;
						content: 'h';
					}
				}
				.minutes {
					@extend .hours;
					&:after {
						right: -22px;
						content: 'm';
					}
				}
				p {
					color: #a7afb2;
					font-weight: 300;
					margin: 0;
					margin-top: -5px;
				}
			}
			.split {
				display: block;
				float: left;
				width: 20%;
				margin: 30px 15%;
				font-weight: bold;
				color: #58676c;
				p {
					color: #a7afb2;
					font-weight: 300;
					margin: 0;
				}
			}
			.first {
				// :first-child is being a bit funny...
				margin-right: 0;
			}
		}
		.sleep-graph {
			width: 70%;
			float: left;
			.sleep-graph-container {
				width: 80%;
				margin: auto;
				margin-top: 30px;
				.chart-container {
					height: 200px;
					margin-top: -20px;
					padding-bottom: 20px;
				}
			}
			h2 {
				display: inline-block;
				margin: 0;
				color: #828989;
				font-weight: 300;
				text-indent: 15px;
				line-height: 30px;
			}
			.sleep-select-wrapper {
				@extend .select-wrapper;
				display: block;
				float: right;
			}
		}
	}
	.bottom {
		border-bottom: none !important;
		border-top: 1px solid #dddfe1;
		h2 {
			margin: 35px 0;
			font-size: 0.9em;
			font-weight: 300;
		}
	}
	.appointments {
		margin: 0 20%;
		.calendar-container {
			height: 140px;
			padding-top: 24px;
			min-width: 185px;
		}
		.calendar {
			width: 92px;
			float: left;
			background: #f1f4f4;
			padding: 14px 0;
			.date {
				 font-size: 0.7em;
			}
			.month {
				display: block;
				text-transform: capitalize;
			}
		}
		.content {
			box-sizing: margin-box;
			width: 50%;
			float: left;
			.appointment-table {
				margin-left: 15px;
				height: 92px;
				text-align: left;
				font-size: 0.55em;
				border-collapse: collapse;
				td {
					padding: 0;
				}
			}
		}
	}
	.map-overlay {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		.steps {
			display: block;
			font-size: 2em;
			color: #58676c;
		}
		.distance {
			display: block;
			font-size: 0.75em;
			color: #a6acaf;
			font-weight: 400;
		}
	}
}

.search-column {
	background: #E3E8E9;
	width: 15%;
	z-index: 1;
	@media only screen and (max-width: 1250px) {
		display: none;
	}
	h3 {
		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: 400;
		color: #92999A;
		margin: 20px 0;
		letter-spacing: 1px;
	}
	.search-container {
		position: relative;
		width: 100%;
		height: 65px;
		img {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%); 
			width: 25px;
			height: 25px;
		}
		input {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			border: 0;
			background: #D9DFE1;
			color: #9DA5A6;
			font-size: 1.25em;
			font-weight: 300;
			text-indent: 20%;
		}
	}
	.activity-list {
		width: 80%;
		margin: auto;
	}
	.activity {
		font-size: 0;
		height: 75px;
		margin-bottom: 15px;
		cursor: pointer;
		.image-container {
			display: inline-block;
			width: 20%;
			height: 55px;
			img {
				display: block;
				border-radius: 50%;
			}
		}
		.text {
			display: inline-block;
			width: calc(80% - 10px);
			font-size: 0.75rem;
			margin-left: 10px;
			letter-spacing: 1px;
			color: #646F73;
			vertical-align: top;
		}
		.time-ago {
			display: block;
			margin-top: 3px;
			color: #A9B1B2;
		}
		.name {
			font-weight: 500;
			color: darken(#606B70, 10%);
		}
		.name-large {
			font-size: 1.3em;
		}
		.title {
			display: block;
			color: #A9B1B2;
		}
	}
	.doctor {
		@extend .activity;
		height: 40px;
		margin-bottom: 30px;
	}
	.find-doctor {
		width: 200px;
		height: 40px;
		border-radius: 20px;
		background: #F9FAFB;
		border: 0;
		font-size: 0.9em;
		color: darken(#808F8F, 15%);
		cursor: pointer;
	}
}

.doctor-grid {
	margin: auto;
	img {
		display: block;
	}
}

.graph {
	width: 110%;
	margin-top: 70px;
	margin-left: -7%;
	height: 125px;
	z-index: 0;
}

#temperatureGraph {
	margin: auto;
}

#calorieGraph {
	margin: auto;
}

#heartRateGraph {
	margin: auto;
}

#time {
	color: #979ea0;
}

#title {
	color: #30cec2;
	font-weight: 500;
}

#name {
	color: #5e696d;
}

#expand {
	color: #fdfefe;
	font-weight: 400;
	.background {
		width: 65px;
		height: 65px;
		line-height: 65px;
		background: #2bcdc1;
		cursor: pointer;
	}
}

#map {
	width: 100%;
	height: 314px;
	opacity: 0.3;
}

.select-wrapper{
	display: inline-block;
	position: relative;
	&:after {
		content: '';
		width: 9px;
		height: 9px;
		background:
			url('https://svgshare.com/i/4xe.svg');
		background-size: 9px;
		background-position: center;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%)
	}
}
select {
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9em;
	font-weight: 500;
	margin-left: 20px;
	border: 1px solid #d6dadc;
	color: #5d7171;
	width: 120px;
	height: 30px;
	border-radius: 25px;
	text-indent: 7px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
}

#sleepChart {
	margin: 50px 0;
	height: 200px;
}

styles

<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400|Roboto:300,400,500" rel="stylesheet" />