basspistol.com/_sass/photos/layout/_viewer.scss

///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Viewer */

	@include keyframes(spinner) {
		0% {
			@include vendor('transform', 'rotate(0deg)');
		}

		100% {
			@include vendor('transform', 'rotate(360deg)');
		}
	}

	#viewer {
		@include vendor('transition', ('opacity #{_duration(layout)} ease', 'width #{_duration(layout)} ease'));
		position: absolute;
		top: 0;
		width: calc(100% - #{_size(main)});
		height: 100%;

		@if _misc(main-side) == 'left' {
			right: 0;
		}
		@else {
			left: 0;
		}

		.inner {
			@include vendor('pointer-events', 'none');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;

			> * {
				@include vendor('pointer-events', 'auto');
			}

			&:before {
				@include vendor('background-image', (
					'linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))',
					'linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))'
				));
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.toggle {
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				position: absolute;
				top: 0;
				width: 4em;
				height: 4em;
				background-image: url('images/close.svg');
				background-repeat: no-repeat;
				background-size: 64px 64px;
				cursor: pointer;
				z-index: 1;

				@if _misc(main-side) == 'left' {
					left: 0;
					background-position: 0.75em 0.75em;
				}
				@else {
					right: 0;
					background-position: calc(100% - 0.75em) 0.75em;
				}
			}

			.nav-next,
			.nav-previous {
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				position: absolute;
				top: 50%;
				width: 6em;
				height: 6em;
				margin-top: -3em;
				background-image: url('images/arrow.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				cursor: pointer;
			}

			.nav-previous {
				@include vendor('transform', 'scaleX(-1)');
				left: 0;
			}

			.nav-next {
				right: 0;
			}
		}

		.slide {
			@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
			z-index: 1;

			.caption {
				@include vendor('background-image', (
					'linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0))',
				));
				@include padding(2em, 2em);
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				color: rgba(255,255,255,0.5);
				z-index: 1;

				h2, h3, h4, h5, h6 {
					color: #fff;
				}
			}

			.image {
				@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: contain;
				opacity: 0;
			}

			&:before {
				@include vendor('animation', 'spinner #{_duration(spinner)} linear infinite');
				@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 3em;
				height: 3em;
				background-image: url('images/spinner.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				margin: -1.5em 0 0 -1.5em;
				opacity: 0;
			}

			&.loading {
				&:before {
					opacity: 1;
				}
			}

			&.active {
				.image {
					opacity: 1;
				}
			}
		}

		body.fullscreen & {
			width: 100%;

			.inner {
				.toggle {
					background-image: url('images/open.svg');
				}
			}
		}

		body.is-preload-1 & {
			opacity: 0;
		}

		body.is-preload-2 & {
			.slide {
				opacity: 0;
			}
		}

		@include breakpoint('<=large') {
			width: calc(100% - #{_size(main-alt)});
		}

		@include breakpoint('<=medium') {
			width: 100%;

			.inner {
				.toggle {
					@include vendor('transition', 'opacity #{_duration(layout)} ease');
					background-image: url('images/open.svg');
					opacity: 0;

					@if _misc(main-side) == 'left' {
						left: 0;
					}
					@else {
						right: 0;
					}
				}
			}

			body.fullscreen & {
				.inner {
					.toggle {
						opacity: 1;
					}
				}
			}
		}

		@include breakpoint('<=small') {
			.inner {
				.toggle {
					background-size: 32px 32px;
				}

				.nav-next,
				.nav-previous {
					background-image: url('images/arrow-small.svg');
					background-size: 32px 32px;
				}
			}

			body.fullscreen & {
				.inner {
					.toggle {
						background-image: url('images/open-small.svg');
					}
				}
			}
		}

		@include breakpoint('<=xsmall') {
			@include vendor('transition', ('opacity #{_duration(layout-alt)} ease'));
			@include vendor('transition-delay', '0s');
			opacity: 0;

			.inner {
				.toggle {
					background-image: url('images/close-small.svg') !important;
					background-size: 32px 32px;
				}
			}

			body.fullscreen & {
				@include vendor('transition-delay', '#{_duration(layout-alt)}');
				opacity: 1;
			}
		}
	}