LT-275: Creating measure flow component layout and motion

Packages/design/styles/components/selectTree.styl

@@ -0,0 +1,72 @@
+@import "{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
+  background-color: white
+  border: 1px solid $gray3
+  border-radius: 5px
+  display: table
+  overflow: hidden
+
+  .tree-search
+    background-color: $gray4
+    border-bottom: 1px solid $gray3
+    color: $gray6
+    display: block
+    margin: 0
+    padding: 5px
+    text-align: center
+
+    span
+      font-weight: bold
+      line-height: 24px
+
+    input
+      border-color: $gray5
+      font-weight: normal
+
+  .tree-breadcrumb
+    line-height: 32px
+    padding: 5px 12px
+
+  .tree-options
+    overflow: hidden
+
+    .tree-node, .tree-leaf
+      cursor: pointer
+      display: block
+      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
+      line-height: 26px
+
+    label
+      transition(all 0.3s ease)
+
+    &.collapsed
+
+      &>.tree-breadcrumb, &>label:not(.active)
+        display: none