Adding elevation chart

style/_common.scss

@@ -28,6 +28,19 @@
     @include animate(fadeIn 0.8s infinite alternate); 
 }
 
+@mixin rounded($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -o-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin drop-shadow($opacity) {
+	filter: drop-shadow( -1px 1px 1px rgba(0, 0, 0, $opacity));
+	-webkit-filter: drop-shadow( -1px 1px 1px rgba(0, 0, 0, $opacity));
+}
+
 /* Fonts */
 
 @import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext');

style/_fa.scss

@@ -20,6 +20,16 @@ $fa-css-prefix: fa;
 	}
 }
 
+.control-icon {
+	font-size: 28px;
+	text-align: center;
+	line-height: 44px;
+	text-decoration: none;
+	color: #999;
+	background: none;
+	@extend .fa;
+}
+
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-compass); }
@@ -33,3 +43,5 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-track-main:before { content: fa-content($fa-var-hiking); }
 .#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
 .#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
+.#{$fa-css-prefix}-elevation:before { content: fa-content($fa-var-chart-area); }
+

style/_leaflet_elevation.scss

@@ -0,0 +1,86 @@
+$theme : "spot-theme";
+$base-color : #CCC;
+$highlight-color : #FFF;
+$background : rgba($base-color, 0.2);
+$drag-color : rgba($highlight-color, 0.2);
+$axis-color : darken($base-color,20%);
+$stroke-color : darken($base-color,40%);
+$stroke-width-mouse-focus : 1;
+$stroke-width-height-focus: 2;
+$stroke-width-axis : 2;
+
+.#{$theme}.leaflet-control.elevation {
+
+	.background {
+		//background-color: $background;
+		//@include rounded(3px);
+		margin: 6px 0 -12px;
+	}
+
+	.axis path,
+	.axis line {
+		fill: none;
+		stroke: $axis-color;
+		stroke-width: $stroke-width-axis;
+	}
+
+	//.mouse-focus-label-y,
+	.mouse-focus-label-x {
+		text-anchor: middle;
+	}
+	.mouse-drag{
+		fill: $drag-color;
+	}
+
+	.elevation-toggle {
+		cursor: pointer;
+		width: 44px;
+		height: 44px;
+		color: #CCC;
+		text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+	}
+
+	.area {
+		fill: $base-color;
+		@include drop-shadow(0.6);
+	}
+
+	.mouse-focus-line {
+		pointer-events: none;
+		stroke-width: $stroke-width-mouse-focus;
+		stroke: $stroke-color;
+	}
+}
+
+.#{$theme}.leaflet-control.elevation-collapsed {
+	.background {
+		display: none;
+	}
+
+	.elevation-toggle {
+		@extend .control-icon;
+		@extend .fa-elevation;
+	}
+}
+
+.#{$theme}.height-focus{
+	stroke: $base-color;
+	fill: $base-color;
+	@include drop-shadow(0.6);
+}
+
+.#{$theme}.height-focus.line{
+	pointer-events: none;
+	stroke-width: $stroke-width-height-focus;
+	@include drop-shadow(0.6);
+}
+
+.#{$theme}.height-focus-label{
+	text-anchor: middle;
+	fill: $base-color;
+	@include drop-shadow(0.6);
+}
+
+.#{$theme}.height-focus.circle-lower {
+
+}

style/_mask_project.scss

@@ -68,15 +68,9 @@
 
 	/* Replace Layers image with font awesome icon */
 	.leaflet-control-layers-toggle {
-		font-size: 28px;
-		text-align: center;
-		line-height: 44px;
-		text-decoration: none;
-		color: #999;
-		text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-		background: none;
-		@extend .fa;
+		@extend .control-icon;
 		@extend .fa-layers;
+		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
 	}
 
 	.leaflet-control-layers-expanded .leaflet-control-layers-toggle {

style/spot.scss

@@ -6,6 +6,7 @@
 
 /* Site Global CSS */
 @import 'common';
+@import 'leaflet_elevation';
 
 /* Pages Specific CSS (masks) */
 @import 'mask_project';