_hamburger.scss 826 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // Animated hamburger icon
  2. //
  3. // Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
  4. // courtesy of Julien Melissas.
  5. //
  6. // @see http://codepen.io/JulienMelissas/pen/LEBGLj
  7. // @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
  8. .navbar-toggle {
  9. border: none;
  10. background: transparent !important;
  11. &:hover {
  12. background: transparent !important;
  13. }
  14. .icon-bar {
  15. width: 22px;
  16. transition: all 0.2s;
  17. }
  18. .top-bar {
  19. transform: rotate(45deg);
  20. transform-origin: 10% 10%;
  21. }
  22. .middle-bar {
  23. opacity: 0;
  24. }
  25. .bottom-bar {
  26. transform: rotate(-45deg);
  27. transform-origin: 10% 90%;
  28. }
  29. &.collapsed {
  30. .top-bar {
  31. transform: rotate(0);
  32. }
  33. .middle-bar {
  34. opacity: 1;
  35. }
  36. .bottom-bar {
  37. transform: rotate(0);
  38. }
  39. }
  40. }