prosemirror

1 files changed, 170 insertions, 0 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
new file mode 100644
index 000000000..47f448adb
--- /dev/null
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -0,0 +1,170 @@
+@import "./../globalCssVariables.scss"; 
+
+.minimize{
+    position:relative; 
+    z-index: 1000; 
+    height: 30px; 
+    width: 100px; 
+}
+.flyout-container{
+    background-color: transparent; 
+    position:absolute; 
+            
+    z-index:9999; 
+    height: 150px; 
+    width: 150px; 
+
+    .flyout{
+        background-color: transparent; 
+        transform: rotate(180deg); 
+        left:0px; 
+        top:0px; 
+        width: 100%; 
+        height: 100%; 
+    }
+    .input-container{
+        position: absolute; 
+        right:0px; 
+        top: 30px; 
+        width: 70px; 
+        input{
+            width: 100%; 
+        }
+    }
+    .text-container{
+        position:absolute; 
+        top:30px; 
+        left:0px; 
+        color:white
+    }
+}
+
+.placement-highlight{
+    background-color:blue; 
+    transform: translate(0px, 0px); 
+    transition: width 1000ms ease-in-out; 
+    transition: height 1000ms ease-in-out;
+    position: absolute; 
+}
+
+.timeline-container{
+    width:100%;
+    height:300px; 
+    position:absolute;
+    background-color: $light-color-secondary;
+    box-shadow: 0px 10px 20px; 
+    //transition: transform 1000ms ease-in-out; 
+    
+    .toolbox{
+        position:absolute; 
+        width: 100%;   
+        top: 10px; 
+        left: 20px; 
+        div{
+            float:left; 
+            margin-left: 10px; 
+            position:relative; 
+            .overview{
+                width: 200px; 
+                height: 100%; 
+                background-color: black; 
+                position:absolute; 
+            }
+        }
+    }
+    .info-container{ 
+        margin-top: 50px; 
+        right:20px; 
+        position:absolute; 
+        height: calc(100% - 100px); 
+        width: calc(100% - 140px); 
+        overflow: hidden;
+
+        .scrubberbox{
+            position:absolute; 
+            background-color: transparent; 
+            height: 30px;
+            width:100%; 
+            
+            .tick{
+                height:100%; 
+                width: 1px; 
+                background-color:black; 
+
+            }   
+        }
+        .scrubber{
+            top:30px; 
+            height: 100%; 
+            width: 2px; 
+            position:absolute;
+            z-index: 1001;
+            background-color:black; 
+            .scrubberhead{
+                top: -30px; 
+                height: 30px; 
+                width: 30px;
+                background-color:transparent; 
+                border-radius: 50%; 
+                border: 5px solid black; 
+                left: -15px;
+                position:absolute;                 
+            }
+        }
+
+        .trackbox{
+            top: 30px; 
+            height:calc(100% - 30px);
+            width:100%;
+            border:1px;
+            overflow:hidden;
+            background-color:white;
+            position:absolute;
+            box-shadow: -10px 0px 10px 10px grey; 
+        }
+        
+    }
+    .title-container{
+        margin-top: 80px; 
+        margin-left: 20px; 
+        height: calc(100% - 100px - 30px); 
+        width: 100px; 
+        background-color:white;
+        overflow: hidden;  
+        .datapane{
+            top:0px; 
+            width: 100px; 
+            height: 75px; 
+            border: 1px solid $dark-color;
+            background-color: $intermediate-color; 
+            color: white; 
+            position:relative; 
+            float:left; 
+            border-style:solid; 
+        }
+    }
+    .resize{
+        bottom: 5px; 
+        position:absolute; 
+        height: 30px; 
+        width: 50px; 
+        left: calc(50% - 25px);
+    }
+}
+
+
+
+.overview{
+    position: absolute; 
+    height: 50px; 
+    width: 200px; 
+    background-color: black; 
+    .container{        
+        position: absolute; 
+        float: left 0px; 
+        top: 25%; 
+        height: 75%; 
+        width: 100%; 
+        background-color: grey; 
+    }
+}
\ No newline at end of file