@internetstiftelsen/styleguide 2.22.4 → 2.23.0

package/src/atoms/tag/_tag.scss

@@ -11,9 +11,9 @@
 	z-index: z_index(middleground);
 	margin-right: rhythm(1);
 	margin-bottom: rhythm(1);
-	padding: rhythm(0.5) rhythm(2);
+	padding: rhythm(1) rhythm(2);
 	font-size: $small-text;
-	line-height: 1.8;
+	line-height: 1;
 	text-decoration: none;
 	text-transform: uppercase;
 

package/src/base/_normalize.scss

@@ -18,7 +18,7 @@ html {
 }
 
 body {
-	height: 100%;
+	height: auto;
 	min-height: 100%;
 	margin: 0;
 

package/src/base/fonts/_fonts.scss

@@ -6,8 +6,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff') format('woff');
 	font-display: swap;
 }
 
@@ -16,8 +16,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff') format('woff');
 	font-display: swap;
 }
 
@@ -26,8 +26,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff') format('woff');
 	font-display: swap;
 }
 
@@ -36,8 +36,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff') format('woff');
 	font-display: swap;
 }
 

package/src/components.js

@@ -21,5 +21,6 @@ import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
 import './molecules/glider/glider-course';
+import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';

package/src/configurations/_extends.scss

@@ -146,13 +146,17 @@
 	}
 
 	&:disabled {
-		background-color: $color-granit !important;
+		background-color: $color-concrete !important;
 		box-shadow: none;
 		cursor: not-allowed;
 
 		[class*='text'] {
 			color: $color-snow !important;
 		}
+
+		svg {
+			fill: $color-granit;
+		}
 	}
 
 	svg {

package/src/configurations/_variables.scss

@@ -11,9 +11,9 @@ $font-family-medium: 'HK Grotesk Medium', sans-serif !default;
 $font-family-bold: 'HK Grotesk Bold', sans-serif !default;
 $font-family-mono: 'Roboto Mono Regular', monospace !default;
 
-$headings-baseline: 0.09 !default; // HK Semibold
-$body-baseline: 0.09 !default; // HK Regular
-$mono-baseline: 0.111 !default; // Roboto Mono Regular
+$headings-baseline: 0.150 !default; // HK Semibold
+$body-baseline: 0.150 !default; // HK Regular
+$mono-baseline: 0.110 !default; // Roboto Mono Regular
 
 // Size base
 $size-base: 18px !default;

package/src/configurations/colors/_colors-functions.scss

@@ -76,7 +76,7 @@ $colors: (
 	@each $key, $value in $map {
 		&#{if($key != $base, #{$separator}#{$key}, '')} {
 			@if type-of($value) == 'map' {
-				@include color_classes($value, $attribute, $prefix, $separator: '-', $element:  $element);
+				@include color_classes($value, $attribute, $prefix: '.', $separator: '-', $element:  $element);
 			}
 			@else {
 				@if ($element != '') {
@@ -94,13 +94,12 @@ $colors: (
 }
 
 /// Generate wordpress color classes with attribute and value
-/// Generates this: .has-color-name{$suffix}
+/// Generates this: .has-colorname-color
 /// @group Colors
 @mixin wordpress_color_classes($map, $attribute,  $separator: '-', $suffix: '', $base: 'base') {
 	@each $key, $value in $map {
 		@if type-of($value) == 'map' {
 			&#{if($key != $base, #{$separator}#{$key}, '')} {
-				content: str-replace($key, 'color-', '');
 				@include wordpress_color_classes($value, $attribute, $separator, '-color');
 			}
 		}

package/src/configurations/grid/_grid.scss

@@ -1,5 +1,7 @@
 @charset 'UTF-8';
 
+@use "sass:math";
+
 // Grid only
 //
 // Includes relevant variables and mixins for the flexbox grid
@@ -18,7 +20,8 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
-	.wrapper {
+	.wrapper,
+	%wrapper {
 		@include make-container();
 		@include make-container-max-widths();
 
@@ -57,6 +60,12 @@
 		> [class*='grid-']:nth-child(#{$i}) {
 			transform: translateY(rhythm($col-gap));
 		}
+
+		@include bp-only(sm) {
+			> [class*='grid-']:last-child {
+				transform: translateY(rhythm($gap));
+			}
+		}
 	}
 }
 
@@ -75,45 +84,55 @@
 		@include make-asymmetric-cols($bp-gap, true);
 	}
 
-	@include bp-up(md) {
-		$bp-gap: $gap * 1.25;
-
+	@include bp-up(sm) {
 		margin: rhythm($margin * 1.25) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 1.25;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: math.div($gap, 2);
 			@include make-asymmetric-cols($bp-gap, true);
 		}
 	}
 
+	@include bp-up(md) {
+		&.asymmetric-reversed {
+			margin-bottom: calc(100px);
+		}
+	}
+
 	@include bp-up(lg) {
-		$bp-gap: $gap * 1.5;
+
 
 		margin: rhythm($margin * 1.5) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 1.5;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: $gap;
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(180px);
 		}
 	}
 
 	@include bp-up(xl) {
-		$bp-gap: $gap * 2;
-
 		margin: rhythm($margin * 2) 0 0;
 
 		&:not(.asymmetric-reversed) {
+			$bp-gap: $gap * 2;
 			@include make-asymmetric-cols($bp-gap);
 		}
 
 		&.asymmetric-reversed {
+			$bp-gap: $gap;
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(216px);
 		}
 	}
 }

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"play","name":"Play"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]
+[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]

package/src/configurations/typography/_typography.scss

@@ -1,7 +1,8 @@
 @charset 'UTF-8';
 
 h1,
-.alpha {
+.alpha,
+%alpha {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,
@@ -22,7 +23,8 @@ h1,
 }
 
 h2,
-.beta {
+.beta,
+%beta {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -43,7 +45,8 @@ h2,
 }
 
 h3,
-.gamma {
+.gamma,
+%gamma {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -53,7 +56,8 @@ h3,
 }
 
 h4,
-.delta {
+.delta,
+%delta {
 	@include plumber(
 		$font-size: 2,
 		$line-height: 3,
@@ -141,7 +145,8 @@ small {
 	);
 }
 
-.supersize {
+.supersize,
+%supersize {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,
@@ -168,12 +173,61 @@ small {
 	}
 }
 
+.godzilla {
+	@include plumber(
+		$leading-top: 0,
+		$leading-bottom: 0
+	);
+
+	line-height: 79px;
+	font-size: 120px;
+	font-family: $font-family-bold;
+	letter-spacing: -#{rem(5px)};
+
+	@include bp-up(sm) {
+		line-height: 100px;
+		font-size: 150px;
+	}
+
+	@include bp-up(md) {
+		line-height: 135px;
+		font-size: 200px;
+		letter-spacing: -#{rem(10px)};
+	}
+
+	@include bp-up(lg) {
+		line-height: 201px;
+		font-size: 295px;
+		letter-spacing: -#{rem(20px)};
+	}
+
+	@include bp-up(xl) {
+		line-height: 247px;
+		font-size: 360px;
+	}
+
+	// Special rule for decade starting with 1
+	@include m(19) {
+		&::first-letter {
+			letter-spacing: -#{rem(20px)};
+
+			@include bp-up(lg) {
+				letter-spacing: -#{rem(40px)};
+			}
+
+			@include bp-up(xl) {
+				letter-spacing: -#{rem(45px)};
+			}
+		}
+	}
+}
+
 .preamble,
 %preamble {
 
 	@include plumber(
-		$font-size: 2.5,
-		$line-height: 3,
+		$font-size: 2.55555,
+		$line-height: 4,
 		$leading-bottom: 4
 	);
 

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

@@ -0,0 +1,121 @@
+@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;
+			}
+		}
+	}
+}