From 72ccfcc4aa30a637faf1c7da0d294329f01e34f7 Mon Sep 17 00:00:00 2001
From: Dylan Bolger <dylanbolger@Dylans-MacBook-Air.local>
Date: Wed, 21 Mar 2018 12:34:37 -0500
Subject: working on web

---
 assets/sass/components/_panel-spotlight.scss | 81 ++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 assets/sass/components/_panel-spotlight.scss

(limited to 'assets/sass/components/_panel-spotlight.scss')

diff --git a/assets/sass/components/_panel-spotlight.scss b/assets/sass/components/_panel-spotlight.scss
new file mode 100644
index 0000000..e84a3fd
--- /dev/null
+++ b/assets/sass/components/_panel-spotlight.scss
@@ -0,0 +1,81 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel (Spotlight) */
+
+	$pad: _size(pad);
+	$pad-small-tb: _size(pad-small-tb);
+	$pad-small-lr: _size(pad-small-lr);
+
+	.panel.spotlight {
+		@include vendor('align-items', 'stretch');
+		position: relative;
+
+		> * {
+			z-index: 1;
+		}
+
+		.content {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'column');
+			@include vendor('justify-content', 'center');
+			@include padding($pad, $pad);
+		}
+
+		.image {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 0;
+
+			img {
+				@include vendor('object-fit', 'cover');
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		&.left {
+			@include vendor('justify-content', 'flex-start');
+
+			.content {
+				background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+			}
+		}
+
+		&.right {
+			@include vendor('justify-content', 'flex-end');
+
+			.content {
+				background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+			}
+		}
+	}
+
+	@include breakpoint(small) {
+		.panel.spotlight {
+			.content {
+				@include padding($pad-small-tb, $pad-small-lr);
+				@include vendor('flex-direction', 'column !important');
+				background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important;
+				min-height: 25rem;
+			}
+		}
+	}
+
+	@include breakpoint(xsmall) {
+		.panel.spotlight {
+			.content {
+				min-height: 30rem;
+			}
+		}
+	}
\ No newline at end of file
-- 
cgit v1.2.3