Merge branch 'master' into develop

src/styles/button.scss

@@ -1,70 +1,72 @@
-  .button {
-    background: #444444;
-    padding: 4px 16px;
-    height: 18px;
-    line-height: 1em;
-    border-radius: $button_radius;
-    font-family: inherit;
-    font-size: 1em;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
+@import "colors";
+
+.button {
+  background: #444444;
+  padding: 4px 16px;
+  height: 18px;
+  line-height: 1em;
+  border-radius: $button_radius;
+  font-family: inherit;
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
+  color: white;
+  font-weight: 400;
+  border: none;
+  position: relative;
+
+  &.outline {
+    box-shadow: inset #444444 0 0 0 1px;
+    background: transparent;
+  }
+
+  &.primary {
+    background: #3c78db;
     color: white;
-    font-weight: 400;
-    border: none;
-    position: relative;
-
-    &.outline {
-      box-shadow: inset #444444 0 0 0 1px;
-      background: transparent;
-    }
-
-    &.primary {
-      background: #3c78db;
-      color: white;
-    }
-
-    &.danger {
-      background: #ed2f3b;
-      color: white;
-    }
-
-    &.success {
-      background: #17bf6d;
-      color: white;
-    }
-
-    &.disabled {
-      opacity: 0.5;
-      touch-action: none;
-      pointer-events: none;
-    }
-
-    input[type="file"] {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-    }
   }
 
-  .button-group {
-    display: flex;
+  &.danger {
+    background: #ed2f3b;
+    color: white;
+  }
 
-    .button {
-      border-radius: 0;
-      margin: 0;
+  &.success {
+    background: #17bf6d;
+    color: white;
+  }
 
-      &:first-child {
-        border-radius: $button_radius 0 0 $button_radius;
-      }
+  &.disabled {
+    opacity: 0.5;
+    touch-action: none;
+    pointer-events: none;
+  }
 
-      &:last-child {
-        border-radius: 0 $button_radius $button_radius 0;
-      }
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+}
+
+.button-group {
+  display: flex;
+
+  .button {
+    border-radius: 0;
+    margin: 0;
+
+    &:first-child {
+      border-radius: $button_radius 0 0 $button_radius;
+    }
+
+    &:last-child {
+      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;
   }
 }