_spring.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. @if index($hamburger-types, spring) {
  2. /*
  3. * Spring
  4. */
  5. .hamburger--spring {
  6. .hamburger-inner {
  7. top: $hamburger-layer-height / 2;
  8. transition: background-color 0s 0.13s linear;
  9. &::before {
  10. top: $hamburger-layer-height + $hamburger-layer-spacing;
  11. transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
  12. transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  13. }
  14. &::after {
  15. top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
  16. transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
  17. transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  18. }
  19. }
  20. &.is-active {
  21. .hamburger-inner {
  22. transition-delay: 0.22s;
  23. background-color: transparent !important;
  24. &::before {
  25. top: 0;
  26. transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
  27. transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  28. transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
  29. }
  30. &::after {
  31. top: 0;
  32. transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
  33. transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  34. transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
  35. }
  36. }
  37. }
  38. }
  39. }