LT-249: Creating active state for measurement rows

Packages/design/styles/variables.styl

@@ -39,4 +39,4 @@ $transitionDuration = 0.3s
 $transitionEffect = ease
 $sidebarTransition = all $transitionDuration $transitionEffect
 $studiesSidebarMenuWidth = 307px
-$lesionsSidebarMenuWidth = 317px
+$lesionsSidebarMenuWidth = 323px

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl

@@ -33,7 +33,7 @@
     -o-transition: $sidebarTransition
     -moz-transition: $sidebarTransition
     transition: $sidebarTransition
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0)
 
     &.sidebar-left-open.sidebar-right-open
       width: 'calc(100% - %s)' % ($studiesSidebarMenuWidth + $lesionsSidebarMenuWidth)
@@ -45,14 +45,24 @@
       width: 'calc(100% - %s)' % $studiesSidebarMenuWidth
 
     &.sidebar-left-open
-      transform: translate3d($studiesSidebarMenuWidth,0,0);
+      transform: translate3d($studiesSidebarMenuWidth, 0, 0)
 
   .sidebar-right
-    width: $lesionsSidebarMenuWidth
-    order: 3
     flex: 0
+    order: 3
+    padding-left: 6px
     right: - $lesionsSidebarMenuWidth
-    border-left: $uiBorderThickness $uiBorderColor solid
+    width: $lesionsSidebarMenuWidth
+
+    &:before
+      background-color: $uiBorderColor
+      content: ''
+      display: block
+      height: 100%
+      left: 5px
+      position: absolute
+      top: 0
+      width: $uiBorderThickness
 
     &.sidebar-open
       right: 0

Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl

@@ -6,6 +6,28 @@
   margin-top: 2px
   width: 100%
 
+  &.active
+    margin-left: -6px
+    padding-left: 6px
+    // required transformation to make inner fixed elements relative to this one
+    transform(scale(1))
+
+    &:before
+      background-color: $activeColor
+      border-top-left-radius: 7px
+      border-bottom-left-radius: 7px
+      content: ''
+      display: block
+      height: 100%
+      left: 0
+      pointer-events: none
+      position: fixed
+      top: 0
+      width: 5px
+
+    .lesionRowSidebar
+      color: $activeColor
+
   .lesionRowSidebar
     background: $uiGrayDark
     color: $textSecondaryColor
@@ -19,9 +41,6 @@
       padding-top: 10px
       text-align: center
 
-    &.active
-      border-left: 4px $activeColor solid
-
   .lesionDetails
     flex: 1
     padding: 5px 2px 0 14px

Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl

@@ -3,8 +3,10 @@
   height: 100%
   overflow-x: hidden
   overflow-y: auto
+  margin-left: -6px
   margin-right: -16px
   padding-bottom: 100px
+  padding-left: 6px
 
   -webkit-overflow-scrolling: touch