Skip to content

Instantly share code, notes, and snippets.

@ColtMoney
Created October 8, 2016 20:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ColtMoney/987be6cce7af417b5dc35d883b13ca42 to your computer and use it in GitHub Desktop.
Save ColtMoney/987be6cce7af417b5dc35d883b13ca42 to your computer and use it in GitHub Desktop.
.hamburger
padding: 16px 0
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-box
width: 40px
height: 24px
display: inline-block
position: relative
.hamburger-inner
display: block
top: 50%
margin-top: -2px
width: 35px
height: 3px
background-color: #000
border-radius: 4px
position: absolute
transition-property: -webkit-transform
transition-property: transform
transition-property: transform, -webkit-transform
transition-duration: 0.15s
transition-timing-function: ease
&::before, &::after
width: 35px
height: 3px
background-color: #000
border-radius: 4px
position: absolute
transition-property: -webkit-transform
transition-property: transform
transition-property: transform, -webkit-transform
transition-duration: 0.15s
transition-timing-function: ease
&::before, &::after
content: ""
display: block
&::before
top: -10px
&::after
bottom: -10px
.hamburger--collapse
line-height: 16px
.hamburger-inner
top: auto
bottom: 0
transition-duration: 0.15s
transition-delay: 0.15s
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
&::after
top: -20px
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear
&::before
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19)
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19)
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19)
&.is-active .hamburger-inner
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg)
transform: translate3d(0, -10px, 0) rotate(-45deg)
transition-delay: 0.32s
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
&::after
top: 0
opacity: 0
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear
&::before
top: 0
-webkit-transform: rotate(-90deg)
transform: rotate(-90deg)
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1)
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1)
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment