ReactMarkap/src/assets/scss/components/_hamburger.scss

.hamburger {
	font-size: 0;
	display: inline-block;
	overflow: visible;
	margin: 0;
	cursor: pointer;
	transition-timing-function: linear;
	transition-duration: .15s;
	transition-property: opacity,filter;
	text-transform: none;
	color: inherit;
	border: 2px solid transparent;
	border-radius: 50%;
	background-color: transparent;
	transition: border-color .22s ease;

	.hamburger-box {
		position: relative;
		display: inline-block;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 2px;
		padding-right: 2px;
		width: 24px;
		height: 22px;
	}

	.hamburger-inner {
		top: 50%;
		display: block;
		margin-top: -1px;

		&:after,
		&:before {
			display: block;
			content: "";
		}

		&:after {
			bottom: -6px;
		}

		&:before {
			top: -6px;
		}
	}

	.hamburger-inner,
	.hamburger-inner:after,
	.hamburger-inner:before {
		position: absolute;
		width: 20px;
		height: 2px;
		transition-timing-function: ease;
		transition-duration: .15s;
		transition-property: transform;
		border-radius: 4px;
		background-color: $header-color;
	}

	&.is-active {
		border-color: $header-color;

		.hamburger-inner {
			background-color: $header-color;

			&:before,
			&:after {
				background-color: $header-color;
			}
		}
	}

	&--spin {

		.hamburger-inner {
			transition-timing-function: cubic-bezier(.55,.055,.675,.19);
			transition-duration: .22s;

			&:before {
				transition: top .1s ease-in .25s,
							opacity .1s ease-in;
			}

			&:after {
				transition: bottom .1s ease-in .25s,
							transform .22s cubic-bezier(.55,.055,.675,.19);
			}
		}

		&.is-active {
			.hamburger-inner {
				transition-delay: .12s;
				transition-timing-function: cubic-bezier(.215,.61,.355,1);
				transform: rotate(225deg);

				&:before {
					top: 0;
					transition: top .1s ease-out,
								opacity .1s ease-out .12s;
					opacity: 0;
				}

				&:after {
					bottom: 0;
					transition: bottom .1s ease-out,
								transform .22s cubic-bezier(.215,.61,.355,1) .12s;
					transform: rotate(-90deg);
				}
			}
		}
	}
}