1 files changed, 87 insertions, 0 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
new file mode 100644
index 000000000..854da5ed2
--- /dev/null
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -0,0 +1,87 @@
+@import "../../global/globalCssVariables.scss";
+.mapBox {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+
+        .mapBox-infoWindow {
+            background-color: white;
+            opacity: 0.75;
+            padding: 12; 
+            font-size: 17;
+        }
+
+        .mapBox-overlayButton-sidebar {
+            background: #121721;
+            height: 25px;
+            width: 25px;
+            right: 5px;
+            display: flex;
+            position: absolute;
+            align-items: center;
+            justify-content: center;
+            border-radius: 3px;
+            pointer-events: all;
+            z-index: 1; // so it appears on top of the document's title, if shown
+    
+            box-shadow: $standard-box-shadow;
+            transition: 0.2s;
+    
+            &:hover{
+                filter: brightness(0.85);
+            }
+        }
+
+        .mapBox-wrapper {
+            width: 100%;
+            .searchbox {
+                box-sizing: border-box;
+                border: 1px solid transparent;
+                width: 240px;
+                height: 32px;
+                padding: 0 12px;
+                border-radius: 3px;
+                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+                font-size: 14px;
+                outline: none;
+                text-overflow: ellipses;
+                position: absolute;
+                left: 50%;
+                margin-left: -120px;
+            }
+        }
+
+        .mapBox-sidebar-handle {
+            top: 0;
+            //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
+            width: 10px;
+            height: 100%;
+            max-height: 35px;
+            background: lightgray;
+            border-radius: 20px;
+            cursor:grabbing;
+        }
+        .mapBox-addMarker {
+            left: 50%;
+            margin-left: 120px;
+            right: unset !important;
+            margin-top: -10;
+            height: max-content;
+        }
+        .searchbox {
+            display:none;
+        }
+        .mapBox-addMarker {
+            display:none;
+        }
+}
+
+.mapBox:hover {
+    .mapBox-addMarker {
+        display:block;
+    }
+    .searchbox {
+        display :block;
+    }
+}