_elastic.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. @if index($hamburger-types, elastic) {
  2. /*
  3. * Elastic
  4. */
  5. .hamburger--elastic {
  6. .hamburger-inner {
  7. top: $hamburger-layer-height / 2;
  8. transition-duration: 0.275s;
  9. transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  10. &::before {
  11. top: $hamburger-layer-height + $hamburger-layer-spacing;
  12. transition: opacity 0.125s 0.275s ease;
  13. }
  14. &::after {
  15. top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
  16. transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  17. }
  18. }
  19. &.is-active {
  20. .hamburger-inner {
  21. $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
  22. transform: translate3d(0, $y-offset, 0) rotate(135deg);
  23. transition-delay: 0.075s;
  24. &::before {
  25. transition-delay: 0s;
  26. opacity: 0;
  27. }
  28. &::after {
  29. transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
  30. transition-delay: 0.075s;
  31. }
  32. }
  33. }
  34. }
  35. }