Moving select-tree component to a new package called ohif:select-tree

Packages/ohif-select-tree/client/components/selectTree/selectTree.styl

@@ -0,0 +1,289 @@
+@import "{ohif:design}/app"
+
+// TODO: [design] can't we use colors that are already in common pallete?
+$gray1 = #A3A3A3
+$gray2 = #A0A0A0
+$gray3 = #C4C4C4
+$gray4 = #C0C0C0
+$gray5 = #9B9B9B
+$gray6 = #303030
+
+.select-tree-root
+
+  .tree-content
+    background-color: white
+    position: relative
+    transition(transform 0.3s ease\, background-color 0.3s ease\, border-color 0.3s ease\, border-radius 0.3s ease)
+
+    .tree-search
+    a.tree-back
+    .tree-breadcrumb span
+    .tree-node
+    .tree-leaf
+      transition(all 0.3s ease)
+
+  &.selected
+
+    label.tree-leaf.active
+      box-shadow: 0 0 0 10px white, inset 0 0 0 200px white
+
+    .tree-content
+      background-color: transparent
+
+    &>.tree-content
+      border-color: transparent
+      border-radius: 0
+
+      .tree-search
+        background-color: transparent
+        border-color: transparent
+        color: transparent
+
+        input,
+        i
+          opacity: 0
+
+    &, .select-tree
+
+      &:not(.open)>.tree-content
+
+        &>.tree-inputs
+        &>.tree-breadcrumb
+          display: none
+
+      &>.tree-content>.tree-options
+
+        &>.tree-inputs>label:not(.active)
+        &>.tree-breadcrumb a
+        &>.tree-breadcrumb span
+          color: transparent
+
+        &>.tree-inputs>label.tree-node:not(.active)
+          border-color: transparent
+
+    &.common-clicked .tree-leaf.active
+      background-color: transparent
+      box-shadow: none
+      color: transparent
+
+.select-tree-root
+  display: inline-block
+  position: relative
+  z-index: 0
+
+  &>.tree-content
+    border: 1px solid $gray3
+    border-radius: 5px
+    overflow: hidden
+
+  &>.tree-content>.tree-options
+    transform(scale(1))
+    transition(height 0.3s ease)
+
+  .tree-search
+    background-color: $gray4
+    border-bottom: 1px solid $gray3
+    color: $gray6
+    display: flex
+    margin: 0
+    padding: 5px
+    position: relative
+    text-align: center
+
+    span
+      font-weight: bold
+      line-height: 24px
+
+    input
+      border-color: $gray5
+      font-weight: normal
+      padding-left: 34px
+      transition(opacity 0.3s ease)
+
+      & ~ i
+        color: $gray1
+        font-size: 18px
+        left: 16px
+        position: absolute
+        top: 37px
+        transition(opacity 0.3s ease)
+
+  .tree-breadcrumb
+    line-height: 32px
+    padding: 5px 12px
+
+    .path-link, .tree-current-node
+      display: inline-block
+      font-weight: normal
+      float: left
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+      i
+        margin-right: 5px
+
+  .select-tree-node
+    left: 0
+    overflow: hidden
+    position: fixed
+    width: 100%
+    z-index: 2
+
+    &
+    .tree-content
+    .tree-inputs
+      height: 100%
+
+  .tree-options
+    overflow: hidden
+    position: relative
+    z-index: 2
+
+    .tree-node, .tree-leaf
+      cursor: pointer
+      display: block
+      font-weight: normal
+      margin-bottom: 0
+      padding: 0 12px
+      position: relative
+      z-index: 1
+
+      &>input
+        display: none
+
+    .tree-node
+      height: 41px
+      border-bottom: 1px solid $gray3
+      border-top: 1px solid $gray3
+      line-height: 41px
+      margin-top: -1px
+
+      &:last-child
+        border-bottom: 0
+
+    .tree-leaf
+      box-shadow: 0 0 0 200px transparent, inset 0 0 0 200px transparent
+      line-height: 26px
+
+      &.active
+        box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
+        transition(box-shadow 0.3s ease)
+        z-index: 0
+
+        &:last-child:after
+          display: block
+          content: ''
+          height: 10px
+
+    &.collapsed
+      z-index: 1
+
+  .select-tree-common
+    height: 100%
+    padding-left: 6px
+    position: absolute
+    right: 0
+    top: 0
+    width: 50%
+
+    .content
+      background-color: $gray6
+      border: 1px solid $gray5
+      border-radius: 5px
+      color: white
+      opacity: 0.9
+      padding: 0 15px 12px
+      position: absolute
+      top: 50%
+      transform(translateY(-50%))
+      width: calc(100% - 6px)
+
+      h5.title
+        color: $gray5
+        font-weight: normal
+        line-height: 20px
+        margin: 12px 0 16px
+
+      div.labels
+        position: relative
+
+      label
+        cursor: pointer
+        display: block
+        font-weight: 300
+        line-height: 26px
+        margin: 0
+        padding-left: 3px
+        transition(padding 0.3s ease)
+
+        &:hover
+          padding-left: 0
+
+.select-tree-root
+
+  &>.tree-content
+    transform(scale(0))
+    transform-origin(100% 50%)
+
+  .select-tree-common
+    z-index: -1
+
+    .content
+      margin-left: calc(-100% - 6px)
+      transition(all 0.3s ease 0.3s)
+
+  &.started
+
+    &>.tree-content
+      transform(scale(1))
+
+    .select-tree-common
+      animation-name: selectTreeCommonOverflow
+      animation-delay: 0.3s
+      animation-duration: 0.3s
+      animation-iteration-count: 1
+      animation-direction: alternate
+      animation-fill-mode: forwards
+
+      .content
+        margin-left: 0
+
+  &.interacted, &.selected
+
+    .select-tree-common
+      z-index: 1
+
+      .content
+        animation-name: selectTreeCommonCloseLeft
+        animation-duration: 0.3s
+        animation-iteration-count: 1
+        animation-direction: alternate
+        animation-timing-function: ease-out
+        animation-fill-mode: forwards
+
+@keyframes selectTreeCommonOverflow {
+    from {
+        overflow: hidden
+    }
+    to {
+        overflow: visible
+    }
+}
+
+@keyframes selectTreeCommonCloseLeft {
+  from {
+    height: 37px
+    display: table
+    margin-left: 0
+    opacity: 1
+    visibility: visible
+  }
+  to {
+    height: 100%
+    margin-left: calc(-100% - 6px)
+    opacity: 0
+    visibility: hidden
+    width: calc(100% - 6px)
+  }
+}