menu

1 files changed, 60 insertions, 26 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 452d9b354..ba20c9179 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -85,7 +85,9 @@
 
 .docCreatorMenu-options-container {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -93,40 +95,72 @@
     border: 1px solid whitesmoke;
     border-radius: 5px;
 
-    .docCreatorMenu-dropdown-button{
-        display: flex;
+    .docCreatorMenu-dropdown-hoverable {
         width: 140px;
         height: 25px;
-        background: whitesmoke; 
-        background-color: rgb(34, 34, 37);
-        border-radius: 5px;
-        border: 1px solid whitesmoke;
-        padding: 0px;
-        font-size: 12px;
-        margin: 10px;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        cursor: pointer;
+        margin-bottom: 17px;
+        z-index: 5;
 
-        &:hover .docCreatorMenu-dropdown-content{
+        &:hover .docCreatorMenu-dropdown-content {
             display: block;
         }
-    }
-
-    .docCreatorMenu-dropdown-content {
-        display: none;
-        position: absolute;
-        min-width: 100px;
-        z-index: 1;
 
-        .docCreatorMenu-dropdown-option{
-            display: block;
+        &:hover .docCreatorMenu-dropdown-title {
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
         }
 
+        .docCreatorMenu-dropdown-title{
+            display: flex;
+            width: 140px;
+            height: 25px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
+            border-radius: 5px;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 12px;
+            margin-top: 10px;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+    
+        .docCreatorMenu-dropdown-content {
+            display: none;
+            min-width: 100px;
+            height: 75px;
+            overflow-y: scroll;
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+    
+            .docCreatorMenu-dropdown-option{
+                display: flex;
+                background-color: rgb(42, 42, 46);
+                border-left: 1px solid whitesmoke;
+                border-right: 1px solid whitesmoke;
+                border-bottom: 1px solid whitesmoke;
+                width: 140px;
+                height: 25px;
+                justify-content: center;
+                justify-items: center;
+                padding-top: 3px;
+
+                &:hover {
+                    background-color: rgb(68, 68, 74);
+                    cursor: pointer;
+                }
+            }
+        }    
     }
 
-
-
+    .docCreatorMenu-layout-preview-window {
+        width: 85%;
+        height: 100px;
+        border: 1px solid whitesmoke;
+        border-radius: 5px;
+        background-color: rgb(34, 34, 37);
+    }
 }