50 lines
826 B
SCSS
50 lines
826 B
SCSS
|
// 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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|