modal-gallery.scss

/*
 * CSS Modal Plugin for displaying an image gallery
 *
 * @author Jonathan Weiß
 * @author Hans Christian Reinl
 * @date 2014-05-16
 */
@import "../modal-config";

$gallery--iframe-size: 600px !default;
$gallery--min-size: 98px;
$gallery--thumb-size: 98px;

@mixin arrow-position {
	&:after {
		position: absolute;
		top: 50%;
		height: 32px;

		margin-top: -24px;
		line-height: 32px;
		padding: 0 8px;
		font-size: 64px;
		opacity: 0;
	}

	&:hover,
	&:focus,
	&:active {
		&:after {
			opacity: 1;
		}
	}

	// Show on mobile
	@media screen and (max-width: $modal-small-breakpoint) {
		&:after {
			opacity: 1;
		}
	}
}

.modal-detail {
	position: relative;
	min-width: $gallery--min-size;
	min-height: $gallery--min-size;

	opacity: 0;
	width: 0;
	height: 0;
	-webkit-transition: opacity 0s;
	        transition: opacity 0s;

	&.is-active {
		opacity: 1;
		width: auto;
		height: auto;
		-webkit-transition: opacity 0.2s ease-out;
		        transition: opacity 0.2s ease-out;
	}

	/**
	 * Styling for Iframe in modal
	 */
	> [data-iframe] {
		position: relative;
		float: left;
		width: $gallery--iframe-size;

		&:after {
			float: left;
			content: '';
			padding-top: 56.25%;
		}
	}

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	@media screen and (max-width: $modal-max-width + 40) {
		> [data-iframe] {
			width: 411px;
		}
	}

	@media screen and (max-width: $modal-small-breakpoint) {
		> [data-iframe] {
			width: 100%;
		}
	}
}

.modal--gallery {
	@extend %modal--transition-fade !optional;

	.modal-content-list {
		display: none;

		list-style: none;
		margin: 0.2em -0.2em -0.2em;
		padding: 0;
		overflow: hidden;

		&.is-active {
			display: block;
		}

		> li {
			float: left;
			padding: 0.2em;
		}

		img {
			display: block;
			border: 0;
		}
	}
}

.modal--gallery-navigation {
	list-style: none;
	margin: 0;
	padding: 0;

	a {
		position: absolute;
		top: 30%;
		bottom: 30%;
		width: 10em;
		max-width: 25%;
		font-family: arial, sans-serif;

		text-indent: -99em;
		overflow: hidden;
		text-decoration: none;
		text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
	}

	img {
		max-width: $gallery--thumb-size;
		max-height: $gallery--thumb-size;
	}

	.modal--gallery-navigation-prev {
		@include arrow-position;

		left: 0;

		&:after {
			content: '‹';
			left: 0;
			text-indent: 0;
		}
	}

	.modal--gallery-navigation-next {
		@include arrow-position;

		right: 0;

		&:after {
			content: '›';
			right: 0;
			text-indent: 0;
		}
	}
}

/**
 * Caption
 */
.modal--gallery-caption {
	border-bottom: 1px solid $modal-border-color;

	p {
		margin: 1em 15px;
	}
}