hugo-story/assets/sass/components/_spotlight.scss

/*
	Hugo Story by CaressOfSteel
	A (modular, highly tweakable) responsive one-page theme for Hugo.
	Ported from Story by HTML5UP.
	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
*/

/* Spotlight (transitions) */

	.spotlight {

		// Mixin.
			@mixin transition-spotlight($event) {
				$x: null;
				$y: null;

				@if ($event == 'load') {
					$x: 'body.is-preload &';
					$y: _duration(on-load);
				}
				@else if ($event == 'scroll') {
					$x: '&.is-inactive';
					$y: _duration(on-scroll);
				}

				// Content.
					&.on#{$event}-content-fade-up {
						.content {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));
						}

						#{$x} {
							.content {
								@include vendor('transform', 'translateY(1rem)');
								opacity: 0;
							}
						}
					}

					&.on#{$event}-content-fade-down {
						.content {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));
						}

						#{$x} {
							.content {
								@include vendor('transform', 'translateY(-1rem)');
								opacity: 0;
							}
						}
					}

					&.on#{$event}-content-fade-left {
						.content {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));
						}

						#{$x} {
							.content {
								@include vendor('transform', 'translateX(1rem)');
								opacity: 0;
							}
						}
					}

					&.on#{$event}-content-fade-right {
						.content {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));
						}

						#{$x} {
							.content {
								@include vendor('transform', 'translateX(-1rem)');
								opacity: 0;
							}
						}
					}

					&.on#{$event}-content-fade-in {
						.content {
							@include vendor('transition', 'opacity #{$y} ease-in-out');
						}

						#{$x} {
							.content {
								opacity: 0;
							}
						}
					}

				// Image.
					&.on#{$event}-image-fade-up {
						.image {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));

							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
								@include vendor('transition-delay', '#{$y * 0.75}');
							}
						}

						#{$x} {
							.image {
								@include vendor('transform', 'translateY(1rem)');
								opacity: 0;

								img {
									opacity: 0;
								}
							}
						}
					}

					&.on#{$event}-image-fade-down {
						.image {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));

							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
								@include vendor('transition-delay', '#{$y * 0.75}');
							}
						}

						#{$x} {
							.image {
								@include vendor('transform', 'translateY(-1rem)');
								opacity: 0;

								img {
									opacity: 0;
								}
							}
						}
					}

					&.on#{$event}-image-fade-left {
						.image {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));

							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
								@include vendor('transition-delay', '#{$y * 0.75}');
							}
						}

						#{$x} {
							.image {
								@include vendor('transform', 'translateX(1rem)');
								opacity: 0;

								img {
									opacity: 0;
								}
							}
						}
					}

					&.on#{$event}-image-fade-right {
						.image {
							@include vendor('transition', (
								'opacity #{$y} ease-in-out',
								'transform #{$y} ease-in-out'
							));

							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
								@include vendor('transition-delay', '#{$y * 0.75}');
							}
						}

						#{$x} {
							.image {
								@include vendor('transform', 'translateX(-1rem)');
								opacity: 0;

								img {
									opacity: 0;
								}
							}
						}
					}

					&.on#{$event}-image-fade-in {
						.image {
							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
							}
						}

						#{$x} {
							.image {
								img {
									opacity: 0;
								}
							}
						}
					}

			}

		// On Load.
			@include transition-spotlight('load');

		// On Scroll.
			@include transition-spotlight('scroll');

	}

/* Spotlight (style1) */

	.spotlight.style1 {
		@include vendor('align-items', 'stretch');
		@include vendor('display', 'flex');
		@include vendor('flex-direction', 'row');
		@include vendor('justify-content', 'flex-end');
		position: relative;
		overflow-x: hidden;
		text-align: left;

		.content {
			@include padding(_size(padding, default), _size(padding, default));
			@include vendor('align-self', 'center');
			@include vendor('flex-grow', '1');
			@include vendor('flex-shrink', '1');
			width: 65%;
			max-width: _size(inner);
			margin: 0 auto;
		}

		.image {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			width: 35%;
			min-width: 25rem;
			border-radius: 0;

			img {
				@include vendor('object-fit', 'cover');
				@include vendor('object-position', 'center');
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 0;
			}
		}

		@include breakpoint('<=xlarge') {
			.content {
				@include padding(_size(padding, xlarge), _size(padding, xlarge));
			}
		}

		@include breakpoint('<=large') {
			.content {
				@include padding(_size(padding, large), _size(padding, large));
			}
		}

		@include breakpoint('<=medium') {
			.content {
				@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
				width: 50%;
				min-width: 0;
			}

			.image {
				width: 50%;
				min-width: 0;
			}
		}

		@include breakpoint('<=small') {
			.content {
				@include padding(_size(padding, small) * 1.25, _size(padding, small));
			}

			@include orientation(portrait) {
				@include vendor('flex-direction', 'column-reverse');
				text-align: center !important;

				.content {
					width: 100%;
				}

				.image {
					width: 100%;

					img {
						position: relative;
					}
				}
			}
		}

		// Modifiers.

			// Orientation.
				&.orient-left {
					// ...
				}

				&.orient-right {
					@include vendor('flex-direction', 'row-reverse');

					@include breakpoint('<=small') {
						@include orientation(portrait) {
							@include vendor('flex-direction', 'column-reverse');
						}
					}
				}

			// Content Alignment.
				&.content-align-left {
					// ...
				}

				&.content-align-center {
					text-align: center;
				}

				&.content-align-right {
					text-align: right;
				}

			// Image Position.
				&.image-position-left {
					.image {
						img {
							@include vendor('object-position', 'left');
						}
					}
				}

				&.image-position-center {
					// ...
				}

				&.image-position-right {
					.image {
						img {
							@include vendor('object-position', 'right');
						}
					}
				}

	}

/* Spotlight (style2) */

	.spotlight.style2 {
		$image-size: 21rem;
		$content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75);

		@include padding(_size(padding, default), _size(padding, default));
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('flex-direction', 'row-reverse');
		@include vendor('justify-content', 'center');
		position: relative;
		overflow-x: hidden;
		text-align: left;

		.content {
			width: $content-size;
			max-width: 100%;
		}

		.image {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			width: $image-size;
			height: $image-size;
			border-radius: 100%;
			margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0;

			img {
				@include vendor('object-fit', 'cover');
				@include vendor('object-position', 'center');
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}

		@include breakpoint('<=xlarge') {
			@include padding(_size(padding, xlarge), _size(padding, xlarge));
		}

		@include breakpoint('<=large') {
			@include padding(_size(padding, large), _size(padding, large));
		}

		@include breakpoint('<=medium') {
			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));

			.image {
				width: ($image-size * 0.875);
				height: ($image-size * 0.875);
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(padding, small) * 1.25, _size(padding, small));
			@include vendor('align-items', 'flex-start');

			.image {
				width: ($image-size * 0.75);
				height: ($image-size * 0.75);
				margin: 0 (_size(element-margin) * 1) _size(element-margin) 0;
			}
		}

		@include orientation(portrait) {
			@include vendor('align-items', 'center');
			@include vendor('flex-direction', 'column-reverse');
			text-align: center !important;

			.content {
				width: 34rem;
				max-width: 100%;
			}

			.image {
				margin-right: 0;
			}
		}

		// Modifiers.

			// Orientation.
				&.orient-left {
					@include vendor('flex-direction', 'row');

					.image {
						margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75);
					}

					@include breakpoint('<=small') {
						.image {
							margin: 0 0 _size(element-margin) (_size(element-margin) * 1);
						}
					}

					@include orientation(portrait) {
						@include vendor('flex-direction', 'column-reverse');

						.image {
							margin-left: 0;
						}
					}
				}

				&.orient-right {
					// ...
				}

			// Content Alignment.
				&.content-align-left {
					// ...
				}

				&.content-align-center {
					text-align: center;
				}

				&.content-align-right {
					text-align: right;
				}

			// Image Position.
				&.image-position-left {
					.image {
						img {
							@include vendor('object-position', 'left');
						}
					}
				}

				&.image-position-center {
					// ...
				}

				&.image-position-right {
					.image {
						img {
							@include vendor('object-position', 'right');
						}
					}
				}

	}

/* Spotlight (style3) */

	.spotlight.style3 {
		$image-width: 13rem;
		$content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75);

		@include padding(_size(padding, default), _size(padding, default));
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('flex-direction', 'row-reverse');
		@include vendor('justify-content', 'center');
		position: relative;
		overflow-x: hidden;
		text-align: left;

		.content {
			width: $content-size;
			max-width: 100%;
		}

		.image {
			@include phone($image-width);
			margin-right: (_size(element-margin) * 1.75);
		}

		@include breakpoint('<=xlarge') {
			@include padding(_size(padding, xlarge), _size(padding, xlarge));
		}

		@include breakpoint('<=large') {
			@include padding(_size(padding, large), _size(padding, large));
		}

		@include breakpoint('<=medium') {
			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));

			.image {
				@include resize-phone($image-width, 0.875);
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(padding, small) * 1.25, _size(padding, small));
			@include vendor('align-items', 'flex-start');

			.image {
				@include resize-phone($image-width, 0.625);
			}
		}

		@include orientation(portrait) {
			@include vendor('align-items', 'center');
			@include vendor('flex-direction', 'column-reverse');
			text-align: center !important;

			.content {
				width: 34rem;
				max-width: 100%;
			}

			.image {
				margin-right: 0;
				margin-left: 0;
			}
		}

		// Modifiers.

			// Variant.
				&.iphone {
					// ...
				}

				&.android {
					// ...
				}

			// Orientation.
				&.orient-left {
					@include vendor('flex-direction', 'row');

					.image {
						margin-right: 0;
						margin-left: (_size(element-margin) * 1.75);
					}

					@include orientation(portrait) {
						@include vendor('flex-direction', 'column-reverse');

						.image {
							margin-right: 0;
							margin-left: 0;
						}
					}
				}

				&.orient-right {
					// ...
				}

			// Content Alignment.
				&.content-align-left {
					// ...
				}

				&.content-align-center {
					text-align: center;
				}

				&.content-align-right {
					text-align: right;
				}

			// Image Position.
				&.image-position-left {
					.image {
						img {
							@include vendor('object-position', 'left');
						}
					}
				}

				&.image-position-center {
					// ...
				}

				&.image-position-right {
					.image {
						img {
							@include vendor('object-position', 'right');
						}
					}
				}

	}

/* Spotlight (style4) */

	.spotlight.style4 {
		@include padding(_size(padding, default), _size(padding, default) * 0.75);
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'center');
		background-color: inherit;
		position: relative;
		overflow-x: hidden;
		text-align: center;

		.content {
			@include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5);
			position: relative;
			width: (_size(inner) * 0.625);
			max-width: 50%;
			background-color: inherit;
			border-radius: _size(border-radius-alt);
			margin-bottom: _size(element-margin);
			z-index: 1;
		}

		.image {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 0;

			img {
				@include vendor('object-fit', 'cover');
				@include vendor('object-position', 'center');
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 0;
			}
		}

		@include breakpoint('<=xlarge') {
			@include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75);

			.content {
				@include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5);
			}
		}

		@include breakpoint('<=large') {
			@include padding(_size(padding, large), _size(padding, large) * 0.75);

			.content {
				@include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75);
			}
		}

		@include breakpoint('<=medium') {
			@include padding(_size(padding, medium), _size(padding, medium) * 0.75);

			.content {
				@include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75);
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(padding, small), _size(padding, small) * 0.75);

			.content {
				@include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75);
			}
		}

		@include breakpoint('<=xsmall') {
			.content {
				max-width: 80%;
			}
		}

		// Modifiers.

			// Size.
				&.fullscreen {
					min-height: 100vh;
				}

				&.halfscreen {
					min-height: 50vh;
				}

			// Orientation.
				&.orient-left {
					@include vendor('justify-content', 'flex-start');
					padding-left: 0;

					.content {
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
					}
				}

				&.orient-center {
					// ...
				}

				&.orient-right {
					@include vendor('justify-content', 'flex-end');
					padding-right: 0;

					.content {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}
				}

			// Content Alignment.
				&.content-align-left {
					text-align: left;
				}

				&.content-align-center {
					// ...
				}

				&.content-align-right {
					text-align: right;
				}

			// Image Position.
				&.image-position-left {
					.image {
						img {
							@include vendor('object-position', 'left');
						}
					}
				}

				&.image-position-center {
					// ...
				}

				&.image-position-right {
					.image {
						img {
							@include vendor('object-position', 'right');
						}
					}
				}

	}

/* Spotlight (style5) */

	.spotlight.style5 {
		@include padding(_size(padding, default), _size(padding, default) * 0.75);
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'center');
		background-color: inherit;
		position: relative;
		overflow-x: hidden;
		text-align: center;

		.content {
			@include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5);
			position: relative;
			width: (_size(inner) * 0.625);
			max-width: 52.5%;
			background-color: inherit;
			border-radius: _size(border-radius-alt);
			margin-bottom: _size(element-margin);
			z-index: 1;
		}

		.image {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 0;

			img {
				@include vendor('object-fit', 'cover');
				@include vendor('object-position', 'center');
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 0;
			}
		}

		@include breakpoint('<=xlarge') {
			@include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75);

			.content {
				@include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5);
			}
		}

		@include breakpoint('<=large') {
			@include padding(_size(padding, large), _size(padding, large) * 0.75);

			.content {
				@include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75);
			}
		}

		@include breakpoint('<=medium') {
			@include padding(_size(padding, medium), _size(padding, medium) * 0.75);

			.content {
				@include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75);
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(padding, small), _size(padding, small) * 0.75);

			.content {
				@include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75);
			}
		}

		@include breakpoint('<=xsmall') {
			.content {
				max-width: 80%;
			}
		}

		// Modifiers.

			// Size.
				&.fullscreen {
					min-height: 100vh;
				}

				&.halfscreen {
					min-height: 50vh;
				}

			// Orientation.
				&.orient-left {
					@include vendor('justify-content', 'flex-start');
				}

				&.orient-center {
					// ...
				}

				&.orient-right {
					@include vendor('justify-content', 'flex-end');
				}

			// Content Alignment.
				&.content-align-left {
					text-align: left;
				}

				&.content-align-center {
					// ...
				}

				&.content-align-right {
					text-align: right;
				}

			// Image Position.
				&.image-position-left {
					.image {
						img {
							@include vendor('object-position', 'left');
						}
					}
				}

				&.image-position-center {
					// ...
				}

				&.image-position-right {
					.image {
						img {
							@include vendor('object-position', 'right');
						}
					}
				}

	}

// Mixin

	@mixin color-spotlight($p: null) {
		.spotlight {
			.image {
				background-color: transparentize(_palette($p, fg-bold), 0.875);
			}

			@if ($p != 'invert') {
				&.invert {
					.image {
						background-color: transparentize(_palette(invert, fg-bold), 0.875);
					}
				}
			}
		}

		.spotlight.style3 {
			.image {
				@include color-phone($p);
			}

			// Variant.
				&.iphone {
					.image {
						@include color-phone-variant('iphone', $p);
					}
				}

				&.android {
					.image {
						@include color-phone-variant('android', $p);
					}
				}

			@if ($p != 'invert') {
				&.invert {
					.image {
						@include color-phone(invert);
					}

					// Variant.
						&.iphone {
							.image {
								@include color-phone-variant('iphone', invert);
							}
						}

						&.android {
							.image {
								@include color-phone-variant('android', invert);
							}
						}

				}
			}
		}
	}

	@include color-spotlight;