@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/organisms/video-guide/_video-guide.scss

@@ -1,13 +1,23 @@
 @charset "UTF-8";
 @use "sass:color";
-
-@include organism(video-guide) {
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/config' as config;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+@use '../../vendor/grid/grid' as grid;
+@use '../../vendor/baseline/plumber' as plumber;
+
+@include mixin.organism(video-guide) {
 	flex-direction: column;
-	background-color: $color-snow;
-	border-radius: $border-radius;
+	background-color: colors.$color-snow;
+	border-radius: var.$border-radius;
 	overflow: hidden;
 
-	@include e(inner-wrapper) {
+	@include bem.e(inner-wrapper) {
 		width: 100%;
 		position: relative;
 	}
@@ -18,7 +28,7 @@
 		position: relative;
 	}
 
-	@include e(video-container) {
+	@include bem.e(video-container) {
 		position: relative;
 		padding-top: 70vh;
 		width: 100%;
@@ -26,16 +36,16 @@
 		flex-direction: column;
 		justify-content: center;
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			padding-top: 76.25%;
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			padding-top: 56.25%;
 		}
 	}
 
-	@include e(timeline-item) {
+	@include bem.e(timeline-item) {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -64,57 +74,57 @@
 			width: 100%;
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			position: absolute;
 			top: 50%;
 			left: 0;
 			right: 0;
 			text-align: center;
-			padding-left: rhythm(2);
-			padding-right: rhythm(2);
+			padding-left: func.rhythm(2);
+			padding-right: func.rhythm(2);
 
 			transform: translateY(-75%);
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				transform: translateY(-50%);
-				padding-left: rhythm(4);
-				padding-right: rhythm(4);
+				padding-left: func.rhythm(4);
+				padding-right: func.rhythm(4);
 			}
 
-			@include bp-up(lg) {
+			@include breakpoint.bp-up(lg) {
 				transform: translateY(-50%);
 			}
 
-			@include bp-up(xl) {
-				left: rhythm(8);
-				width: calc(100% - rhythm(16));
+			@include breakpoint.bp-up(xl) {
+				left: func.rhythm(8);
+				width: calc(100% - func.rhythm(16));
 			}
 
-			@include e(headline) {
-				font-family: $font-family-bold;
-				color: $color-snow;
-				text-shadow: 0 0 rem(50px) rgba($color-black, 1),
-					0 0 rem(10px) rgba($color-black, 1),
-					rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6);
+			@include bem.e(headline) {
+				font-family: var.$font-family-bold;
+				color: colors.$color-snow;
+				text-shadow: 0 0 func.to_rem(50px) rgba(colors.$color-black, 1),
+					0 0 func.to_rem(10px) rgba(colors.$color-black, 1),
+					func.to_rem(1px) func.to_rem(1px) func.to_rem(2px) rgba(colors.$color-black, 0.6);
 
-				@include plumber(
-					$font-size: 3,
+				@include plumber.plumber(
+					var.$font-size: 3,
 					$line-height: 4,
 					$leading-bottom: 1,
-					$baseline: $headings-baseline
+					$baseline: var.$headings-baseline
 				);
 
-				@include bp-up(sm) {
-					@include plumber(
-						$font-size: 4.5,
+				@include breakpoint.bp-up(sm) {
+					@include plumber.plumber(
+						var.$font-size: 4.5,
 						$line-height: 5,
 						$leading-bottom: 1
 					);
 				}
 
-				@include bp-up(lg) {
-					@include plumber(
-						$font-size: 7,
+				@include breakpoint.bp-up(lg) {
+					@include plumber.plumber(
+						var.$font-size: 7,
 						$line-height: 8,
 						$leading-bottom: 2
 					);
@@ -122,10 +132,10 @@
 			}
 
 			> a {
-				font-size: $size-base * 1.3;
-				font-family: $font-family-headings;
-				padding: rhythm(0.5) rhythm(2);
-				color: $color-peacock;
+				font-size: var.$size-base * 1.3;
+				font-family: var.$font-family-headings;
+				padding: func.rhythm(0.5) func.rhythm(2);
+				color: colors.$color-peacock;
 				text-decoration: none;
 				line-height: 1;
 				position: relative;
@@ -136,7 +146,7 @@
 					z-index: -2;
 					width: 100%;
 					height: 100%;
-					background-color: rgba($color-black, 0.7);
+					background-color: rgba(colors.$color-black, 0.7);
 					bottom: 0;
 					left: 0;
 				}
@@ -147,7 +157,7 @@
 					z-index: -1;
 					width: 100%;
 					height: 100%;
-					background-color: $color-snow;
+					background-color: colors.$color-snow;
 					bottom: 0;
 					left: 0;
 					transform-origin: right;
@@ -163,7 +173,7 @@
 		}
 	}
 
-	@include e(video) {
+	@include bem.e(video) {
 		display: block;
 		position: absolute;
 		left: auto;
@@ -180,51 +190,51 @@
 			background-size: 30% 30%;
 		}
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			left: 0;
 		}
 
-		@include bp-up(lg) {
+		@include breakpoint.bp-up(lg) {
 			width: 200px;
 			height: 200px;
 		}
 
-		@include bp-up(xxl) {
+		@include breakpoint.bp-up(xxl) {
 			width: 250px;
 			height: 250px;
 		}
 	}
 
-	@include e(controls) {
-		background-color: $color-snow;
+	@include bem.e(controls) {
+		background-color: colors.$color-snow;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: rhythm(2);
+		padding: func.rhythm(2);
 		flex-direction: column-reverse;
 		overflow: hidden;
 
-		@include bp-up(sm) {
+		@include breakpoint.bp-up(sm) {
 			transform: translateX(0);
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			align-items: stretch;
 			flex-direction: row;
 		}
 	}
 
-	@include e(title) {
+	@include bem.e(title) {
 		line-height: 1;
-		margin-top: rhythm(1);
+		margin-top: func.rhythm(1);
 	}
 
-	@include e(chapters) {
+	@include bem.e(chapters) {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 
-		@include e(list) {
+		@include bem.e(list) {
 			width: 100%;
 			height: 100%;
 			list-style-type: none;
@@ -234,13 +244,13 @@
 			> li {
 				display: flex;
 				align-items: center;
-				background-color: $color-snow;
-				font-size: $size-medium;
+				background-color: colors.$color-snow;
+				font-size: var.$size-medium;
 				display: none;
 				line-height: 1;
 
-				@include bp-up(md) {
-					font-size: $size-medium-plus;
+				@include breakpoint.bp-up(md) {
+					font-size: var.$size-medium-plus;
 				}
 
 				&.is-current-item {
@@ -249,16 +259,16 @@
 			}
 		}
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			align-items: stretch;
 		}
 	}
 
-	@include e(timelineposts) {
+	@include bem.e(timelineposts) {
 		z-index: 2;
 		width: 250px;
 		min-width: 250px;
-		background-color: $color-cyberspace;
+		background-color: colors.$color-cyberspace;
 		position: relative;
 		transform: translateX(100%);
 		transition: transform 0.25s ease-out;
@@ -268,7 +278,7 @@
 		right: 0;
 		bottom: 0;
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			transform: translateX(0);
 			position: relative;
 			top: auto;
@@ -276,7 +286,7 @@
 			bottom: auto;
 		}
 
-		@include bp-up(xl) {
+		@include breakpoint.bp-up(xl) {
 			width: 350px;
 		}
 
@@ -284,7 +294,7 @@
 			transform: translateX(0);
 		}
 
-		@include e(list) {
+		@include bem.e(list) {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -293,13 +303,13 @@
 			overflow-y: auto;
 
 			dt {
-				color: $color-snow;
-				font-family: $font-family-headings;
-				padding: rhythm(1) rhythm(2);
+				color: colors.$color-snow;
+				font-family: var.$font-family-headings;
+				padding: func.rhythm(1) func.rhythm(2);
 
-				@include bp-up(md) {
-					padding-top: rhythm(2);
-					padding-bottom: rhythm(2);
+				@include breakpoint.bp-up(md) {
+					padding-top: func.rhythm(2);
+					padding-bottom: func.rhythm(2);
 				}
 			}
 
@@ -307,34 +317,34 @@
 				padding: 0;
 				margin: 0;
 				display: block;
-				border-top: 1px solid color.adjust($color-cyberspace, $lightness: 10%);
+				border-top: 1px solid color.adjust(colors.$color-cyberspace, $lightness: 10%);
 			}
 		}
 
-		@include e(link) {
+		@include bem.e(link) {
 			display: flex;
-			padding: rhythm(1) rhythm(2);
-			color: $color-snow;
+			padding: func.rhythm(1) func.rhythm(2);
+			color: colors.$color-snow;
 			text-decoration: none;
-			font-size: $size-medium;
+			font-size: var.$size-medium;
 			position: relative;
 			line-height: 1.5;
-			border-left: 0 solid $color-peacock;
+			border-left: 0 solid colors.$color-peacock;
 			transition: all 0.25s ease-out;
 
 			&::after {
 				content: attr(data-label);
 				display: block;
-				background-color: $color-lemon;
-				color: $color-cyberspace;
-				font-family: $font-family-headings;
-				padding: rhythm(1);
+				background-color: colors.$color-lemon;
+				color: colors.$color-cyberspace;
+				font-family: var.$font-family-headings;
+				padding: func.rhythm(1);
 				line-height: 1;
 				align-self: flex-end;
 				white-space: nowrap;
-				border-radius: $border-radius;
-				transform: translateX(rhythm(0.5));
-				margin-left: rhythm(1);
+				border-radius: var.$border-radius;
+				transform: translateX(func.rhythm(0.5));
+				margin-left: func.rhythm(1);
 				overflow: hidden;
 				transition: transform 0.25s ease-out;
 				transform: scale(0);
@@ -344,7 +354,7 @@
 			&:hover,
 			&:focus,
 			&.is-current {
-				background-color: color.adjust($color-cyberspace, $lightness: 10%);
+				background-color: color.adjust(colors.$color-cyberspace, $lightness: 10%);
 
 				&::after {
 					overflow: visible;
@@ -354,43 +364,43 @@
 			}
 
 			&.is-current {
-				font-family: $font-family-headings;
-				border-left: rhythm(1) solid $color-peacock;
+				font-family: var.$font-family-headings;
+				border-left: func.rhythm(1) solid colors.$color-peacock;
 
 				&::after {
-					background-color: $color-peacock;
-					color: $color-snow;
+					background-color: colors.$color-peacock;
+					color: colors.$color-snow;
 				}
 			}
 		}
 
-		@include e(button-navigation) {
+		@include bem.e(button-navigation) {
 			transform: translateX(-100%);
-			background-color: $color-cyberspace;
-			border-bottom-left-radius: $border-radius;
+			background-color: colors.$color-cyberspace;
+			border-bottom-left-radius: var.$border-radius;
 
-			@include bp-up(md) {
+			@include breakpoint.bp-up(md) {
 				display: none;
 			}
 
 			&.is-toggeled {
 				transform: translateX(0) scaleX(-1);
 				position: absolute;
-				right: rhythm(2);
+				right: func.rhythm(2);
 				z-index: 2;
 			}
 		}
 	}
 
-	@include e(buttons) {
+	@include bem.e(buttons) {
 		display: flex;
 		align-items: center;
 	}
 
-	@include e(button) {
+	@include bem.e(button) {
 		display: flex;
 		align-items: center;
-		margin: 0 rhythm(1);
+		margin: 0 func.rhythm(1);
 		padding: 0;
 		border: 0;
 		background-color: transparent;
@@ -403,89 +413,89 @@
 			cursor: not-allowed;
 
 			> svg {
-				fill: $color-concrete;
+				fill: colors.$color-concrete;
 			}
 		}
 
 		&:hover {
 			> svg {
-				fill: $color-peacock;
+				fill: colors.$color-peacock;
 			}
 		}
 
-		@include m(subtitles) {
+		@include bem.m(subtitles) {
 			&.is-active {
 				svg {
-					fill: $color-peacock;
+					fill: colors.$color-peacock;
 				}
 			}
 		}
 	}
 
-	@include e(countdown) {
-		font-size: $size-medium-plus;
-		padding-left: rhythm(1);
-		padding-right: rhythm(1);
+	@include bem.e(countdown) {
+		font-size: var.$size-medium-plus;
+		padding-left: func.rhythm(1);
+		padding-right: func.rhythm(1);
 	}
 
-	@include e(play-icon) {
-		width: $icon-size-large * 1.5;
-		height: $icon-size-large * 1.5;
+	@include bem.e(play-icon) {
+		width: var.$icon-size-large * 1.5;
+		height: var.$icon-size-large * 1.5;
 	}
 
-	@include e(rewind-icon) {
-		width: $icon-size-large;
-		height: $icon-size-large;
+	@include bem.e(rewind-icon) {
+		width: var.$icon-size-large;
+		height: var.$icon-size-large;
 	}
 
-	@include e(forward-icon) {
-		width: $icon-size-large;
-		height: $icon-size-large;
+	@include bem.e(forward-icon) {
+		width: var.$icon-size-large;
+		height: var.$icon-size-large;
 	}
 
-	@include e(subtitles-icon) {
-		width: $icon-size-large * 1.2;
-		height: $icon-size-large * 1.2;
+	@include bem.e(subtitles-icon) {
+		width: var.$icon-size-large * 1.2;
+		height: var.$icon-size-large * 1.2;
 	}
 
-	@include e(subtitles) {
+	@include bem.e(subtitles) {
 		text-align: center;
 		width: auto;
 		position: absolute;
-		bottom: rhythm(1);
-		right: rhythm(1);
+		bottom: func.rhythm(1);
+		right: func.rhythm(1);
 		z-index: 3;
-		font-family: $font-family-headings;
+		font-family: var.$font-family-headings;
 		min-width: 200px;
 		max-width: 300px;
 		display: none;
-		padding: rhythm(0.5) rhythm(1);
+		padding: func.rhythm(0.5) func.rhythm(1);
 		line-height: 1.7;
 
-		@include bp-up(sm) {
-			font-size: $size-base;
-			padding: rhythm(1) rhythm(2);
+		@include breakpoint.bp-up(sm) {
+			font-size: var.$size-base;
+			padding: func.rhythm(1) func.rhythm(2);
 			min-width: 300px;
 			max-width: 400px;
 		}
 
-		@include bp-up(md) {
-			font-size: $size-base * 1.5;
-			padding: rhythm(2) rhythm(4);
+		@include breakpoint.bp-up(md) {
+			font-size: var.$size-base * 1.5;
+			padding: func.rhythm(2) func.rhythm(4);
 			min-width: 400px;
 			max-width: 600px;
 		}
 
-		@include bp-up(lg) {
-			font-size: $size-base * 1.7;
+		@include breakpoint.bp-up(lg) {
+			font-size: var.$size-base * 1.7;
 			min-width: 500px;
 			max-width: 700px;
-			bottom: rhythm(2);
+			bottom: func.rhythm(2);
 			align-self: flex-end;
-			right: rhythm(2);
+			right: func.rhythm(2);
 		}
 
-		@include bp-up(xxl) {
+		@include breakpoint.bp-up(xxl) {
 			max-width: 800px;
 		}
 
@@ -498,20 +508,20 @@
 		}
 
 		> span {
-			background-color: rgba($color-black, 0.8);
-			color: $color-snow;
+			background-color: rgba(colors.$color-black, 0.8);
+			color: colors.$color-snow;
 		}
 	}
 
-	@include e(button-abort) {
+	@include bem.e(button-abort) {
 		position: absolute;
-		top: rhythm(1);
-		left: rhythm(1);
+		top: func.rhythm(1);
+		left: func.rhythm(1);
 		flex-grow: 0;
 		z-index: 2;
-		font-size: $size-small;
+		font-size: var.$size-small;
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			font-size: initial;
 		}
 	}