working timelinemenu

1 files changed, 86 insertions, 8 deletions

diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
index ed047e52d..90cc53b4c 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -1,16 +1,94 @@
+@import "./../globalCssVariables.scss"; 
+
+
 .timeline-menu-container{
     position: absolute;
+    display: flex;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    flex-direction: column;
+    background: whitesmoke;
     z-index: 10000;
     width: 150px; 
-    height: auto; 
-    background-color: black;
-    .timeline-menu-button{
-        width:100%; 
-        height: 30px; 
+    padding-bottom: 10px;
+    border-radius: 15px;
+
+    border: solid #BBBBBBBB 1px;
+ 
+
 
-    }
     .timeline-menu-input{
-        width:100%; 
-        height: 30px; 
+        font: $sans-serif; 
+        font-size: 13px; 
+        width:100%;
+        text-transform: uppercase; 
+        letter-spacing: 2px; 
+        margin-left: 10px; 
+        background-color: transparent; 
+        border-width: 0px; 
+        transition: border-width 500ms; 
+    }
+
+    .timeline-menu-input:hover{
+        border-width: 2px; 
+    }
+    
+    
+    
+
+    .timeline-menu-header{
+        border-top-left-radius: 15px; 
+        border-top-right-radius: 15px; 
+        text-transform: uppercase; 
+        background: $dark-color; 
+        letter-spacing: 2px; 
+
+        .timeline-menu-header-desc{
+            font:$sans-serif; 
+            font-size: 13px; 
+            text-align: center; 
+            color: whitesmoke; 
+        }
+    }
+
+
+    .timeline-menu-item {
+        // width: 11vw; //10vw
+        height: 30px; //2vh
+        background: whitesmoke;
+        display: flex; //comment out to allow search icon to be inline with search text
+        justify-content: left;
+        align-items: center;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        transition: all .1s;
+        border-style: none;
+        // padding: 10px 0px 10px 0px;
+        white-space: nowrap;
+        font-size: 13px;
+        color: grey;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        padding-right: 20px;
+        padding-left: 10px; 
+    }
+
+    .timeline-menu-item:hover {
+        border-width: .11px;
+        border-style: none;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        border-top-style: solid;
+        background: $darker-alt-accent; 
+    }
+
+    .timeline-menu-desc {
+        padding-left: 10px; 
+        font:$sans-serif; 
+        font-size: 13px; 
     }
+    
 }
\ No newline at end of file