LT-251: Making studies switch behave like demonstrated in the design video

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -6,16 +6,41 @@ $seriesSpacing = 2px
 .quickSwitchWrapper
   position: absolute
   top: 0
+
   &.middle
     left: 50%
     transform(translateX(-50%))
+
   &.left
     border-right: 1px solid $uiBorderColor
     right: 50%
+
   &.right
     left: 50%
 
+  &.overlay .quickSwitch
+    z-index: 1
+
+  &:before
+    background-color: $primaryBackgroundColor
+    bottom: 0
+    content: ''
+    left: 0
+    opacity: 0
+    position: fixed
+    right: 0
+    top: 0
+    transition(opacity 0.3s ease\, visibility 0s linear 0.3s)
+    visibility: hidden
+    z-index: 1
+
+  &.overlay:before
+    opacity: 0.8
+    transition(opacity 0.3s ease\, visibility 0s linear 0s)
+    visibility: visible
+
 .quickSwitch
+  position: relative
 
   .switchSection
     display: inline-block
@@ -27,7 +52,7 @@ $seriesSpacing = 2px
       .studySwitch .studyBox, .seriesSwitch .seriesItem
         opacity: 0
       .switchHover
-        opacity: 0.8
+        opacity: 1
       .studyHover
         transform(scale(1))
 
@@ -35,7 +60,7 @@ $seriesSpacing = 2px
       .seriesHover
         .thumbnailsWrapper
           transition(all 0.3s ease)
-          transform(scale(0.8) translateY($switchSize))
+          transform(scale(0.9) translateY($switchSize*1.5))
         .thumbnailEntry .seriesDetails
           opacity: 0
           visibility: hidden
@@ -61,6 +86,8 @@ $seriesSpacing = 2px
       position: relative
 
     .studySwitch
+      .studyTimepointBrowser
+        background-color: transparent
       .studyTimepointStudy.active .studyModality
         box-shadow: inset 0 0 0 3px $activeColor
       .studyBox
@@ -105,7 +132,6 @@ $seriesSpacing = 2px
       text-transform: uppercase
 
 .switchHover
-  background: black
   border: 10px solid transparent
   border-radius: 5px
   margin: -10px