_slider.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @if index($hamburger-types, slider) {
  2. /*
  3. * Slider
  4. */
  5. .hamburger--slider {
  6. .hamburger-inner {
  7. top: $hamburger-layer-height / 2;
  8. &::before {
  9. top: $hamburger-layer-height + $hamburger-layer-spacing;
  10. -webkit-transition-property: opacity, -webkit-transform;
  11. transition-property: opacity, -webkit-transform;
  12. transition-property: transform, opacity;
  13. transition-property: transform, opacity, -webkit-transform;
  14. -webkit-transition-timing-function: ease;
  15. transition-timing-function: ease;
  16. -webkit-transition-duration: 0.15s;
  17. transition-duration: 0.15s;
  18. }
  19. &::after {
  20. top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
  21. }
  22. }
  23. &.is-active {
  24. .hamburger-inner {
  25. $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
  26. -webkit-transform: translate3d(0, $y-offset, 0) rotate(45deg);
  27. transform: translate3d(0, $y-offset, 0) rotate(45deg);
  28. &::before {
  29. -webkit-transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
  30. transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
  31. opacity: 0;
  32. }
  33. &::after {
  34. -webkit-transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
  35. transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
  36. }
  37. }
  38. }
  39. }
  40. }