Rounded legend tracks

masks/project.html

@@ -13,9 +13,9 @@
 	<div id="elems">
 		<div id="post-button"><i class="fa fa-fw"></i></div>
 		<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
-			<div class="line main">Trajet principal</div>
-			<div class="line off-track">Variante</div>
-			<div class="line hitchhiking">Hors rando</div>
+			<div class="track"><span class="line main"></span><span class="desc">Trajet principal</span></div>
+			<div class="track"><span class="line off-track"></span><span class="desc">Variante</span></div>
+			<div class="track"><span class="line hitchhiking"></span><span class="desc">Hors rando</span></div>
 		</div>
 	</div>
 </div>
@@ -99,7 +99,7 @@ function initPage(asHash) {
 		$('#legend').find('.line').each(function(iKey, oLegend){
 			var $Legend = $(oLegend);
 			var sTrackType = $Legend.attr('class').replace('line', '').trim();
-			self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
+			self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('height')), color: $Legend.css('background-color'), opacity: 1});
 		});
 		
 		//Scrollbar

style/_mask_project.scss

@@ -140,27 +140,29 @@ $legend-color: #222;
 	}
 
 	#legend {
-		.line {
-			display: block;
-			border-left: 2em solid;
-			line-height: 4px;
-			padding-left: 0.5em;
-			margin: 1em 1em 0.5em;
-			font-size: 1em;
-			color: $legend-color;
-			
-			&:first-child {
-				margin-top: 0.5em;
+		.track {
+			.line {
+				width: 2em;
+				height: 4px;
+				display: inline-block;
+				border-radius: 2px;
+				vertical-align: middle;				
+				
+				&.main {
+					background-color: $track-main-color;
+				}
+				&.off-track {
+					background-color: $track-off-track-color;
+				}
+				&.hitchhiking {
+					background-color: $track-hitchhiking-color;
+				}
 			}
 			
-			&.main {
-				border-color: $track-main-color;
-			}
-			&.off-track {
-				border-color: $track-off-track-color;
-			}
-			&.hitchhiking {
-				border-color: $track-hitchhiking-color;
+			.desc {
+				font-size: 1em;
+				margin-left: 0.5em;
+				color: $legend-color;
 			}
 		}
 	}

style/scss.bat

@@ -1 +1 @@
-sass --unix-newline -l --style=compressed --watch spot.scss:spot.css
+sass --style=compressed --watch spot.scss:spot.css