LT-275: Finishing measure flow styles and animations

Packages/design/app.styl

@@ -1,3 +1,4 @@
+@import "{design}/styles/imports/animations"
 @import "{design}/styles/imports/mixins"
 @import "{design}/styles/imports/spacings"
 @import "{design}/styles/imports/variables"

Packages/design/package.js

@@ -26,6 +26,7 @@ Package.onUse(function(api) {
     // Common styles
     api.addFiles([
         'styles/common/webfonts.styl',
+        'styles/common/keyframes.styl',
         'styles/common/global.styl',
         'styles/common/spacings.styl'
     ], 'client');

Packages/design/styles/common/keyframes.styl

@@ -0,0 +1,10 @@
+@import "{design}/app.styl"
+
+@keyframes zoomInOut {
+    from {
+        transform(scale(0))
+    }
+    to {
+        transform(scale(1))
+    }
+}

Packages/design/styles/imports/animations.styl

@@ -0,0 +1,7 @@
+animateZoomIn()
+  animation-name: zoomInOut
+  animation-duration: 0.3s
+  animation-iteration-count: 1
+  animation-direction: alternate
+  animation-timing-function: ease-out
+  animation-fill-mode: forwards

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -2,7 +2,8 @@
 
 .measure-flow
 
-  &.open
+  &.open,
+  &.selected
 
     .btn-add
       display: none
@@ -18,13 +19,65 @@
     line-height: 24px
     padding: 0 14px
 
-  .select-tree-root>.tree-content>.tree-options
+  .select-tree-root>.tree-content
-    margin-right: -20px
+    width: 213px
-    max-height: 250px
+
-    overflow-x: hidden
+    &>.tree-options
-    overflow-y: scroll
+      margin-right: -17px
-    position: relative
+      max-height: 250px
-    z-index: 2
+      overflow-x: hidden
+      overflow-y: scroll
+      position: relative
+      z-index: 2
 
     .tree-inputs
       position: relative
+
+  &>.tree-leaf
+    position: relative
+
+    &:before
+      animateZoomIn()
+      background-color: $activeColor
+      border-radius: 20px
+      color: $uiGray
+      content: '\f00c'
+      display: block
+      font-family: FontAwesome
+      font-size: 24px
+      height: 40px
+      left: -46px
+      line-height: 40px
+      position: absolute
+      text-align: center
+      top: 3px
+      width: 40px
+
+    span
+      background: white
+      font-weight: normal
+      height: 46px
+      line-height: 46px
+      padding: 0 12px
+
+    input, span
+      display: none
+
+    .actions
+      margin-top: 16px
+
+      button
+        background-color: transparent
+        border-radius: 16px
+        border: 1px solid $uiBorderColor
+        color: $textPrimaryColor
+        font-weight: normal
+        height: 31px
+        line-height: 31px
+        padding: 0 12px
+        text-align: center
+
+  &.selected>.tree-leaf
+
+    span
+      display: block