mirror of
https://github.com/status-im/nimbus-site.git
synced 2025-01-09 19:37:08 +00:00
137 lines
2.6 KiB
Stylus
137 lines
2.6 KiB
Stylus
toggle-width = 25px
|
|
toggle-height = toggle-width * 0.8
|
|
toggle-line = 2px
|
|
transition-duration = 0.4s
|
|
lang-select-height = 40px
|
|
|
|
#mobile-nav
|
|
position: fixed
|
|
top: 0
|
|
width: mobile-nav-width
|
|
left: @width * -1
|
|
height: 100%
|
|
background: color-navy
|
|
transition: transition-duration
|
|
font-family: font-title
|
|
.mobile-nav-on &
|
|
transform: translateX(100%)
|
|
|
|
#mobile-nav-inner
|
|
overflow-y: auto
|
|
padding: 10px 0
|
|
position: absolute
|
|
top: 0
|
|
bottom: lang-select-height
|
|
left: 0
|
|
right: 0
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
#mobile-nav-toggle
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: gutter-width
|
|
width: toggle-width
|
|
height: toggle-height
|
|
margin: auto
|
|
opacity: 0.5
|
|
cursor: pointer
|
|
transition: 0.2s
|
|
&:active, .mobile-nav-on &
|
|
opacity: 1
|
|
@media mq-normal
|
|
display: none
|
|
|
|
.mobile-nav-toggle-bar
|
|
background: #fff
|
|
position: absolute
|
|
left: 0
|
|
width: 100%
|
|
height: toggle-line
|
|
transition: transition-duration
|
|
transform-origin: 0
|
|
border-radius: toggle-line
|
|
&:first-child
|
|
top: 0
|
|
.mobile-nav-on &
|
|
transform: rotate(45deg)
|
|
&:nth-child(2)
|
|
top: (toggle-height - toggle-line) * 0.5
|
|
.mobile-nav-on &
|
|
opacity: 0
|
|
&:last-child
|
|
top: toggle-height - toggle-line
|
|
.mobile-nav-on &
|
|
transform: rotate(-45deg)
|
|
|
|
.mobile-nav-link
|
|
color: #fff
|
|
text-decoration: none
|
|
display: block
|
|
padding: 10px 15px
|
|
line-height: 1
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
.mobile-nav-title
|
|
color: color-link
|
|
font-weight: bold
|
|
padding: 10px 15px
|
|
line-height: 1
|
|
display: block
|
|
border-top: 1px solid #444
|
|
margin-top: 10px
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
#mobile-lang-select-wrap
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
width: 100%
|
|
background: color-navy
|
|
border-top: 1px solid #444
|
|
|
|
#mobile-lang-select-label
|
|
line-height: lang-select-height
|
|
color: #fff
|
|
padding: 10px 15px
|
|
i
|
|
opacity: 0.7
|
|
span
|
|
padding-left: 8px
|
|
|
|
#mobile-lang-select
|
|
-webkit-appearance: menulist-button
|
|
opacity: 0
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
#container
|
|
transition: transition-duration
|
|
height: 100%
|
|
// overflow: auto
|
|
-webkit-overflow-scrolling: touch
|
|
.mobile-nav-on &
|
|
transform: translateX(mobile-nav-width)
|
|
overflow: hidden
|
|
|
|
#mobile-nav-dimmer
|
|
position: absolute
|
|
top: 0
|
|
left: 100%
|
|
height: 100%
|
|
background: #000
|
|
opacity: 0
|
|
transition: opacity transition-duration, transform 0s transition-duration
|
|
.mobile-nav-on &
|
|
width: 100%
|
|
opacity: 0.7
|
|
transform: translateX(-100%)
|
|
transition: opacity transition-duration
|