52 lines
1.9 KiB
Stylus
52 lines
1.9 KiB
Stylus
@import "../constants.styl"
|
|
|
|
[data-component-dialog]
|
|
z-index : 3
|
|
position : fixed
|
|
left : 0
|
|
top : 0
|
|
width : 100vw
|
|
height : 100vh
|
|
background-color : rgba(0,0,0,0.5)
|
|
transition-property opacity
|
|
transition-duration (ANIMATION_DURATION / 2)
|
|
transition-timing-function ANIMATION_EASE
|
|
// -- Children
|
|
> div
|
|
margin : SPACE
|
|
padding : SPACE (SPACE * 1.5)
|
|
background-color : WHITE
|
|
border-radius : (SPACE / 5)
|
|
box-shadow ZDEPTH_SHADOW_5
|
|
transition-property opacity, transform
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
transition-delay ANIMATION_DELAY
|
|
> h1
|
|
margin-bottom : SPACE
|
|
> nav
|
|
margin-top : SPACE
|
|
text-align : right
|
|
> *:not(.transparent)
|
|
margin-left : SPACE
|
|
|
|
// -- Styles
|
|
&.small > div
|
|
width : 33vw
|
|
&.normal > div
|
|
width : 50vw
|
|
&.large > div
|
|
width : 96vw
|
|
&:not(.active)
|
|
pointer-events : none
|
|
opacity : 0
|
|
transition-delay (ANIMATION_DELAY * 2)
|
|
> div
|
|
opacity : 0
|
|
transform translateY(-(UNIT))
|
|
&.active
|
|
opacity : 1
|
|
> div
|
|
opacity : 1
|
|
transform translateY(0%)
|