80 lines
1.6 KiB
Stylus
80 lines
1.6 KiB
Stylus
@require '{ohif:design}/app'
|
|
|
|
$scrollNavSize = 24px
|
|
|
|
.scroll-area
|
|
overflow: hidden
|
|
position: relative
|
|
|
|
.scrollable
|
|
max-height: inherit
|
|
overflow: hidden
|
|
zoom: 1
|
|
|
|
&.scroll-x
|
|
overflow-x: scroll
|
|
|
|
&.scroll-y
|
|
overflow-y: scroll
|
|
|
|
&.fit
|
|
height: 100%
|
|
width: 100%
|
|
|
|
.scrollable
|
|
bottom: 0
|
|
left: 0
|
|
max-height: none
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
|
|
.scroll-nav
|
|
background-color: rgba(0, 0, 0, 0.75)
|
|
box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.75))
|
|
cursor: pointer
|
|
height: $scrollNavSize
|
|
left: 10px
|
|
opacity: 0
|
|
position: absolute
|
|
right: 10px
|
|
transition(transform 0.3s ease\, opacity 0.3s ease\, background-color 0.3s ease\, box-shadow 0.3s ease)
|
|
|
|
&:after
|
|
theme('color', '$activeColor')
|
|
display: block
|
|
font-family: FontAwesome
|
|
font-size: 20px
|
|
text-align: center
|
|
transition(color 0.3s ease)
|
|
|
|
&:hover
|
|
background-color: rgba(0, 0, 0, 0.9)
|
|
box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.9))
|
|
|
|
&:after
|
|
theme('color', '$hoverColor')
|
|
|
|
.scroll-nav-up
|
|
border-bottom-left-radius($scrollNavSize / 2)
|
|
border-bottom-right-radius($scrollNavSize / 2)
|
|
top: 0
|
|
transform(translateY(- $scrollNavSize))
|
|
|
|
&:after
|
|
content: '\f102'
|
|
|
|
.scroll-nav-down
|
|
border-top-left-radius($scrollNavSize / 2)
|
|
border-top-right-radius($scrollNavSize / 2)
|
|
bottom: 0
|
|
transform(translateY($scrollNavSize))
|
|
|
|
&:after
|
|
content: '\f103'
|
|
|
|
&.can-scroll-up .scroll-nav-up,
|
|
&.can-scroll-down .scroll-nav-down
|
|
opacity: 1
|
|
transform(translateY(0))
|