155 lines
3.2 KiB
Stylus
155 lines
3.2 KiB
Stylus
@import "{design}/app"
|
|
|
|
$switchSize = 50px
|
|
$switchTop = 5px
|
|
$switchHeight = 70px
|
|
$switchWrapperWidth = 140px
|
|
|
|
.quickSwitch
|
|
height: $switchHeight
|
|
position: absolute
|
|
top: $switchTop
|
|
width: $switchWrapperWidth
|
|
|
|
&.middle
|
|
left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
|
|
&.left
|
|
left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
|
|
&.right
|
|
left: calc(50% + 20px)
|
|
|
|
.switchSection
|
|
display: inline-block
|
|
float: left
|
|
height: 100%
|
|
margin: 0 5px
|
|
position: relative
|
|
|
|
&:hover
|
|
.studySwitch, .seriesSwitch
|
|
opacity: 0
|
|
.switchHover
|
|
opacity: 0.8
|
|
|
|
.label
|
|
color: $textSecondaryColor
|
|
display: block
|
|
font-size: 12px
|
|
font-weight: 300
|
|
text-align: center
|
|
text-transform: uppercase
|
|
|
|
.studySwitch, .seriesSwitch
|
|
transition(all 0.3s ease)
|
|
|
|
.studySwitch
|
|
background-color: $darkUiColor
|
|
border: solid 1px $activeColor
|
|
border-radius: 11px
|
|
display: block
|
|
height: $switchSize
|
|
margin: 0 auto
|
|
width: $switchSize
|
|
|
|
.seriesSwitch
|
|
display: block
|
|
height: $switchSize
|
|
width: $switchSize
|
|
|
|
svg
|
|
height: $switchSize
|
|
width: $switchSize
|
|
|
|
.mirror-x
|
|
transform(scaleX(-1))
|
|
|
|
.switchHover
|
|
background: black
|
|
border-radius: 5px
|
|
opacity: 0
|
|
overflow: hidden
|
|
position: absolute
|
|
top: 18px
|
|
transform(scale(0))
|
|
transition(all 0.3s ease)
|
|
z-index: 10000
|
|
|
|
.scrollArea
|
|
margin-right: -20px
|
|
min-height: 200px
|
|
max-height: 500px
|
|
overflow-y: scroll
|
|
width: calc(100% + 20px)
|
|
|
|
.studyHover
|
|
width: 300px
|
|
|
|
.seriesHover
|
|
width: 711px
|
|
|
|
.thumbnailEntry
|
|
margin: 0
|
|
|
|
.quickSwitch.left, .quickSwitch.middle
|
|
.seriesHover .thumbnailEntry
|
|
float: right
|
|
.studyHover
|
|
left: 0
|
|
transform-origin(0% 0%)
|
|
.seriesHover
|
|
right: 0
|
|
transform-origin(100% 0%)
|
|
|
|
.quickSwitch.right
|
|
.seriesHover .thumbnailEntry
|
|
float: left
|
|
.studyHover
|
|
right: 0
|
|
transform-origin(100% 0%)
|
|
.seriesHover
|
|
left: 0
|
|
transform-origin(0% 0%)
|
|
|
|
// Responsive layout
|
|
$switchSizeSmall = 35px
|
|
|
|
@media screen and (max-width: 1024px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(0.5))
|
|
@media screen and (min-width: 1025px) and (max-width: 1152px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(0.6))
|
|
@media screen and (min-width: 1153px) and (max-width: 1280px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(0.7))
|
|
@media screen and (min-width: 1281px) and (max-width: 1440px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(0.8))
|
|
@media screen and (min-width: 1441px) and (max-width: 1600px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(0.9))
|
|
@media screen and (min-width: 1601px)
|
|
.switchSection:hover .switchHover
|
|
transform(scale(1))
|
|
|
|
@media screen and (max-width: 1600px)
|
|
.quickSwitch
|
|
height: 45px
|
|
&.left
|
|
left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
|
|
&.right
|
|
left: calc(50% + 8px)
|
|
.switchSection
|
|
.switchHover
|
|
top: 8px
|
|
.label
|
|
font-size: 8px
|
|
font-weight: 400
|
|
padding: 0
|
|
.studySwitch
|
|
border-radius: 7px
|
|
.studySwitch, .seriesSwitch
|
|
&, svg
|
|
height: $switchSizeSmall
|
|
width: $switchSizeSmall
|