_burger.scss

$burger-width: 28px !default;
$burger-height: 22px !default;
$burger-padding: 4px !default;
$burger-line-height: 4px !default;
$burger-line-color: #666 !default;
$burger-line-rounded: true !default;
$burger-animate: true !default;
$burger-transition: .2s ease-out !default;
$burger-rotation: 1 !default;
$burger-font-family: sans-serif !default;
$burger-font-size: 0.7em !default;
$burger-letter-spacing: 0px !default;

$burger-translate-y: ( $burger-height - $burger-line-height ) / 2;
$burger-rotate: 45deg + ( 180deg * ( $burger-rotation - 1 ) );

//
// Burger icon that can animate to a close icon
//
// .burger__line    = middle line
// :before = top line
// :after  = bottom line
//
.burger {
	cursor: pointer;
	display: inline-block;
	height: $burger-height + $burger-padding * 2;
	outline: 0;
	position: relative;
	width: $burger-width + $burger-padding * 2;

	&:focus {
		outline: 0;
	}

	.burger__line,
	&:before,
	&:after {
		background-color: $burger-line-color;
		display: block;
		height: $burger-line-height;
		left: $burger-padding;
		position: absolute;
		transition: all $burger-transition;
		width: $burger-width;

		@if ( $burger-line-rounded ) {
			border-radius: $burger-line-height / 2;
		}

	}

	.burger__line {
		margin-top: -$burger-line-height / 2; // Center the middle line
		opacity: 1;
		top: 50%;
	}

	&:before,
	&:after {
		content: ' ';
	}

	&:before {
		top: $burger-padding;
	}

	&:after {
		bottom: $burger-padding;
	}

}

.burger--has-text {
	margin-bottom: $burger-font-size;

	.burger__text {
		font-family: $burger-font-family;
		font-size: $burger-font-size;
		left: 50%;
		letter-spacing: $burger-letter-spacing;
		line-height: 1;
		position: absolute;
		top: 100%;
		transform: translate( -50%, 0 );
		color: $burger-line-color;
	}
}

@if ( $burger-animate ) {

	.burger.is-on {

		.burger__line {
			opacity: 0;
		}

		&:before {
			transform: translateY( $burger-translate-y ) rotate( -$burger-rotate );
		}

		&:after {
			transform: translateY( -$burger-translate-y ) rotate( $burger-rotate );
		}

	}

}