Updating design of OHIF Viewer using (OHIF-49)

OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl

@@ -0,0 +1,80 @@
+@import "{design}/app"
+
+$lesionsSidebarMenuWidth = 450px
+
+.viewerSection
+  display: flex
+  flex: 1
+  flex-flow: row nowrap
+  align-items: stretch
+  height: calc(100% - 78px);
+  width: 100%
+
+  .sidebarMenu
+    height: 100%
+    // required transformation to make inner fixed elements relative to this one
+    transform(scale(1))
+    transition($sidebarTransition)
+
+    .sidebar-option
+      height: 100%
+      position: fixed
+      transform(translateX(100%))
+      transition($sidebarTransition)
+      width: 100%
+
+      &.active
+        transform(translateX(0%))
+
+  .sidebar-left
+    max-width: $studiesSidebarMenuWidth
+    order: 1
+    flex: 1
+    margin-left: - $studiesSidebarMenuWidth
+    border-right: $uiBorderThickness $uiBorderColor solid
+
+    &.sidebar-open
+      margin-left: 0
+
+  .mainContent
+    flex: 1
+    order: 2
+    width: 100%
+    height: 100%
+    overflow: hidden
+    transition($sidebarTransition)
+
+  .sidebar-right
+    flex: 1
+    margin-left: -6px
+    margin-right: - $lesionsSidebarMenuWidth
+    max-width: $lesionsSidebarMenuWidth
+    order: 3
+    padding-left: 6px
+    position: relative
+
+    &[data-timepoints="3"]
+      margin-right: - ($lesionsSidebarMenuWidth + 135.5px)
+      max-width: $lesionsSidebarMenuWidth + 135.5px
+
+    &[data-timepoints="4"]
+      margin-right: - ($lesionsSidebarMenuWidth + 270px)
+      max-width: $lesionsSidebarMenuWidth + 270px
+
+    &:before
+      background-color: $uiBorderColor
+      content: ''
+      display: block
+      height: 100%
+      left: 5px
+      position: absolute
+      top: 0
+      width: $uiBorderThickness
+
+    &.sidebar-open
+      margin-right: 0
+
+  .studiesListedChanger
+    padding: 20px 10px
+    text-align: center
+    border-bottom: $uiBorderThickness $uiBorderColor solid