First pass at a Hanging Protocol implementation and editor (LT-131)

2016-05-07 12:40:02 +02:00
1 parent dfcb33153f
commit 2e52d9e3c1
@@ -0,0 +1,154 @@
+#protocolEditor
+  height: 100%
+  width: 450px
+  padding: 10px
+  position: absolute
+  top: 0
+  background: #212121
+
+  .navigationButtons
+    ul
+      margin: 0 auto
+      width: 300px
+
+    li
+      text-align: center
+      width: 150px
+      margin: 0
+
+      &:first-child:not(:last-child)
+        a
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+
+      &:last-child:not(:first-child)
+        a
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
+
+      a
+        padding: 3px 9px
+        cursor: pointer
+        text-decoration: none
+        outline: none
+        background: #3e3e3e
+        color: #ffffff
+
+        -webkit-transition: all 0.3s ease
+        -moz-transition: all 0.3s ease
+        -o-transition: all 0.3s ease
+        -ms-transition: all 0.3s ease
+        transition: all 0.3s ease
+
+      &.active
+        a
+          background: #ffffff
+          color: #3e3e3e
+
+  p
+  h2
+  h3
+  h4
+    color: #f5f5f5
+
+  label
+  ul
+    color: #f5f5f5
+    font-weight: 400
+
+  label
+    margin-right: 10px
+    width: 25%
+
+  input[type='number']
+  input[type='text']
+    min-width: 50px
+    width: 40%
+    border: none
+    background: #212121
+    color: #ffffff
+    text-align: center
+
+  button.btn
+    background: #ffffff
+    color: #3e3e3e
+
+  .protocolEditorSection
+    padding: 10px
+    margin: 10px 0
+
+  #protocolOptions
+    text-align: center
+    position: absolute
+    bottom: 0
+    width: 100%
+
+    p
+      font-size: 8pt
+      color: #B3B3B3
+      margin: 0 10px
+      display: inline-block
+
+  #editProtocol
+    overflow-y: auto
+    overflow-x: hidden
+    padding-right: 16px
+    padding-left: 20px
+    margin-right: -16px
+    width: 100%
+    height: calc(100% - 120px)
+    &::-webkit-scrollbar
+      display: none
+
+  #selectProtocol
+    text-align: center
+
+    .btn-file 
+      position: relative
+      overflow: hidden
+      
+    .btn-file input[type=file] 
+      position: absolute
+      top: 0
+      right: 0
+      min-width: 100%
+      min-height: 100%
+      font-size: 100px
+      text-align: right
+      filter: 'alpha(opacity=0)'
+      opacity: 0
+      outline: none
+      background: white
+      cursor: inherit
+      display: block
+
+    .protocolDropdown
+      display: inline-block
+
+      ul
+        li
+          a
+            cursor: pointer
+
+  #activeViewportEditor
+    padding: 10px
+
+    .noActiveViewport
+      padding: 40px
+
+      h3
+        color: #f5f5f5
+
+.cbp-spmenu-right 
+  right: -450px
+
+.cbp-spmenu-right.cbp-spmenu-open 
+  right: 0
+  
+
+/* Transitions */
+
+.cbp-spmenu
+  -webkit-transition: all 0.3s ease
+  -moz-transition: all 0.3s ease
+  transition: all 0.3s ease