You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.0 KiB
Stylus
88 lines
2.0 KiB
Stylus
// extracted from:
|
|
// https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css
|
|
// copyright @jonsuh
|
|
.hamburger
|
|
padding: 0px 0px
|
|
display: inline-block
|
|
cursor: pointer
|
|
transition-property: opacity, -webkit-filter
|
|
transition-property: opacity, filter
|
|
transition-property: opacity, filter, -webkit-filter
|
|
transition-duration: 0.15s
|
|
transition-timing-function: linear
|
|
font: inherit
|
|
color: inherit
|
|
text-transform: none
|
|
background-color: transparent
|
|
border: 0
|
|
margin: 0
|
|
overflow: visible
|
|
|
|
.hamburger:hover
|
|
opacity: 0.7
|
|
|
|
.hamburger-box
|
|
width: rem(18px)
|
|
height: rem(12px)
|
|
display: inline-block
|
|
position: relative
|
|
|
|
.hamburger-inner
|
|
display: block
|
|
top: 50%
|
|
margin-top: rem(-1px)
|
|
|
|
.hamburger-inner,
|
|
.hamburger-inner::before,
|
|
.hamburger-inner::after
|
|
width: rem(18px)
|
|
height: rem(2px)
|
|
background-color: #FFF
|
|
border-radius: 1px
|
|
position: absolute
|
|
transition-property: transform
|
|
transition-duration: 0.15s
|
|
transition-timing-function: ease
|
|
|
|
.layout--immersive
|
|
.hamburger-inner,
|
|
.hamburger-inner::before,
|
|
.hamburger-inner::after
|
|
background-color: #FFF
|
|
|
|
.hamburger-inner::before,
|
|
.hamburger-inner::after
|
|
content: ""
|
|
display: block
|
|
|
|
.hamburger-inner::before
|
|
top: rem(-5px)
|
|
|
|
.hamburger-inner::after
|
|
bottom: rem(-5px)
|
|
|
|
.hamburger--spin .hamburger-inner
|
|
transition-duration: 0.3s
|
|
transition-timing-function: ease-out-cubic
|
|
|
|
.hamburger--spin .hamburger-inner::before
|
|
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in
|
|
|
|
.hamburger--spin .hamburger-inner::after
|
|
transition: bottom 0.1s 0.34s ease-in, transform 0.3s ease-in-cubic
|
|
|
|
.hamburger--spin.is-active .hamburger-inner
|
|
transform: rotate(225deg)
|
|
transition-delay: 0.14s
|
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
|
|
|
|
.hamburger--spin.is-active .hamburger-inner::before
|
|
top: 0
|
|
opacity: 0
|
|
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out
|
|
|
|
.hamburger--spin.is-active .hamburger-inner::after
|
|
bottom: 0
|
|
transform: rotate(-90deg)
|
|
transition: bottom 0.1s ease-out, transform 0.3s 0.14s ease-out-cubic
|