Make a properties panel for ghost buses (#207)

assets/css/_properties_panel.scss

@@ -0,0 +1,25 @@
+.m-properties-panel {
+  background-color: $color-bg-base;
+  box-shadow: $modal-box-shadow;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 23.5rem;
+  z-index: 1001;
+}
+
+.m-properties-panel__modal-overlay {
+  background-color: $modal-overlay-color;
+  height: 100%;
+  left: inherit;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}

assets/css/app.scss

@@ -6,21 +6,26 @@ $tab-bar-width: 3rem;
 @import "leaflet";
 
 @import "close_button";
-@import "headway_diagram";
 @import "incoming_box";
 @import "ladder";
 @import "ladder_page";
 @import "layover_box";
 @import "page";
 @import "picker_container";
+@import "properties_panel";
+@import "properties_panel/close_button";
+@import "properties_panel/ghost_properties_panel";
+@import "properties_panel/header";
+@import "properties_panel/headway_diagram";
+@import "properties_panel/properties_list";
+@import "properties_panel/vehicle_properties_panel";
 @import "route_ladder";
 @import "route_ladders";
 @import "route_picker";
 @import "route_filter";
 @import "shuttle_map";
 @import "tab_bar";
 @import "vehicle_icon";
-@import "vehicle_properties_panel";
 @import "vehicle_map";
 
 body {

assets/css/properties_panel/_close_button.scss

@@ -0,0 +1,6 @@
+.m-properties-panel__close-button {
+  @include button-simple;
+  display: block;
+  margin: 1rem;
+  width: calc(100% - 2rem);
+}

assets/css/properties_panel/_ghost_properties_panel.scss

@@ -0,0 +1,9 @@
+.m-ghost-properties-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .m-properties-panel__properties-list {
+    flex: 1 0 auto;
+  }
+}

assets/css/properties_panel/_header.scss

@@ -0,0 +1,78 @@
+.m-properties-panel__header {
+  display: flex;
+}
+
+.m-properties-panel__label {
+  flex: 0 0 auto;
+  padding: 1rem;
+  text-align: center;
+  width: 4rem;
+}
+
+.m-properties-panel__variant {
+  border-left: 1px solid $color-rule;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+
+.m-properties-panel__inbound-outbound {
+  @include font-emph;
+  margin-bottom: 0.4rem;
+}
+
+.m-properties-panel__variant-name {
+  @include font-header;
+}
+
+.m-properties-panel__headway-target,
+.m-properties-panel__schedule-adherence {
+  @include font-small;
+  margin-top: 0.7rem;
+}
+
+.m-properties-panel__headway-target-label {
+  font-weight: bold;
+  margin-right: 0.3rem;
+}
+
+.m-properties-panel__headway-target-value {
+  @include font-body;
+}
+
+.m-properties-panel__schedule-adherence {
+  display: flex;
+}
+
+.m-properties-panel__schedule-adherence-status-icon {
+  margin-right: 0.4rem;
+
+  .on-time & {
+    fill: $color-vehicle-ontime;
+  }
+  .early & {
+    fill: $color-vehicle-early;
+  }
+  .late & {
+    fill: $color-vehicle-late;
+  }
+  .off-course & {
+    fill: $color-vehicle-off-course;
+  }
+}
+
+.m-properties-panel__schedule-adherence-status-string {
+  font-weight: bold;
+  margin-right: 0.3rem;
+  text-transform: uppercase;
+}
+
+.m-properties-panel__schedule-adherence-label {
+  .on-time & {
+    color: $color-component-medium;
+  }
+}
+
+.m-properties-panel__header > button {
+  flex: 0 0 auto;
+  padding: 1rem;
+}

assets/css/_headway_diagram.scss → assets/css/properties_panel/_headway_diagram.scss

@@ -1,4 +1,5 @@
 .m-headway-diagram {
+  border-top: 1px solid $color-rule;
   padding: 0.6875rem 0 0.45rem;
   position: relative;
 }

assets/css/properties_panel/_properties_list.scss

@@ -0,0 +1,16 @@
+.m-properties-panel__properties-list {
+  border-top: 1px solid $color-rule;
+  padding: 1rem;
+}
+
+.m-properties-panel__property-label {
+  @include font-label;
+  margin-bottom: 0.5rem;
+  text-align: left;
+  width: 6rem;
+}
+
+.m-properties-panel__property-value {
+  @include font-body;
+  margin-bottom: 1rem;
+}