Skip to content

Instantly share code, notes, and snippets.

@Hamasn

Hamasn/dashboard.markdown

Created June 3, 2020 06:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Hamasn/e1ce1f8ada1419c969a442525c9eaa7d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Hamasn/e1ce1f8ada1419c969a442525c9eaa7d to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard
Raw
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
Raw
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"
}
]
}
]
})
}
Raw
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>
Raw
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;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400|Roboto:300,400,500" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment