49 lines
1.6 KiB
Stylus
49 lines
1.6 KiB
Stylus
@import '../constants'
|
|
|
|
WIDTH = (4 * UNIT)
|
|
|
|
:local(.container)
|
|
position : absolute
|
|
top : 0
|
|
height : 100%
|
|
width : WIDTH
|
|
background-color : WHITE
|
|
transition-property : transform
|
|
transition-duration : ANIMATION_DURATION
|
|
transition-timing-function : ANIMATION_EASE
|
|
|
|
:local(.root)
|
|
z-index : 2
|
|
position : fixed
|
|
top : 0
|
|
width : 100vw
|
|
height : 100vh
|
|
pointer-events : none
|
|
transition-property : background-color
|
|
transition-duration : ANIMATION_DURATION
|
|
transition-timing-function : ANIMATION_EASE
|
|
|
|
// -- Overrides
|
|
&:not(.hideable)
|
|
z-index : 2
|
|
width : WIDTH
|
|
&.hideable
|
|
z-index : 3
|
|
&.active
|
|
background-color : rgba(0,0,0,0.5)
|
|
&.left
|
|
left : 0
|
|
&:not(.active) > :local(.container)
|
|
left : 0
|
|
transform : translateX(-100%)
|
|
&.right
|
|
right : 0
|
|
&:not(.active) > :local(.container)
|
|
right : 0
|
|
transform : translateX(100%)
|
|
&.active
|
|
pointer-events : all
|
|
> :local(.container)
|
|
box-shadow : ZDEPTH_SHADOW_1
|
|
transform : translateX(0%)
|