@internetstiftelsen/styleguide 2.22.0 → 2.22.3-beta.0.1

package/src/molecules/glider/_glider-hero.scss

@@ -0,0 +1,325 @@
+@charset "UTF-8";
+
+// NOTE: this compnent is dependant on the glider.scss component
+// The Glider components is dependant on JS-classes and is therefore not namespaced
+
+.glider-hero-contain {
+	display: flex;
+	position: relative;
+	align-items: center;
+	margin: 0;
+
+	@include e(text) {
+		position: absolute;
+		top: rhythm(2);
+		left: rhythm(2);
+		z-index: z_index(background);
+		padding-right: rhythm(2);
+		max-width: 95%;
+
+		@include bp-up(sm-xs) {
+			top: rhythm(3);
+			left: rhythm(3);
+			padding-right: rhythm(3);
+			max-width: 90%;
+		}
+
+
+		@include bp-up(sm) {
+			top: rhythm(4);
+			left: rhythm(4);
+			padding-right: rhythm(4);
+			max-width: 80%;
+		}
+
+		@include bp-up(md) {
+			top: rhythm(6);
+			left: rhythm(6);
+			padding-right: rhythm(6);
+			max-width: 70%;
+		}
+
+		@include bp-up(lg) {
+			top: rhythm(7);
+			left: rhythm(7);
+			padding-right: 0;
+			max-width: 60%;
+		}
+
+		@include bp-up(xl) {
+			top: rhythm(8);
+			left: rhythm(8);
+		}
+
+		> h1 {
+			color: $color-snow;
+
+			> span {
+				background-color: rgba(0,0,0,0.6);
+			}
+
+			@include plumber(
+				$font-size: 2,
+				$line-height: 3,
+				$leading-bottom: 1
+			);
+
+			@include bp-up(sm) {
+				@include plumber(
+					$font-size: 2.3,
+					$line-height: 3,
+					$leading-bottom: 1
+				);
+			}
+
+			@include bp-up(md) {
+				@include plumber(
+					$font-size: 3,
+					$line-height: 4,
+					$leading-bottom: 2
+				);
+			}
+
+			@include bp-up(lg) {
+				@include plumber(
+					$font-size: 4,
+					$line-height: 5,
+					$leading-bottom: 2
+				);
+			}
+
+			@include bp-up(xl) {
+				@include plumber(
+					$font-size: 5,
+					$line-height: 6,
+					$leading-bottom: 3
+				);
+			}
+		}
+
+		> p {
+			color: $color-snow;
+
+			> span {
+				background-color: rgba(0,0,0,0.6);
+			}
+
+			@include plumber(
+				$font-size: 1.5,
+				$line-height: 2,
+			);
+
+			@include bp-up(sm) {
+				@include plumber(
+					$font-size: 2,
+					$line-height: 3,
+				);
+			}
+
+			@include bp-up(lg) {
+				@include plumber(
+					$font-size: 2.5,
+					$line-height: 3,
+				);
+			}
+
+			@include bp-up(xl) {
+				@include plumber(
+					$font-size: 3,
+					$line-height: 4,
+				);
+			}
+		}
+	}
+}
+
+.glider-slide {
+	@include m(hero) {
+		margin: 0;
+		padding: 0;
+		position: relative;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%);
+		}
+
+		@include e(image) {
+			display: block;
+			object-fit: cover;
+			object-position: 50% 50%;
+			width: 100%;
+			height: 100%;
+
+			@include bp-up(sm) {
+				min-height: rem(500px);
+				max-height: 75vh;
+			}
+		}
+
+		@include e(text) {
+			position: absolute;
+			z-index: 1;
+			bottom: rhythm(2);
+			left: rhythm(2);
+			padding-right: rhythm(2);
+			color: $color-snow;
+			font-family: $font-family-bold;
+			max-width: 95%;
+
+			> span {
+				//text-shadow: 0 0 20px rgba(0,0,0,0.8);
+
+				> a {
+					position: relative;
+					z-index: 1;
+
+					&:hover {
+						text-decoration: none;
+						color: $color-cyberspace !important;
+						text-shadow: none;
+					}
+
+					&::before {
+						content: '';
+						position: absolute;
+						z-index: -1;
+						width: 100%;
+						height: 100%;
+						background-color: $color-snow;
+						bottom: 0;
+						left: 0;
+						transform-origin: right;
+						transform: scaleX(0);
+						transition: transform .3s ease-in-out;
+					}
+
+					&:hover::before {
+						transform-origin: left;
+						transform: scaleX(1);
+					}
+				}
+			}
+
+			@include plumber(
+				$font-size: 2.3,
+				$line-height: 3,
+				$leading-bottom: 0,
+				$baseline: $headings-baseline
+			);
+
+			@include bp-up(sm-xs) {
+				bottom: rhythm(3);
+				left: rhythm(3);
+				padding-right: rhythm(3);
+				max-width: 90%;
+
+				@include plumber(
+					$font-size: 3,
+					$line-height: 4,
+					$leading-bottom: 0
+				);
+			}
+
+
+			@include bp-up(sm) {
+				bottom: rhythm(4);
+				left: rhythm(4);
+				padding-right: rhythm(4);
+				max-width: 80%;
+
+				@include plumber(
+					$font-size: 4,
+					$line-height: 5,
+					$leading-bottom: 0
+				);
+			}
+
+			@include bp-up(md) {
+				bottom: rhythm(6);
+				left: rhythm(6);
+				padding-right: rhythm(6);
+				max-width: 70%;
+
+				@include plumber(
+					$font-size: 5,
+					$line-height: 6,
+					$leading-bottom: 0
+				);
+			}
+
+			@include bp-up(lg) {
+				bottom: rhythm(7);
+				left: rhythm(7);
+				padding-right: 0;
+				max-width: 60%;
+
+				@include plumber(
+					$font-size: 6,
+					$line-height: 8,
+					$leading-bottom: 0
+				);
+			}
+
+			@include bp-up(xl) {
+				bottom: rhythm(8);
+				left: rhythm(8);
+				max-width: 50%;
+
+				@include plumber(
+					$font-size: 7,
+					$line-height: 9,
+					$leading-bottom: 0
+				);
+			}
+
+			@include bp-up(xxl) {
+				max-width: 45%;
+			}
+		}
+	}
+}
+
+.glider-nav {
+	transform: scale(0.7) translateY(-100%);
+
+	@include bp-up(md) {
+		transform: scale(1) translateY(0);
+	}
+
+	@include m(hero) {
+		&.disabled {
+			display: none;
+		}
+
+		&.glider-prev {
+			left: 0;
+
+			@include bp-up(md) {
+				left: rhythm(1);
+			}
+
+			@include bp-up(lg) {
+				left: rhythm(2);
+			}
+		}
+
+		&.glider-next {
+			right: 0;
+
+			@include bp-up(md) {
+				right: rhythm(1);
+			}
+
+			@include bp-up(lg) {
+				right: rhythm(2);
+			}
+		}
+	}
+}

package/src/molecules/glider/_glider.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-// The Glider component is dependant on JS-classes and is therefore not namespaced
+// The Glider components is dependant on JS-classes and is therefore not namespaced
 
 .glider-contain {
 	display: flex;
@@ -12,16 +12,6 @@
 	padding-left: rhythm(8);
 }
 
-.glider-contain-course {
-	display: flex;
-	position: relative;
-	align-items: center;
-	margin-top: 0;
-	margin-bottom: rhythm(2);
-	padding-left: 0;
-	padding-right: 0;
-}
-
 .glider {
 	position: relative;
 	margin: 0 auto;
@@ -101,120 +91,17 @@
 			}
 		}
 	}
-
-	@include m(course) {
-		margin-left: 0;
-		padding-left: 0;
-		padding-right: 0;
-
-		&::after {
-			display: none;
-		}
-
-		@include e(navigation) {
-			display: flex;
-			justify-content: space-between;
-
-			@include bp-up(lg) {
-				justify-content: flex-start;
-			}
-		}
-
-		@include e(media) {
-
-			&.zoom {
-				pointer-events: none;
-
-				@include bp-up(lg) {
-					pointer-events: auto;
-					cursor: zoom-in;
-					transition: all 0.15s ease-out;
-					position: relative;
-
-					&::after {
-						content: 'Förstora bilden';
-						color: $color-snow;
-						padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						border-top-left-radius: $border-radius;
-						border-bottom-right-radius: $border-radius;
-						width: auto;
-						line-height: 1;
-						height: $icon-size-large * 1.4;
-						background-color: rgba($color-cyberspace, 0.8);
-						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
-						background-position: rhythm(1) center;
-						background-size: $icon-size-medium $icon-size-medium;
-						background-repeat: no-repeat;
-
-					}
-
-					img {
-						transition: all 0.25s ease-out;
-					}
-
-					// Image zooming
-					&.is-zoomed {
-						cursor: zoom-out !important;
-						position: fixed;
-						left: 0;
-						right: 0;
-						top: 0;
-						bottom: 0;
-						z-index: z_index(foreground);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						background-color: rgba($color-cyberspace, 0.8);
-						flex-direction: column;
-
-						&::after {
-							display: none;
-						}
-
-						img {
-							cursor: zoom-out;
-							max-width: 100%;
-							max-height: 100vh;
-							padding: rhythm(1);
-							height: auto;
-						}
-
-						figcaption {
-							max-width: rem(612px);
-							text-align: center;
-							color: $color-snow;
-							padding-left: rhythm(2);
-							padding-right: rhythm(2);
-							margin-bottom: 0 !important;
-							padding-bottom: 0 !important;
-						}
-					}
-				}
-			}
-
-			figcaption {
-				margin-top: rhythm(1);
-			}
-			@include bp-up(lg) {
-				display: flex;
-				flex-direction: column-reverse;
-				margin-top: 0;
-			}
-		}
-	}
 }
 
 .glider-nav {
 	position: absolute;
 	top: 50%;
 	left: 0;
+	z-index: z_index(middleground);
 	transform: translateY(-50%);
 	transition: background-color 0.25s ease-out;
 	user-select: none;
+	cursor: pointer;
 
 	&:focus {
 		background-color: $color-snow;

package/src/molecules/glider/glider-course.js

@@ -1,9 +1,9 @@
 import Glider from 'glider-js';
 
-const gliderElementSingle = document.querySelector('.js-glider-course');
+const gliderElementCourse = document.querySelector('.js-glider-course');
 
-if (gliderElementSingle) {
-	const GliderSingle = new Glider(gliderElementSingle, {
+if (gliderElementCourse) {
+	const GliderCourse = new Glider(gliderElementCourse, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
@@ -13,7 +13,7 @@ if (gliderElementSingle) {
 	const prevBtns = document.querySelectorAll('.js-glider-prev');
 	const siteMain = document.querySelector('#siteMain');
 	const zoomImages = document.querySelectorAll('.js-zoom.zoom');
-	let slideIndex = GliderSingle.getCurrentSlide();
+	let slideIndex = GliderCourse.getCurrentSlide();
 	let bounding = 0;
 
 	const scrollTop = () => {
@@ -23,7 +23,7 @@ if (gliderElementSingle) {
 	if (nextBtns) {
 		[].forEach.call(nextBtns, (nextBtn) => {
 			nextBtn.addEventListener('click', () => {
-				GliderSingle.scrollItem(slideIndex += 1, true);
+				GliderCourse.scrollItem(slideIndex += 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -38,7 +38,7 @@ if (gliderElementSingle) {
 	if (prevBtns) {
 		[].forEach.call(prevBtns, (prevBtn) => {
 			prevBtn.addEventListener('click', () => {
-				GliderSingle.scrollItem(slideIndex -= 1, true);
+				GliderCourse.scrollItem(slideIndex -= 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -58,5 +58,5 @@ if (gliderElementSingle) {
 		});
 	}
 
-	module.exports = GliderSingle;
+	module.exports = GliderCourse;
 }

package/src/molecules/glider/glider-hero.js

@@ -0,0 +1,17 @@
+import Glider from 'glider-js';
+
+const gliderElementHero = document.querySelector('.js-glider-hero');
+
+if (gliderElementHero) {
+	const GliderHero = new Glider(gliderElementHero, {
+		scrollLock: true,
+		slidesToShow: 1,
+		slidesToScroll: 1,
+		arrows: {
+			prev: '.js-glider-prev',
+			next: '.js-glider-next',
+		},
+	});
+
+	module.exports = GliderHero;
+}

package/src/molecules/glider/glider.config.js

@@ -17,6 +17,13 @@ module.exports = {
 			context: {
 				single: true
 			}
+		},
+		{
+			name: 'Hero',
+			status: 'wip',
+			context: {
+				single: true
+			}
 		}
 	]
 }

package/src/organisms/hero/_hero.scss

@@ -376,6 +376,22 @@
 		}
 	}
 
+	@include m(video-wide) {
+		width: 100%;
+
+		@include e(video) {
+			width: 100%;
+			object-fit: cover;
+			object-position: 50% center;
+
+			@include bp-up(sm) {
+				min-height: rem(500px);
+				max-height: 50vh;
+			}
+
+		}
+	}
+
 	// Event
 	@include m(event) {
 		width: 100%;

package/src/organisms/hero/hero--dynamic-headline.scss

@@ -0,0 +1,156 @@
+@charset "UTF-8";
+
+@include organism(hero) {
+	@include m(dynamic-headline) {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		overflow: visible;
+
+		@include e(image) {
+			max-height: none;
+			min-height: 0;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: -1;
+		}
+
+		@include e(caption) {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			padding: rhythm(3);
+			background-image: none;
+			position: static;
+			z-index: auto;
+			color: $color-snow;
+
+			> h1 {
+				--minFontSize: 22px;
+				--maxFontSize: 300px;
+				--scaler: 10vw;
+
+				font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
+				font-family: $font-family-bold;
+				margin: 0;
+				padding: 0;
+				line-height: 1.2;
+			}
+
+			@include bp-up(sm-xs) {
+				padding: rhythm(4);
+			}
+
+			@include bp-up(sm) {
+				padding: rhythm(5);
+			}
+
+			@include bp-up(md) {
+				padding: rhythm(7);
+			}
+
+			@include bp-up(lg) {
+				padding: rhythm(8);
+			}
+
+			@include bp-up(xl) {
+				padding: rhythm(10);
+			}
+
+			&::before {
+				display: block;
+				content: attr(data-meta);
+				font-family: $font-family-mono;
+				font-size: 14px !important;
+				text-transform: uppercase;
+
+				@include bp-up(sm-xs) {
+					margin-left: rhythm(0.5);
+				}
+
+				@include bp-up(md) {
+					font-size: 18px !important;
+					margin-left: rhythm(1);
+				}
+
+				@include bp-up(lg) {
+					font-size: 20px !important;
+				}
+
+				@include bp-up(xl) {
+					font-size: 22px !important;
+				}
+
+				@include bp-up(xxl) {
+					font-size: 24px !important;
+					margin-left: rhythm(2);
+				}
+			}
+		}
+
+		@include e(button-continue) {
+			position: relative;
+			z-index: z_index(middleground);
+			align-self: center;
+			transform: scale(1) translateY(0);
+			animation: pulse infinite 1.5s ease;
+			will-change: transform;
+
+			@include bp-up(sm) {
+				animation: pulse2 infinite 1.5s ease;
+			}
+
+			@include bp-up(xl) {
+				animation: pulse3 infinite 1.5s ease;
+			}
+		}
+
+		@keyframes pulse {
+			0% {
+				transform: translateY(0);
+			}
+
+			50% {
+				transform: translateY(-25%);
+			}
+
+			100% {
+				transform: translateY(0);
+			}
+		}
+
+		@keyframes pulse2 {
+			0% {
+				transform: translateY(-25%) scale(2);
+			}
+
+			50% {
+				transform: translateY(-50%) scale(2);
+			}
+
+			100% {
+				transform: translateY(-25%) scale(2);
+			}
+		}
+
+		@keyframes pulse3 {
+			0% {
+				transform: translateY(-50%) scale(3);
+			}
+
+			50% {
+				transform: translateY(-75%) scale(3);
+			}
+
+			100% {
+				transform: translateY(-50%) scale(3);
+			}
+		}
+
+
+	}
+}