vitess-gh/vitess.io/_sass/_sliding-menu.scss

// OFF CANVAS SLIDING MENU
// Based on code by Diego Eis
// --------------------------------------------------

.sliding-menu-button {
	position: fixed;
	top: $gutter;
	right: $gutter;
	display: block;
	width: $button-size * 2;
	height: $button-size * 2;
	background: #000;
	outline: 0;
	padding: 0;
	border: 2.5px solid transparent;
	cursor: pointer;
	z-index: 5;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	@include media($medium) {
		@include transform(0);
	}
	@include transition(right 500ms cubic-bezier(.645,.045,.355,1.000));
	&.slide {
		@include media($medium) {
			right: 90%;
		}
		@include transition(right 500ms ease-in-out);
	}
}

.sliding-menu-content {
	position: fixed;
	top: 0;
	right: 0;
	padding: em(22) 0;
	text-align: center;
	visibility: hidden;
	@include media($medium) {
		text-align: left;
	}
	@include size(100% 100%);
	@include media($medium) {
		@include size(87% 100%);
	}
	@include transform(translateX(100%));
	@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
	background: $sliding-menu-background;
	z-index: 5;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	&.is-visible {
		visibility: visible;
		@include transform(translateX(0));
		@include transition(500ms ease-in-out);
	}
	ul {
		margin: 0 10%;
	}
	ul,
	li {
		list-style: none;
	}
	li {
		display: block;
		position: relative;
		padding: 1em 0;
	}
	.menu-item > li {
		a {
			color: $white;
			text-decoration: none;
		}
		.teaser {
			width: 150px;
			border: 2px solid $white;
			margin-bottom: ($gutter / 2);
			@include media($medium) {
				position: absolute;
				top: 20px;
				left: 0;
				margin-bottom: 0;
			}
		}
		.title {
			display: block;
			font-family: $alt-font;
			@include font-size(32,no);
			font-weight: 700;
			@include media($medium) {
				margin-left: 170px;
			}
		}
		.excerpt {
			color: $white;
			margin-top: 0;
			@include media($medium) {
				margin-left: 170px;
			}
		}
	}
	.sub-menu-item > li a {
		display: block;
		color: $white;
		font-style: italic;
	}
	.menu-item .home a {
		@include font-size(32);
	}
}

.menu-screen {
	@include position(fixed, 0px 0px 0px 0px);
	@include transition;
	background: $sliding-menu-border-color;
	opacity: 0;
	visibility: hidden;
	z-index: 4;
	&.is-visible {
		opacity: .4;
		visibility: visible;
		&:hover {
			cursor: pointer;
		}
	}
}

// animated navicons
// https://github.com/SaraSoueidan/navicon-transformicons
// common to all three-liners
@mixin menuline {
	display: inline-block;
	width: $button-size;
	height: $button-size/7;
	background: $white;
	border-radius: $button-size/14; 
	transition: $transition;
}
// common to all three-liners
.menulines {
	@include menuline;
	position: relative; 
	&:before, &:after {
	 @include menuline;
		position: absolute;
		left:0;
		content: '';
		-webkit-transform-origin: $button-size/14 center;
						transform-origin: $button-size/14 center;
	}
	&:before { 
		top: $button-size/4; 
	}
	&:after { 
		top: -$button-size/4; 
	}
}
// common to all three-liners
.menulines-button:hover {
	.menulines {
		&:before { 
			top: $button-size/3.5; 
		}
		&:after { 
			top: -$button-size/3.5; 
		}
	}
}
// for both the arrow up and left icons
.menulines-button.arrow.close {
		.menulines {
			&:before,
			&:after {
				top: 0;
				width: $button-size/1.8;
			}
			&:before { 
				-webkit-transform: rotate3d(0,0,1,40deg); 
								transform: rotate3d(0,0,1,40deg); 
			}
			&:after { 
				-webkit-transform: rotate3d(0,0,1,-40deg); 
								transform: rotate3d(0,0,1,-40deg); 
			}
		}
}
// arrow up only: just rotate by 90degrees
.menulines-button.arrow-up.close {
	-webkit-transform: scale3d(.8,.8,.8) rotate3d(0,0,1,90deg);
					transform: scale3d(.8,.8,.8) rotate3d(0, 0, 1,90deg);
}
// three-lines to minus only
.menulines-button.minus.close{
	.lines {
		&:before, &:after{
			-webkit-transform: none;
							transform: none;
			top:0;
			width: $button-size;
		}
	}
}
// three-lines to x
.menulines-button.x.close{
	.menulines {
		background: transparent;
		&:before, &:after{
			-webkit-transform-origin: 50% 50%;
							transform-origin: 50% 50%;
			top:0;
			width: $button-size;
		}
		&:before{
			-webkit-transform: rotate3d(0,0,1,45deg); 
							transform: rotate3d(0,0,1,45deg); 
		}
		&:after{
			-webkit-transform: rotate3d(0,0,1,-45deg); 
							transform: rotate3d(0,0,1,-45deg); 
		}
	}
}
// three-lines to x method 2
.menulines-button.x2{
		.menulines{
			transition: background .3s .5s ease;
			&:before, &:after{
				//set transform origin
			-webkit-transform-origin: 50% 50%;
							transform-origin: 50% 50%;
				transition: top .3s .6s ease, -webkit-transform .3s ease;
				transition: top .3s .6s ease, transform .3s ease;
			}
		}
}
.menulines-button.x2.close{
	.menulines {
		transition: background .3s 0s ease;
		background: transparent;
		&:before, &:after{
			transition: top .3s ease, -webkit-transform .3s .5s ease;//delay the formation of the x till the minus is formed  
			transition: top .3s ease, transform .3s .5s ease;//delay the formation of the x till the minus is formed  
			top:0;
			width: $button-size;
		}
		&:before{
			-webkit-transform: rotate3d(0,0,1,45deg); 
							transform: rotate3d(0,0,1,45deg); 
		}
		&:after{
			-webkit-transform: rotate3d(0,0,1,-45deg); 
							transform: rotate3d(0,0,1,-45deg); 
		}
	}
}