feat(ts/components/vehicleMarker): move vehicleMarker css into own …

…file
mbta · Oct 17, 2024 · 7e4f637 · 7e4f637
1 parent b95cbcf
commit 7e4f637
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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;
+  }
+}