ohif-viewer/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@import "{ohif:design}/app"

$switchSize = 55px
$seriesSpacing = 2px

.quickSwitchWrapper
  position: fixed
  top: 0
  z-index: 1

  &.middle
    left: 50%

    .quickSwitch
      transform(translateX(-50%))

  &.left
    theme('border-right', '1px solid $uiBorderColor')
    right: 50%
    &.right-sidebar-only
      .seriesHover
        .scrollArea
          padding-left: 200px;

  &.right
    left: 50%
    &.left-sidebar-only
      .seriesHover
        .scrollArea
          padding-right: 200px;

  &.overlay .quickSwitch
    transition(z-index 0s linear 0s)
    z-index: 3

  &:before
    theme('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: 2

  &.overlay:before
    opacity: 0.8
    transition(opacity 0.3s ease\, visibility 0s linear 0s)
    visibility: visible

.quickSwitch
  position: relative
  transition(z-index 0s linear 0.3s)
  z-index: 1

  .switchSection
    display: inline-block
    float: left
    height: 100%
    position: relative

    &.switchSectionSeries.hover, &.switchSectionStudy:hover
      .seriesSwitch .seriesItem
        opacity: 0
      .switchHover
        opacity: 1
      .studyHover
        height: auto
        padding-top: $switchSize
        transition(padding-top 0.3s ease\, visibility 0s linear 0s)
        visibility: visible

    &.switchSectionSeries.hover
      .seriesHover
        .thumbnailsWrapper
          transform(scale(0.9) translateY($switchSize))
          transition(all 0.3s ease)
        .thumbnailEntry .seriesDetails
          opacity: 0
          visibility: hidden

      &:hover .seriesHover
        .thumbnailsWrapper
          transform(scale(1) translateY(0))
        .thumbnailEntry .seriesDetails
          opacity: 1
          transform(translateY(0))
          transition(all 0.3s ease)
          transition-delay(0.3s)
          visibility: visible

    .seriesHover .thumbnailEntry .seriesDetails
      opacity: 0
      transform(translateY(-36px))

    .seriesSwitch .seriesItem
      transition(opacity 0.3s ease)

    .studySwitch, .seriesSwitch
      position: relative

    .studySwitch
      .studyTimepointBrowser
        background-color: transparent
      .studyTimepointStudy.active .studyModality
        theme('box-shadow', 'inset 0 0 0 3px $activeColor')
      .studyBox
        theme('background-color', '$uiGrayDark')
        theme('border', 'solid 2px $uiBorderColorDark')
        border-radius: 11px
        display: block
        height: $switchSize
        width: $switchSize

    .seriesSwitch
      display: block
      height: $switchSize + $seriesSpacing
      width: $switchSize + $seriesSpacing

      .seriesItem
        theme('background-color', '$boxBackgroundColor')Dark
        border-radius: 3px
        height: 15px
        margin: $seriesSpacing
        width: 15px

        &.count
          background-color: transparent
          theme('color', '$textPrimaryColor')
          font-size: 12px
          font-weight: 500
          line-height: 17px
          text-align: center

        &.active
          theme('background-color', '$activeColor')

    .label
      theme('color', '$textSecondaryColor')
      display: block
      font-size: 12px
      font-weight: 500
      line-height: 12px
      padding: 0
      padding-bottom: 3px
      text-align: center

.switchHover
  border: 10px solid transparent
  border-radius: 5px
  margin: -10px
  opacity: 0
  overflow: hidden
  position: absolute
  top: 0
  z-index: 10000

  .scrollArea
    margin-right: -22px;
    max-height: 610px
    overflow-x: hidden
    overflow-y: scroll
    width: calc(100% + 22px)
    
    &.is-mac
      padding-right: 22px
      
    &.show-scroll-indicator-up:before
    &.show-scroll-indicator-down:after
      font-family: FontAwesome
      display: block
      theme('color', '$activeColor')
      font-size: 2em
      width: 100%
      height: 10px
      position: absolute
      z-index: 1
      text-align: center
      left: 0
        
    &.show-scroll-indicator-up:before
      top: -10px
      content: '\f102'
        
    &.show-scroll-indicator-down:after
      bottom: 18px
      content: '\f103'

.studyHover
  height: 0
  padding-top: 0
  transition(padding-top 0.3s ease\, visibility 0s linear 0.3s)
  visibility: hidden
  width: 320px

  .scrollArea
    height: 500px

.seriesHover
  transform(scale(0))
  transition(all 0.3s ease)
  width: 731px

  .thumbnailEntry
    margin: 0

.quickSwitchWrapper.left, .quickSwitchWrapper.middle
  .seriesHover .thumbnailEntry
    float: right
  .studyHover
    left: 0
  .seriesHover, .thumbnailsWrapper
    right: 0
    transform-origin(100% 0%)

.quickSwitchWrapper.right
  .seriesHover .thumbnailEntry
    float: left
  .studyHover
    right: 0
  .seriesHover, .thumbnailsWrapper
    left: 0
    transform-origin(0% 0%)

// Responsive layout
$switchSmallSize = 35px
$seriesSmallSpacing = 1px

@media screen and (max-width: 1023px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.5))
@media screen and (min-width: 1024px) and (max-width: 1151px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.61))
@media screen and (min-width: 1152px) and (max-width: 1279px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.69))
@media screen and (min-width: 1280px) and (max-width: 1359px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.77))
@media screen and (min-width: 1360px) and (max-width: 1439px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.82))
@media screen and (min-width: 1440px) and (max-width: 1599px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.87))
@media screen and (min-width: 1600px) and (max-width: 1919px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.97))
@media screen and (min-width: 1920px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(1))

@media screen and (max-width: 1599px)
  .quickSwitch
    .switchSection
      .studySwitch .studyBox
        border-radius: 7px
        height: $switchSmallSize
        width: $switchSmallSize
      .seriesSwitch
        height: $switchSmallSize + $seriesSmallSpacing
        width: $switchSmallSize + $seriesSmallSpacing
        .seriesItem
          border-radius: 2px
          height: 10px
          margin: $seriesSmallSpacing
          width: 10px
          &.count
            font-size: 10px
            font-weight: 300
            line-height: 10px