_squeeze.scss 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. @if index($hamburger-types, squeeze) {
  2. /*
  3. * Squeeze
  4. */
  5. .hamburger--squeeze {
  6. .hamburger-inner {
  7. -webkit-transition-duration: 0.075s;
  8. transition-duration: 0.075s;
  9. -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  10. transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  11. &::before {
  12. -webkit-transition: top 0.075s 0.12s ease,
  13. opacity 0.075s ease;
  14. transition: top 0.075s 0.12s ease,
  15. opacity 0.075s ease;
  16. }
  17. &::after {
  18. -webkit-transition: bottom 0.075s 0.12s ease,
  19. -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  20. transition: bottom 0.075s 0.12s ease,
  21. -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  22. transition: bottom 0.075s 0.12s ease,
  23. transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  24. transition: bottom 0.075s 0.12s ease,
  25. transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19),
  26. -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  27. }
  28. }
  29. &.is-active {
  30. .hamburger-inner {
  31. -webkit-transform: rotate(45deg);
  32. transform: rotate(45deg);
  33. -webkit-transition-delay: 0.12s;
  34. transition-delay: 0.12s;
  35. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  36. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  37. &::before {
  38. top: 0;
  39. opacity: 0;
  40. -webkit-transition: top 0.075s ease,
  41. opacity 0.075s 0.12s ease;
  42. transition: top 0.075s ease,
  43. opacity 0.075s 0.12s ease;
  44. }
  45. &::after {
  46. bottom: 0;
  47. -webkit-transform: rotate(-90deg);
  48. transform: rotate(-90deg);
  49. -webkit-transition: bottom 0.075s ease,
  50. -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  51. transition: bottom 0.075s ease,
  52. -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  53. transition: bottom 0.075s ease,
  54. transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  55. transition: bottom 0.075s ease,
  56. transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1),
  57. -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  58. }
  59. }
  60. }
  61. }
  62. }