12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- // Animated hamburger icon
- //
- // Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
- // courtesy of Julien Melissas.
- //
- // @see http://codepen.io/JulienMelissas/pen/LEBGLj
- // @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
- .navbar-toggle {
- border: none;
- background: transparent !important;
- &:hover {
- background: transparent !important;
- }
- .icon-bar {
- width: 22px;
- transition: all 0.2s;
- }
- .top-bar {
- transform: rotate(45deg);
- transform-origin: 10% 10%;
- }
- .middle-bar {
- opacity: 0;
- }
- .bottom-bar {
- transform: rotate(-45deg);
- transform-origin: 10% 90%;
- }
- &.collapsed {
- .top-bar {
- transform: rotate(0);
- }
- .middle-bar {
- opacity: 1;
- }
- .bottom-bar {
- transform: rotate(0);
- }
- }
- }
|