@internetstiftelsen/styleguide 4.1.13 → 5.0.0

package/src/molecules/card/_card.scss

@@ -1,25 +1,35 @@
-@charset 'UTF-8';
-
-@include molecule(card) {
+@charset "UTF-8";
+@use "sass:color";
+@use "sass:math";
+@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;
+
+@include mixin.molecule(card) {
 	display: flex;
 	position: relative;
 	flex-direction: column;
 	height: 100%;
 	overflow: hidden;
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 
-	@include e(image) {
+	@include bem.e(image) {
 		display: block;
 		width: 100%;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 	}
 
-	@include e(map) {
+	@include bem.e(map) {
 		display: block;
 		position: relative;
 		padding-top: 56.25%;
 		overflow: hidden;
-		border-radius: $border-radius;
+		border-radius: var.$border-radius;
 
 		> iframe {
 			position: absolute;
@@ -31,8 +41,8 @@
 			height: 100%;
 		}
 
-		@include bp-up(lg) {
-			min-height: rhythm(44);
+		@include breakpoint.bp-up(lg) {
+			min-height: func.rhythm(44);
 			padding-top: 0;
 
 			> iframe {
@@ -41,7 +51,7 @@
 		}
 	}
 
-	@include e(link) {
+	@include bem.e(link) {
 		color: var(---cyberspace-color);
 		text-decoration: none;
 
@@ -58,46 +68,46 @@
 
 		&:hover,
 		&:focus {
-			color: $color-ruby;
+			color: colors.$color-ruby;
 			text-decoration: underline;
 
 			> h1,
 			> h2 {
 				> span[class*='color'] {
-					color: $color-ruby !important;
+					color: colors.$color-ruby !important;
 					text-decoration: underline !important;
 				}
 			}
 		}
 	}
 
-	@include e(headline) {
-		@include e(icon) {
+	@include bem.e(headline) {
+		@include bem.e(icon) {
 			position: relative;
-			width: $icon-size-medium;
-			height: $icon-size-medium;
-			transform: translateY(rem(1px));
+			width: var.$icon-size-medium;
+			height: var.$icon-size-medium;
+			transform: translateY(func.to_rem(1px));
 			fill: currentColor;
 		}
 	}
 
-	@include e(meta) {
+	@include bem.e(meta) {
 		display: flex;
 		flex-wrap: nowrap;
 		align-items: flex-start;
 		justify-content: space-between;
-		margin-bottom: rhythm(1);
+		margin-bottom: func.rhythm(1);
 	}
 
-	@include e(content) {
+	@include bem.e(content) {
 
 		&:first-child {
-			padding: rhythm(3) 0;
+			padding: func.rhythm(3) 0;
 		}
 
 		&:not(:first-child) {
-			margin-top: rhythm(2);
-			padding-bottom: rhythm(3);
+			margin-top: func.rhythm(2);
+			padding-bottom: func.rhythm(3);
 		}
 
 		> :last-child {
@@ -105,18 +115,18 @@
 		}
 	}
 
-	@include e(text) {
-		margin-top: rhythm(1);
+	@include bem.e(text) {
+		margin-top: func.rhythm(1);
 	}
 
-	@include m(shadow) {
-		@include card-shadow($color-cyberspace, 0.2);
+	@include bem.m(shadow) {
+		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 	}
 
-	@include m(padded) {
+	@include bem.m(padded) {
 		background-color: var(--snow-color);
 
-		@include e(media) {
+		@include bem.e(media) {
 			flex: 0 0 auto;
 			width: 100%;
 			max-width: 100%;
@@ -124,77 +134,77 @@
 			border-bottom-left-radius: 0;
 		}
 
-		@include e(content) {
-			padding-right: rhythm(2);
-			padding-left: rhythm(2);
+		@include bem.e(content) {
+			padding-right: func.rhythm(2);
+			padding-left: func.rhythm(2);
 
 			p {
-				margin-top: rhythm(1);
+				margin-top: func.rhythm(1);
 			}
 
-			@include bp-up(md) {
-				padding-right: rhythm(4);
-				padding-left: rhythm(4);
+			@include breakpoint.bp-up(md) {
+				padding-right: func.rhythm(4);
+				padding-left: func.rhythm(4);
 			}
 		}
 
 		&.wp-block-iis-visualization {
 			background-color: transparent;
 
-			@include e(content) {
+			@include bem.e(content) {
 				p {
 					margin-top: 0;
 				}
 			}
 
 			&--no-padding > {
-				@include e(content) {
+				@include bem.e(content) {
 					padding: 0;
 				}
 			}
 		}
 	}
 
-	@include m(bordered) {
-		border-top: rem(4px) solid $color-ocean;
+	@include bem.m(bordered) {
+		border-top: func.to_rem(4px) solid colors.$color-ocean;
 	}
 
-	@include e(bottom) {
-		margin-top: rhythm(2);
+	@include bem.e(bottom) {
+		margin-top: func.rhythm(2);
 	}
 
-	@include m(wide) {
+	@include bem.m(wide) {
 		height: auto;
 
-		@include bp-up(md) {
+		@include breakpoint.bp-up(md) {
 			flex-direction: row;
 			height: auto;
 
 			h1,
 			h2 {
-				font-size: rem(32px);
+				font-size: func.to_rem(32px);
 				line-height: 1.2;
 			}
 
-			@include e(content) {
+			@include bem.e(content) {
 				display: flex;
 				flex-basis: 50%;
 				flex-direction: column;
-				padding-top: rhythm(2);
+				padding-top: func.rhythm(2);
 			}
 
-			@include e(image) {
+			@include bem.e(image) {
 				display: block;
 				object-fit: cover;
 				object-position: 50% center;
 			}
 
-			@include e(media) {
+			@include bem.e(media) {
 				max-width: 50%;
 				margin-bottom: 0;
-				border-top-left-radius: $border-radius;
+				border-top-left-radius: var.$border-radius;
 				border-top-right-radius: 0;
-				border-bottom-left-radius: $border-radius;
+				border-bottom-left-radius: var.$border-radius;
 			}
 
 			picture {
@@ -202,33 +212,33 @@
 				width: 100%;
 				max-width: 50%;
 
-				@include e(media) {
+				@include bem.e(media) {
 					max-width: 100%;
 				}
 			}
 
-			@include e(bottom) {
+			@include bem.e(bottom) {
 				margin-top: 0;
 			}
 
-			@include m(flipped) {
+			@include bem.m(flipped) {
 				flex-direction: row-reverse;
 
-				@include e(media) {
-					border-top-right-radius: $border-radius;
+				@include bem.e(media) {
+					border-top-right-radius: var.$border-radius;
 					border-top-left-radius: 0;
 					border-bottom-left-radius: 0;
-					border-bottom-right-radius: $border-radius;
+					border-bottom-right-radius: var.$border-radius;
 				}
 			}
 
-			@include m(stretch) {
+			@include bem.m(stretch) {
 				height: 100%;
 			}
 		}
 	}
 
-	@include m(teaser) {
+	@include bem.m(teaser) {
 		display: block;
 		overflow: hidden;
 
@@ -242,17 +252,17 @@
 		&::after {
 			content: '';
 			position: absolute;
-			z-index: z_index(background);
+			z-index: func.z_index(background);
 			top: 0;
 			right: 0;
 			bottom: 0;
 			left: 0;
 			transition: opacity 0.75s ease-out;
-			border-radius: $border-radius;
-			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-cyberspace, 0) 35%, rgba($color-cyberspace, 1) 100%);
+			border-radius: var.$border-radius;
+			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-cyberspace, 0) 35%, rgba(colors.$color-cyberspace, 1) 100%);
 		}
 
-		@include e(image) {
+		@include bem.e(image) {
 			width: 100%;
 			max-width: none;
 			height: 100%;
@@ -261,10 +271,10 @@
 			object-fit: cover;
 		}
 
-		@include e(content) {
+		@include bem.e(content) {
 			display: flex;
 			position: absolute;
-			z-index: z_index(middleground);
+			z-index: func.z_index(middleground);
 			top: 0;
 			right: 0;
 			bottom: 0;
@@ -272,25 +282,25 @@
 			flex-direction: column;
 			align-content: stretch;
 			justify-content: flex-end;
-			padding: rhythm(4);
+			padding: func.rhythm(4);
 			color: var(--snow-color);
-			text-shadow: $text-shadow;
+			text-shadow: config.$text-shadow;
 		}
 
-		@include e(link) {
+		@include bem.e(link) {
 			color: var(--snow-color);
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			margin-top: 0;
 			color: var(--snow-color);
 		}
 
-		@include e(bottom) {
+		@include bem.e(bottom) {
 			margin-top: 0;
 		}
 
-		@include e(meta) {
+		@include bem.e(meta) {
 			* {
 				color: var(--snow-color);
 			}
@@ -301,12 +311,12 @@
 		}
 	}
 
-	@include m(mini) {
-		padding: rhythm(1) rhythm(2);
-		background-color: $color-snow;
+	@include bem.m(mini) {
+		padding: func.rhythm(1) func.rhythm(2);
+		background-color: colors.$color-snow;
 
-		@include bp-up(md) {
-			padding: rhythm(2) rhythm(3);
+		@include breakpoint.bp-up(md) {
+			padding: func.rhythm(2) func.rhythm(3);
 		}
 	}
 }

package/src/molecules/context-menu/_context-menu.scss

@@ -1,27 +1,44 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/extends';
+@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;
 
-@include molecule(context-menu) {
+@include mixin.molecule(context-menu) {
 	display: inline-flex;
 	position: relative;
 	flex-direction: column;
 
 	button {
+
 		span {
 			pointer-events: none;
 		}
-	}
 
-	@include e(list) {
+		&[aria-expanded='true'] {
+			> svg {
+				width: var.$icon-size-medium;
+				height: var.$icon-size-medium;
+			}
+		}
+	}
 
+	@include bem.e(list) {
 		@extend %box-shadow;
 
 		position: absolute;
 		top: 100%;
-		left: rhythm(1);
+		left: func.rhythm(1);
 		width: auto;
-		min-width: calc(100% - #{rhythm(1)});
-		border: 1px solid $color-concrete;
-		background-color: $color-snow;
+		min-width: calc(100% - #{func.rhythm(1)});
+		border: 1px solid colors.$color-concrete;
+		background-color: colors.$color-snow;
 		white-space: nowrap;
 
 		&[aria-hidden='true'],
@@ -30,30 +47,30 @@
 		}
 	}
 
-	@include e(item) {
+	@include bem.e(item) {
 		padding: 0;
 
 		& + & {
-			border-top: 1px solid $color-concrete;
+			border-top: 1px solid colors.$color-concrete;
 		}
 
 		a {
 			display: block;
-			padding: rhythm(1) rhythm(2);
-			color: $color-cyberspace;
+			padding: func.rhythm(1) func.rhythm(2);
+			color: colors.$color-cyberspace;
 			text-decoration: none;
 
 			&:hover,
 			&:focus {
-				background-color: $color-ash;
+				background-color: colors.$color-ash;
 			}
 		}
 	}
 }
 
 .no-js {
-	@include molecule(context-menu) {
-		@include e(list) {
+	@include mixin.molecule(context-menu) {
+		@include bem.e(list) {
 			display: initial;
 		}
 	}

package/src/molecules/continue-video-guide/continue-video-guide.scss

@@ -1,12 +1,21 @@
 @charset "UTF-8";
-
-@include molecule(continue-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;
+
+@include mixin.molecule(continue-video-guide) {
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	z-index: z_index(middlegroundImportant);
+	z-index: func.z_index(middlegroundImportant);
 	width: 100px;
-	height: calc(100px + 23px + rhythm(1));
+	height: calc(100px + 23px + func.rhythm(1));
 	transform: scale(0.7);
 	display: none;
 
@@ -14,21 +23,21 @@
 		display: block;
 	}
 
-	@include bp-up(md) {
+	@include breakpoint.bp-up(md) {
 		transform: scale(1);
-		bottom: rhythm(2);
-		right: rhythm(2);
+		bottom: func.rhythm(2);
+		right: func.rhythm(2);
 	}
 
-	@include e(inner) {
+	@include bem.e(inner) {
 		position: relative;
 	}
 
-	@include e(progressbar) {
+	@include bem.e(progressbar) {
 		display: none;
 	}
 
-	@include e(continue) {
+	@include bem.e(continue) {
 		position: absolute;
 		z-index: 3;
 		display: flex;
@@ -36,7 +45,7 @@
 		justify-content: center;
 		width: 100px;
 		height: 100px;
-		border-color: $color-snow;
+		border-color: colors.$color-snow;
 
 		&::after {
 			content: 'Guidad tur';
@@ -45,32 +54,32 @@
 			left: auto;
 			right: auto;
 			bottom: 0;
-			transform: translateY(calc(100% + rhythm(1)));
+			transform: translateY(calc(100% + func.rhythm(1)));
 			text-align: center;
-			background-color: $color-peacock-light;
-			font-size: $size-medium;
-			font-family: $font-family-headings;
-			border-radius: $border-radius;
-			color: $color-cyberspace;
-			padding: rhythm(0.5) rhythm(1);
+			background-color: colors.$color-peacock-light;
+			font-size: var.$size-medium;
+			font-family: var.$font-family-headings;
+			border-radius: var.$border-radius;
+			color: colors.$color-cyberspace;
+			padding: func.rhythm(0.5) func.rhythm(1);
 			line-height: 1;
 		}
 
 		&:hover,
 		&:focus {
 			&::after {
-				font-size: calc($size-medium + 1px);
+				font-size: calc(var.$size-medium + 1px);
 			}
 		}
 	}
 
-	@include m(has-progress) {
-		@include e(continue) {
+	@include bem.m(has-progress) {
+		@include bem.e(continue) {
 			&::after {
 				content: 'Fortsätt';
 			}
 
-			@include e(arrow) {
+			@include bem.e(arrow) {
 				width: 0;
 				height: 0;
 				border-style: solid;
@@ -92,7 +101,7 @@
 			}
 		}
 
-		@include e(progressbar) {
+		@include bem.e(progressbar) {
 			display: block;
 			position: absolute;
 			z-index: 2;
@@ -107,12 +116,12 @@
 				border-radius: 50%;
 				content: '';
 				display: block;
-				border: 4px solid rgba($color-snow, 0.5);
+				border: 4px solid rgba(colors.$color-snow, 0.5);
 			}
 		}
 	}
 
-	@include e(image) {
+	@include bem.e(image) {
 		position: absolute;
 		z-index: 1;
 		width: 100px;
@@ -120,7 +129,7 @@
 		border-radius: 50%;
 	}
 
-	@include e(close) {
+	@include bem.e(close) {
 		border-radius: 50%;
 		position: absolute;
 		top: 0;
@@ -129,7 +138,7 @@
 
 		&:hover,
 		&:focus {
-			background-color: $color-peacock !important;
+			background-color: colors.$color-peacock !important;
 		}
 	}
-}
+}