_vortex.scss 914 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. @if index($hamburger-types, vortex) {
  2. /*
  3. * Vortex
  4. */
  5. .hamburger--vortex {
  6. .hamburger-inner {
  7. transition-duration: 0.2s;
  8. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  9. &::before,
  10. &::after {
  11. transition-duration: 0s;
  12. transition-delay: 0.1s;
  13. transition-timing-function: linear;
  14. }
  15. &::before {
  16. transition-property: top, opacity;
  17. }
  18. &::after {
  19. transition-property: bottom, transform;
  20. }
  21. }
  22. &.is-active {
  23. .hamburger-inner {
  24. transform: rotate(765deg);
  25. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  26. &::before,
  27. &::after {
  28. transition-delay: 0s;
  29. }
  30. &::before {
  31. top: 0;
  32. opacity: 0;
  33. }
  34. &::after {
  35. bottom: 0;
  36. transform: rotate(90deg);
  37. }
  38. }
  39. }
  40. }
  41. }