_stand.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. @if index($hamburger-types, stand) {
  2. /*
  3. * Stand
  4. */
  5. .hamburger--stand {
  6. .hamburger-inner {
  7. transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
  8. background-color 0s 0.075s linear;
  9. &::before {
  10. transition: top 0.075s 0.075s ease-in,
  11. transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  12. }
  13. &::after {
  14. transition: bottom 0.075s 0.075s ease-in,
  15. transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  16. }
  17. }
  18. &.is-active {
  19. .hamburger-inner {
  20. transform: rotate(90deg);
  21. background-color: transparent !important;
  22. transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
  23. background-color 0s 0.15s linear;
  24. &::before {
  25. top: 0;
  26. transform: rotate(-45deg);
  27. transition: top 0.075s 0.1s ease-out,
  28. transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  29. }
  30. &::after {
  31. bottom: 0;
  32. transform: rotate(45deg);
  33. transition: bottom 0.075s 0.1s ease-out,
  34. transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  35. }
  36. }
  37. }
  38. }
  39. }