Merge branch 'master' into develop

src/styles/button.scss

@@ -1,4 +1,6 @@
-  .button {
+@import "colors";
+
+.button {
   background: #444444;
   padding: 4px 16px;
   height: 18px;
@@ -50,9 +52,9 @@
     height: 100%;
     opacity: 0;
   }
-  }
+}
 
-  .button-group {
+.button-group {
   display: flex;
 
   .button {
@@ -67,4 +69,4 @@
       border-radius: 0 $button_radius $button_radius 0;
     }
   }
-  }
+}

src/styles/dialogs.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .dialog {
   position: fixed;
   left: 0;

src/styles/gpx.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .gpx-title {
   display: flex;
   flex-direction: row;

src/styles/logo.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .logo-preview {
   position: fixed;
   right: 0;

src/styles/map.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 #map {
   width: 50% !important;
   height: 100%;
@@ -28,7 +30,7 @@
 
 .leaflet-vertex-drag-helper {
   pointer-events: none !important;
-  background: fade(red, 50%);
+  background: darken(red, 50%);
   border-radius: 12px;
 
   &::after {

src/styles/panel.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .control-bar {
   background: $bar_background;
   border-radius: $panel_radius;

src/styles/progress.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .progress {
   width: 100%;
   position: relative;

src/styles/renderer.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .renderer-shade {
   position: fixed;
   top: 0;

src/styles/router.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .router-waypoint {
   width: 40px;
   height: 40px;
@@ -5,6 +7,7 @@
   margin-top: -20px;
   outline: none;
   z-index: 10001;
+  position: absolute;
 
   &:after {
     content: ' ';

src/styles/save.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .save-helper {
   padding: 0;
   flex-direction: column;

src/styles/slider.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 $disabledColor: #ccc;
 $border-radius-base: 6px;
 $primary-color: transparent;

src/styles/stickers.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .leaflet-dragging .sticker-container {
   transition: none !important;
 }

src/styles/switch.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .switch {
   height: 1em;
   width: 2em;

src/styles/user-button.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .user-bar {
   // width: 160px;
 

src/utils/map/DomMarker.ts

@@ -33,6 +33,10 @@ export class DomMarker extends DivIcon {
 
   createIcon(oldicon?: HTMLElement) {
     this.element.classList.add('icon')
+
+    if (this.options.className) {
+      this.element.classList.add(this.options.className);
+    }
     return this.element;
   }
 }