diff --git a/src/styles/button.scss b/src/styles/button.scss index b17de87..46e2293 100644 --- a/src/styles/button.scss +++ b/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; } } +} diff --git a/src/styles/dialogs.scss b/src/styles/dialogs.scss index ed7d7f5..caff976 100644 --- a/src/styles/dialogs.scss +++ b/src/styles/dialogs.scss @@ -1,3 +1,5 @@ +@import "colors"; + .dialog { position: fixed; left: 0; diff --git a/src/styles/gpx.scss b/src/styles/gpx.scss index 05d5310..7e591d8 100644 --- a/src/styles/gpx.scss +++ b/src/styles/gpx.scss @@ -1,3 +1,5 @@ +@import "colors"; + .gpx-title { display: flex; flex-direction: row; diff --git a/src/styles/logo.scss b/src/styles/logo.scss index b036d68..dd8acf4 100644 --- a/src/styles/logo.scss +++ b/src/styles/logo.scss @@ -1,3 +1,5 @@ +@import "colors"; + .logo-preview { position: fixed; right: 0; diff --git a/src/styles/map.scss b/src/styles/map.scss index 433979a..a1b7981 100644 --- a/src/styles/map.scss +++ b/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 { diff --git a/src/styles/panel.scss b/src/styles/panel.scss index 775f956..6bd3a1d 100644 --- a/src/styles/panel.scss +++ b/src/styles/panel.scss @@ -1,3 +1,5 @@ +@import "colors"; + .control-bar { background: $bar_background; border-radius: $panel_radius; diff --git a/src/styles/progress.scss b/src/styles/progress.scss index dd59173..17f7463 100644 --- a/src/styles/progress.scss +++ b/src/styles/progress.scss @@ -1,3 +1,5 @@ +@import "colors"; + .progress { width: 100%; position: relative; diff --git a/src/styles/renderer.scss b/src/styles/renderer.scss index bbe84d5..6d29ac4 100644 --- a/src/styles/renderer.scss +++ b/src/styles/renderer.scss @@ -1,3 +1,5 @@ +@import "colors"; + .renderer-shade { position: fixed; top: 0; diff --git a/src/styles/router.scss b/src/styles/router.scss index db28f70..a254252 100644 --- a/src/styles/router.scss +++ b/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: ' '; diff --git a/src/styles/save.scss b/src/styles/save.scss index 862b130..8edf45e 100644 --- a/src/styles/save.scss +++ b/src/styles/save.scss @@ -1,3 +1,5 @@ +@import "colors"; + .save-helper { padding: 0; flex-direction: column; diff --git a/src/styles/slider.scss b/src/styles/slider.scss index e74c902..e86dcc0 100644 --- a/src/styles/slider.scss +++ b/src/styles/slider.scss @@ -1,3 +1,5 @@ +@import "colors"; + $disabledColor: #ccc; $border-radius-base: 6px; $primary-color: transparent; diff --git a/src/styles/stickers.scss b/src/styles/stickers.scss index 7cc207f..94670eb 100644 --- a/src/styles/stickers.scss +++ b/src/styles/stickers.scss @@ -1,3 +1,5 @@ +@import "colors"; + .leaflet-dragging .sticker-container { transition: none !important; } diff --git a/src/styles/switch.scss b/src/styles/switch.scss index 8895b4c..21b2079 100644 --- a/src/styles/switch.scss +++ b/src/styles/switch.scss @@ -1,3 +1,5 @@ +@import "colors"; + .switch { height: 1em; width: 2em; diff --git a/src/styles/user-button.scss b/src/styles/user-button.scss index eec7fbc..1433c14 100644 --- a/src/styles/user-button.scss +++ b/src/styles/user-button.scss @@ -1,3 +1,5 @@ +@import "colors"; + .user-bar { // width: 160px; diff --git a/src/utils/map/DomMarker.ts b/src/utils/map/DomMarker.ts index 4f6c42c..3d4ec30 100644 --- a/src/utils/map/DomMarker.ts +++ b/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; } }