jquery.secretnav.scss

@import "bourbon/bourbon";

html, body, .sn-outer-wrapper {
	@include size(100% 100%);
}

.sn-outer-wrapper {
	position: relative;
}

.sn-content-wrapper {
	// reset transforms (Chrome bug)
	@include transform(translateZ(0) translateX(0) rotateY(0deg));

	height: 100%;
	min-height: 100%;
	outline: 1px solid rgba(0, 0, 0, 0);
	position: relative;
	z-index: 10;
}

.sn-content-wrapper::after {
	@include size(100% 0px);
	// the transition delay of the height needs to be synced with the container transition time
	@include transition(opacity 0.4s, height 0s 0.4s);

	background: rgba(0, 0, 0, 0.1);
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
}

.sn-content {
	position: relative;
}

.sn-outer-wrapper.modalview {
	@include perspective(1500px);

	position: fixed;
}

.modalview .sn-content-wrapper {
	@include backface-visibility(hidden);
	@include size(100% 100%);

	overflow: hidden;
	position: absolute;
}

.modalview .sn-content {
	// Solves a rendering bug in Chrome on Windows
	@include transform(translateZ(-1px));
}

.animate .sn-content-wrapper::after {
	@include transition(opacity 0.3s);

	height: 101%;
	opacity: 1;
}

.sn-nav-wrapper .sn-nav {
	height: auto;
	font-size: 2em;
	position: absolute;

	&.left {
		left: 20%;
	}

	&.top {
		top: 25%;
	}

	&.vertical {
		@include transform(translateY(-50%));
		@include transform-style(preserve-3d);

		text-align: left;
		top: 50%;

		a {
			display: block;
			margin: 0 0 40px 0;
		}
	}

	&.horizontal {
		@include transform(translateX(-50%));
		
		left: 50%;
		text-align: center;
		width: 100%;

		a {
			display: inline-block;
			margin: 0 40px 0 0;
		}
	}
}

.sn-nav-wrapper .sn-nav a {
	@include transition(
		transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), 
		opacity 300ms ease-in 300ms
	);

	color: #FFFFFF;
	white-space: nowrap;
	text-decoration: none;

	&:hover {
    	color: #DDDDDD;
	}
}

.sn-nav-wrapper {
	@include linear-gradient(to bottom,  #3493d8 0%, #241271 100%, $fallback: #3493d8);

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px;
	width: auto;
	height: auto;
}

// Effects: move left

.sn-moveleft .sn-content-wrapper {
	@include transition(all 400ms cubic-bezier(0.175, 0.885, 0.335, 1.05));
	@include transition(transform 0.4s);
	@include transform-origin(50% 50%);
}

.sn-moveleft.animate .sn-content-wrapper {
	@include transform(translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1));

	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.18);
}

.no-csstransforms3d .sn-moveleft.animate .container {
	left: 75%;
}

.sn-moveleft .sn-nav a {
	@include transform(translateX(-150px));
	@include transition(transform 0.4s, opacity 0.4s);

	opacity: 0;
}

.sn-moveleft.animate .sn-nav a {
	@include transform(translateX(0));

	opacity: 1;
}

.sn-moveleft.animate .sn-nav a:nth-child(1) {
	@include transition-delay(0.02s);
}

.sn-moveleft.animate .sn-nav a:nth-child(2) {
	@include transition-delay(0.04s);
}

.sn-moveleft.animate .sn-nav a:nth-child(3) {
	@include transition-delay(0.08s);
}

.sn-moveleft.animate .sn-nav a:nth-child(4) {
	@include transition-delay(0.12s);
}

.sn-moveleft.animate .sn-nav a:nth-child(5) {
	@include transition-delay(0.16s);
}

.sn-moveleft.animate .sn-nav a:nth-child(6) {
	@include transition-delay(0.2s);
}

.sn-moveleft.animate .sn-nav a:nth-child(7) {
	@include transition-delay(0.24s);
}

// Effects: move down

.sn-movedown .sn-content-wrapper {
	@include transition(transform 0.4s);
	@include transform-origin(50% 50%);
}

.sn-movedown.animate .sn-content-wrapper {
	@include transform(translateY(50%) translateZ(-600px));

	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.18);
}

.no-csstransforms3d .sn-movedown.animate .container {
	top: 75%;
}

.sn-movedown .sn-nav a {
	@include transform(translateY(-20px));
	@include transition(transform 0.4s, opacity 0.4s);

	opacity: 0;
}

.sn-movedown.animate .sn-nav a {
	@include transform(translateY(0));

	opacity: 1;
}

.sn-movedown.animate .sn-nav a:nth-child(1) {
	@include transition-delay(0.02s);
}

.sn-movedown.animate .sn-nav a:nth-child(2) {
	@include transition-delay(0.04s);
}

.sn-movedown.animate .sn-nav a:nth-child(3) {
	@include transition-delay(0.08s);
}

.sn-movedown.animate .sn-nav a:nth-child(4) {
	@include transition-delay(0.12s);
}

.sn-movedown.animate .sn-nav a:nth-child(5) {
	@include transition-delay(0.16s);
}

.sn-movedown.animate .sn-nav a:nth-child(6) {
	@include transition-delay(0.2s);
}

.sn-movedown.animate .sn-nav a:nth-child(7) {
	@include transition-delay(0.24s);
}