250 lines
5.8 KiB
Stylus
250 lines
5.8 KiB
Stylus
@import "{design}/app"
|
|
|
|
$switchSize = 55px
|
|
$seriesSpacing = 2px
|
|
|
|
.quickSwitchWrapper
|
|
position: fixed
|
|
top: 0
|
|
z-index: 1
|
|
|
|
&.middle
|
|
left: 50%
|
|
|
|
.quickSwitch
|
|
transform(translateX(-50%))
|
|
|
|
&.left
|
|
border-right: 1px solid $uiBorderColor
|
|
right: 50%
|
|
|
|
&.right
|
|
left: 50%
|
|
|
|
&.overlay .quickSwitch
|
|
transition(z-index 0s linear 0s)
|
|
z-index: 3
|
|
|
|
&: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: 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
|
|
box-shadow: inset 0 0 0 3px $activeColor
|
|
.studyBox
|
|
background-color: $uiGrayDark
|
|
border: solid 1px $activeColor
|
|
border-radius: 11px
|
|
display: block
|
|
height: $switchSize
|
|
width: $switchSize
|
|
|
|
.seriesSwitch
|
|
display: block
|
|
height: $switchSize + $seriesSpacing
|
|
width: $switchSize + $seriesSpacing
|
|
|
|
.seriesItem
|
|
background-color: $boxBackgroundColorDark
|
|
border-radius: 3px
|
|
height: 15px
|
|
margin: $seriesSpacing
|
|
width: 15px
|
|
|
|
&.count
|
|
background-color: transparent
|
|
color: $textPrimaryColor
|
|
font-size: 12px
|
|
font-weight: 500
|
|
line-height: 17px
|
|
text-align: center
|
|
|
|
&.active
|
|
background-color: $activeColor
|
|
|
|
.label
|
|
color: $textSecondaryColor
|
|
display: block
|
|
font-size: 12px
|
|
font-weight: 300
|
|
line-height: 34px
|
|
padding: 0
|
|
text-align: center
|
|
text-transform: uppercase
|
|
|
|
.switchHover
|
|
border: 10px solid transparent
|
|
border-radius: 5px
|
|
margin: -10px
|
|
opacity: 0
|
|
overflow: hidden
|
|
position: absolute
|
|
top: 0
|
|
z-index: 10000
|
|
|
|
.scrollArea
|
|
margin-right: -20px
|
|
min-height: 200px
|
|
max-height: 500px
|
|
overflow-x: hidden
|
|
overflow-y: scroll
|
|
width: calc(100% + 20px)
|
|
|
|
.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
|
|
.label
|
|
font-size: 8px
|
|
font-weight: 400
|
|
line-height: 12px
|
|
padding: 0
|
|
.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
|