generator-skull/generators/app/templates/less/lib/lesselements/less-burger.less

A generator to make magic sites by Index Digital, with Gulp, Jade, Babel, Sass or Less (your choice), Wordpress ready, Swiper slide, Font Awesome, Animated Css

.menu-button {
	display: inline-block;
	padding: .5em;
	position: relative;
	z-index: 9999999;
}

.burger-icon {
	position: relative;
	margin-top: 8px;
	margin-bottom: 8px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.burger-icon,
.burger-icon::before,
.burger-icon::after {
	display: block;
	width: 25px;
	height: 3px;
	background-color: @cor-branco;
	-webkit-transition-property: background-color, -webkit-transform;
	-moz-transition-property: background-color, -moz-transform;
	-o-transition-property: background-color, -o-transform;
	transition-property: background-color, transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.burger-icon{
	transition: none;
}
.burger-icon::before, .burger-icon::after {
	position: absolute;
	content: "";
}
.burger-icon::before {
	top: -8px;
}
.burger-icon::after {
	top: 8px;
}

.menu-button.is-active .burger-icon {
	background-color: transparent;
}

.menu-button.is-active .burger-icon::before {
	-webkit-transform: translateY(8px) rotate(45deg);
	-moz-transform: translateY(8px) rotate(45deg);
	-ms-transform: translateY(8px) rotate(45deg);
	-o-transform: translateY(8px) rotate(45deg);
	transform: translateY(8px) rotate(45deg);
}

.menu-button.is-active .burger-icon::after {
	-webkit-transform: translateY(-8px) rotate(-45deg);
	-moz-transform: translateY(-8px) rotate(-45deg);
	-ms-transform: translateY(-8px) rotate(-45deg);
	-o-transform: translateY(-8px) rotate(-45deg);
	transform: translateY(-8px) rotate(-45deg);
}