diff --git a/assets/css/_vehicle_map.scss b/assets/css/_vehicle_map.scss index fdfdf7763..cee2e67c0 100644 --- a/assets/css/_vehicle_map.scss +++ b/assets/css/_vehicle_map.scss @@ -15,71 +15,6 @@ $map-component-z-index: ( } } -.c-vehicle-map__label { - svg { - overflow: visible; - } - - &.primary { - font-size: var(--font-size-s); - font-weight: 500; - } - - &.secondary { - @include font-tiny; - } - - &.selected .c-vehicle-icon__label-background { - fill: $color-eggplant-300; - } -} - -.c-vehicle-map__icon { - path { - fill: $color-primary-legacy; - stroke: $color-bg-base; - stroke-width: 2; - - &.on-time { - fill: $color-vehicle-ontime; - } - - &.early.early-red { - fill: $color-vehicle-red; - } - &.early.early-blue { - fill: $color-vehicle-blue; - } - - &.late.early-red { - fill: $color-vehicle-blue; - } - &.late.early-blue { - fill: $color-vehicle-red; - } - - &.off-course { - fill: $color-vehicle-off-course; - } - - &.logged-out { - fill: $color-gray-300; - stroke: $color-gray-600; - stroke-width: 1px; - } - - &.selected { - stroke: $color-eggplant-600; - stroke-width: 1.5; - filter: drop-shadow(1px 1px 4px $color-eggplant-400); - } - } - - svg { - overflow: visible; - } -} - .c-vehicle-properties-panel__location .c-vehicle-map .leaflet-right { padding-right: calc(env(safe-area-inset-right) - #{$vpp-location-padding}); } diff --git a/assets/css/app.scss b/assets/css/app.scss index 3e2d2f841..3ad6dbded 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -73,6 +73,7 @@ $vpp-location-padding: 1rem; @import "map/markers/missed_stop_icon"; @import "map/markers/stop_icon"; @import "map/markers/user_location_marker"; +@import "map/markers/vehicle_marker"; @import "minimal_ladder_page"; @import "minischedule"; @import "modal"; diff --git a/assets/css/map/markers/_vehicle_marker.scss b/assets/css/map/markers/_vehicle_marker.scss new file mode 100644 index 000000000..596c81561 --- /dev/null +++ b/assets/css/map/markers/_vehicle_marker.scss @@ -0,0 +1,64 @@ +.c-vehicle-map__icon { + path { + fill: $color-primary-legacy; + stroke: $color-bg-base; + stroke-width: 2; + + &.on-time { + fill: $color-vehicle-ontime; + } + + &.early.early-red { + fill: $color-vehicle-red; + } + &.early.early-blue { + fill: $color-vehicle-blue; + } + + &.late.early-red { + fill: $color-vehicle-blue; + } + &.late.early-blue { + fill: $color-vehicle-red; + } + + &.off-course { + fill: $color-vehicle-off-course; + } + + &.logged-out { + fill: $color-gray-300; + stroke: $color-gray-600; + stroke-width: 1px; + } + + &.selected { + stroke: $color-eggplant-600; + stroke-width: 1.5; + filter: drop-shadow(1px 1px 4px $color-eggplant-400); + } + } + + svg { + overflow: visible; + } +} + +.c-vehicle-map__label { + svg { + overflow: visible; + } + + &.primary { + font-size: var(--font-size-s); + font-weight: 500; + } + + &.secondary { + @include font-tiny; + } + + &.selected .c-vehicle-icon__label-background { + fill: $color-eggplant-300; + } +}