_slider.scss 940 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. transition-property: transform, opacity;
  11. transition-timing-function: ease;
  12. transition-duration: 0.15s;
  13. }
  14. &::after {
  15. top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
  16. }
  17. }
  18. &.is-active {
  19. .hamburger-inner {
  20. $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
  21. transform: translate3d(0, $y-offset, 0) rotate(45deg);
  22. &::before {
  23. transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
  24. opacity: 0;
  25. }
  26. &::after {
  27. transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
  28. }
  29. }
  30. }
  31. }
  32. }