61 lines
2.2 KiB
Stylus
61 lines
2.2 KiB
Stylus
header
|
|
z-index : 2
|
|
position : fixed
|
|
height : HEADER_HEIGHT
|
|
width : 100vw
|
|
color : WHITE
|
|
background-color : THEME
|
|
transition-property height, transform, box-shadow
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
> img
|
|
width : SIZE = (UNIT / 1.5)
|
|
height : SIZE
|
|
margin : 0 ((OFFSET - SIZE) / 2)
|
|
border-radius : SIZE
|
|
background-color : alpha(WHITE, 25%)
|
|
box-shadow 0 0 0 (SIZE / 10) alpha(WHITE, 15%)
|
|
h1
|
|
padding : (UNIT / 2) 0
|
|
text-transform : Capitalize
|
|
transition all ANIMATION_DURATION ANIMATION_EASE
|
|
nav
|
|
&[data-role="text"]
|
|
&:first-child
|
|
display : block
|
|
font-size : FONT_SIZE_TINY
|
|
transition all ANIMATION_DURATION ANIMATION_EASE
|
|
|
|
&[data-role="circle"]
|
|
position : absolute
|
|
right : OFFSET
|
|
bottom : -(BUTTON_CIRCLE_HEIGHT / 2)
|
|
> *
|
|
margin-left : SPACE
|
|
|
|
// -- States
|
|
> *
|
|
transition all ANIMATION_DURATION ANIMATION_EASE
|
|
&.expanded
|
|
height : 100vh
|
|
&.disabled
|
|
delayChild index, 2 for index in (0..3)
|
|
|
|
> *
|
|
opacity : 0
|
|
transform translateY(-10vh)
|
|
|
|
// -- Effects
|
|
|
|
.scrolling &
|
|
height : (HEADER_HEIGHT / 2)
|
|
box-shadow : HEADER_SHADOW
|
|
transform translateY(-(SPACE))
|
|
h1
|
|
padding : 0
|
|
nav
|
|
&[data-role="text"]
|
|
&:first-child
|
|
transform translateY(-10vh)
|
|
opacity : 0
|