ohif-viewer/LesionTracker/client/components/viewerSection/viewerSection.styl

@require '{ohif:design}/app'

.viewerSection
  display: flex
  flex: 1
  flex-flow: row nowrap
  align-items: stretch
  height: 'calc(100% - %s)' % ($toolbarHeight + $topBarHeight)
  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%
      max-width: inherit
      position: absolute
      transform(translateX(100%))
      transition($sidebarTransition)
      width: 100%

      &.active
        transform(translateX(0%))

  .sidebar-left
    theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
    flex: 1
    margin-left: - $studiesSidebarMenuWidth
    max-width: $studiesSidebarMenuWidth
    order: 1
    visibility: hidden

    &.sidebar-open
      margin-left: 0
      visibility: visible

  .loadingTextDiv
    theme('color', '$textSecondaryColor')
    font-size: 32px

  .mainContent
    flex: 1
    height: 100%
    order: 2
    overflow: visible
    position: relative
    transition($sidebarTransition)
    width: 100%

    .viewerMain
      left: 0
      position: absolute
      top: 0

  .sidebar-right
    flex: 1
    margin-right: - $rightSidebarMenuWidth
    max-width: $rightSidebarMenuWidth
    order: 3
    position: relative
    visibility: hidden

    &[data-timepoints="3"]
      margin-right: - ($rightSidebarMenuWidth + 135.5px)
      max-width: $rightSidebarMenuWidth + 135.5px

    &[data-timepoints="4"]
      margin-right: - ($rightSidebarMenuWidth + 270px)
      max-width: $rightSidebarMenuWidth + 270px

    &.sidebar-open
      margin-right: 0
      visibility: visible

  .studiesListedChanger
    theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
    padding: 20px 10px
    text-align: center