@internetstiftelsen/styleguide 2.22.3-beta.0.7 → 2.22.4

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

@@ -1,121 +0,0 @@
-@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-contain-course {
-	display: flex;
-	position: relative;
-	align-items: center;
-	margin-top: 0;
-	margin-bottom: rhythm(2);
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.glider-slide {
-	@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;
-			}
-		}
-	}
-}

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

@@ -1,325 +0,0 @@
-@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-hero.js

@@ -1,17 +0,0 @@
-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/organisms/hero/_hero--dynamic-headline.scss

@@ -1,161 +0,0 @@
-@charset "UTF-8";
-
-@include organism(hero) {
-	@include m(dynamic-headline) {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-around;
-		overflow: visible;
-		border-radius: 0;
-
-		@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 bp-up(xxl) {
-				object-position: 50% 50%;
-			}
-		}
-
-		@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: 200px;
-				--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(0) scale(2);
-			}
-
-			50% {
-				transform: translateY(-25%) scale(2);
-			}
-
-			100% {
-				transform: translateY(0) scale(2);
-			}
-		}
-
-		@keyframes pulse3 {
-			0% {
-				transform: translateY(0) scale(3);
-			}
-
-			50% {
-				transform: translateY(-25%) scale(3);
-			}
-
-			100% {
-				transform: translateY(0) scale(3);
-			}
-		}
-
-
-	}
-}