@internetstiftelsen/styleguide 2.22.2 → 2.22.3

package/dist/components.js

@@ -46,10 +46,6 @@ require('./molecules/glider/glider');
 
 require('./molecules/glider/glider-course');
 
-require('./atoms/timeline/anchorScroll');
-
-require('./molecules/timeline-navigation/timeline-navigation');
-
 require('./molecules/context-menu/context-menu');
 
 require('./molecules/alert/alert');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.2",
+	"version": "2.22.3",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/components.js

@@ -21,7 +21,5 @@ import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
 import './molecules/glider/glider-course';
-import './atoms/timeline/anchorScroll';
-import './molecules/timeline-navigation/timeline-navigation';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';

package/src/atoms/timeline/_timeline.scss

@@ -1,159 +0,0 @@
-@charset "UTF-8";
-
-@include atom(timeline) {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	font-family: $font-family-headings;
-	width: 50px;
-	flex-grow: 0;
-	flex-shrink: 0;
-
-	@include bp-up(lg) {
-		font-size: 170%;
-	}
-
-	&::after {
-		content: '';
-		display: flex;
-		background-color: $color-cyberspace;
-		height: 100%;
-		width: 3px;
-		order: 3;
-	}
-
-	@include m(first) {
-		&::before {
-			content: '';
-			display: flex;
-			border: 3px solid $color-cyberspace;
-			width: 50px;
-			height: 50px;
-			border-radius: 50%;
-			background-color: $color-snow;
-			order: 2;
-			flex-grow: 0;
-			flex-shrink: 0;
-			backface-visibility: visible !important;
-			animation-duration: 0.5s;
-			animation-fill-mode: both;
-			animation-delay: 2s;
-			transform-style: preserve-3d;
-			transition: border 3s ease;
-		}
-
-		&:hover {
-			&::before {
-				animation-name: flipX;
-				cursor: wait;
-			}
-		}
-	}
-}
-
-@include atom(timeline-item) {
-	overflow: visible !important;
-	z-index: 2;
-
-	@include card-shadow($color-cyberspace, 0.2);
-
-	&::before {
-		content: '';
-		display: flex;
-		height: 24px;
-		width: 24px;
-		border-radius: 50%;
-		background-color: $color-snow;
-		border: 3px solid $color-cyberspace;
-		position: absolute;
-		z-index: 1;
-		left: -48px;
-		top: 50%;
-		transform: translateY(-50%);
-		backface-visibility: visible !important;
-		animation-duration: 0.5s;
-		animation-fill-mode: both;
-		animation-delay: 0.15s;
-		transform-style: preserve-3d;
-	}
-
-	&::after {
-		content: '';
-		display: flex;
-		position: absolute;
-		z-index: -1;
-		width: 0;
-		height: 0;
-		border-style: solid;
-		left: -15px;
-		top: 50%;
-		transform: translateY(-50%);
-		transition: left 0.25s ease-out;
-		will-change: transform, left;
-		border-width: 40px 20px 40px 0;
-		border-color: transparent $color-snow transparent transparent;
-	}
-
-	&:hover,
-	&:focus {
-		&::before {
-			animation-name: flipInX;
-		}
-
-		&::after {
-			left: -20px;
-		}
-	}
-
-	&:nth-child(even) {
-		&::after {
-			border-color: transparent $color-snow transparent transparent;
-		}
-	}
-}
-
-@keyframes flipInX {
-	from {
-		transform: perspective(400px) rotate3d(0, 1, 0, 0deg) translateY(-50%);
-		animation-timing-function: ease-in;
-	}
-
-	40% {
-		transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translateY(-50%);
-		animation-timing-function: ease-in;
-	}
-
-	60% {
-		transform: perspective(400px) rotate3d(0, 1, 0, 0deg) translateY(-50%);
-	}
-
-	80% {
-		transform: perspective(400px) rotate3d(0, 1, 0, -30deg) translateY(-50%);
-	}
-
-	to {
-		transform: perspective(400px) translateY(-50%);
-	}
-}
-
-@keyframes flipX {
-	from {
-		transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
-		animation-timing-function: ease-in;
-	}
-
-	40% {
-		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-		animation-timing-function: ease-in;
-		border: 0;
-	}
-
-	100% {
-		background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 120 113.3' style='enable-background:new 0 0 120 113.3' xml:space='preserve'%3E%3Cstyle%3E.st2%7Bfill:%23858585%7D%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='59.99' y1='98.948' x2='59.99' y2='12.92' gradientTransform='matrix(1 0 0 -1 0 112.3)'%3E%3Cstop offset='.5' style='stop-color:%23fee133'/%3E%3Cstop offset='.612' style='stop-color:%23fede32'/%3E%3Cstop offset='.708' style='stop-color:%23fcd32f'/%3E%3Cstop offset='.797' style='stop-color:%23fac12b'/%3E%3Cstop offset='.883' style='stop-color:%23f7a924'/%3E%3Cstop offset='.9' style='stop-color:%23f6a323'/%3E%3C/linearGradient%3E%3Cpath d='M60 111.3c-27.3 0-56.7-17.1-56.7-54.7S32.7 2 60 2c15.1 0 29.1 5 39.5 14.1 11.3 10 17.2 24 17.2 40.5s-6 30.5-17.2 40.5c-10.4 9.2-24.4 14.2-39.5 14.2z' style='fill:url(%23SVGID_1_)'/%3E%3Cpath d='M60 4c14.6 0 28.2 4.8 38.1 13.6 10.8 9.6 16.6 23.1 16.6 39 0 15.9-5.7 29.4-16.6 39-10 8.8-23.5 13.7-38.1 13.7-14.7 0-28.2-4.8-38.2-13.5C11 86.3 5.3 72.7 5.3 56.7 5.3 40.5 11 27 21.9 17.5 31.7 8.8 45.3 4 60 4m0-4C29.5 0 1.3 19.6 1.3 56.7c0 36.9 28.2 56.7 58.7 56.7s58.7-20.3 58.7-56.7C118.7 20.1 90.5 0 60 0z' style='fill:%23eb8f00'/%3E%3Cpath d='M120 38.1s-4.3.1-4.3 3.5c0 8.4.1 26.5-22 26.5-17.7 0-26.1-9.1-27.5-19.2-.6-4.2-2-8.8-6.3-8.8s-5.7 4.6-6.3 8.8C52.2 59 43.8 68.1 26.1 68.1c-22 0-22-18.1-22-26.5 0-3.4-4.3-3.5-4.3-3.5v-8.3s8.2-1.3 20.7-1.3 17.5 0 27.4 1c5.9.6 12 .7 12 .7s6.1-.1 12-.7c9.9-1 14.9-1 27.4-1s20.7 1.3 20.7 1.3v8.3z'/%3E%3Cpath class='st2' d='M17.1 44.6c-.1 1.6-.7 3.1-2.3 3.4h-.5c-1.4 0-2.6-1-2.8-2.4-.6-3 .1-5.8 1.8-7.9 1.6-2 4-3.1 6.6-3.1 1.6 0 3 1 3 2.6 0 1.9-1.5 2.7-3 3.2-1.5.6-2.7 2.3-2.8 4.2zM80.7 44.6c-.1 1.6-.7 3.1-2.3 3.4h-.5c-1.4 0-2.6-1-2.8-2.4-.6-3 .1-5.8 1.8-7.9 1.6-2 4-3.1 6.6-3.1 1.6 0 3 1 3 2.6 0 1.9-1.5 2.7-3 3.2-1.5.6-2.7 2.3-2.8 4.2z'/%3E%3Cpath d='M60 86.5c-11.5 0-19.7-6-22.2-9.7-1-1.4-1.1-3-.5-4.2.5-.9 1.4-1.4 2.4-1.4.3 0 .7.1 1.1.2 5.8 1.8 12.5 2.8 19.2 2.8 6.7 0 13.4-1 19.2-2.8.4-.1.7-.2 1.1-.2 1.1 0 1.9.5 2.4 1.4.6 1.2.4 2.8-.5 4.2-2.5 3.7-10.7 9.7-22.2 9.7z' style='fill:%23242424'/%3E%3C/svg%3E");
-		background-size: 50px 50px;
-		background-repeat: no-repeat;
-		cursor: default;
-		border: 0;
-	}
-}

package/src/atoms/timeline/anchorScroll.js

@@ -1,7 +0,0 @@
-import SmoothScroll from 'smooth-scroll';
-
-const anchorScroll = new SmoothScroll('a[href*="#"]', {
-	easing: 'easeOutCubic',
-});
-
-module.exports = anchorScroll;

package/src/molecules/timeline-navigation/timeline-navigation.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-	status: 'prototype',
-
-	context: {
-		text: 'Paging',
-		modifiers: ['icon'],
-		icon: 'richtext-bullet-list',
-		additional_classes: 'm-timeline-navigation__button js-timeline-navigation',
-		button_type: 'button',
-		url: false,
-		aria_controls: 'timeline-navigation',
-		aria_expanded: false,
-		text: 'Visa tidslinje'
-	}
-}

package/src/molecules/timeline-navigation/timeline-navigation.js

@@ -1,32 +0,0 @@
-const timelineNavigation = document.querySelector('#timeline-navigation');
-const timeLineButton = document.querySelector('.js-timeline-navigation');
-const timeLineOverlay = document.querySelector('.js-timeline-overlay');
-const body = document.querySelector('body');
-const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-let clicked = false;
-
-if (timeLineButton) {
-	timeLineButton.addEventListener('click', () => {
-		body.classList.toggle('html-no-overflow');
-		if (clicked === false) {
-			timeLineButton.style.transform = `translateX(-${scrollbarWidth}px)`;
-			timeLineOverlay.style.transform = `translateX(-${scrollbarWidth}px)`;
-			body.style.paddingRight = `${scrollbarWidth}px`;
-			clicked = true;
-		} else {
-			timeLineButton.removeAttribute('style');
-			timeLineOverlay.removeAttribute('style');
-			body.removeAttribute('style');
-			clicked = false;
-		}
-	});
-}
-
-if (timelineNavigation) {
-	const timelineNavigationLinks = timelineNavigation.querySelectorAll('a');
-	[].forEach.call(timelineNavigationLinks, (timelineNavigationLink) => {
-		timelineNavigationLink.addEventListener('click', () => {
-			timeLineButton.click();
-		});
-	});
-}

package/src/molecules/timeline-navigation/timeline-navigation.scss

@@ -1,165 +0,0 @@
-@charset "UTF-8";
-
-.html-no-overflow {
-	overflow: hidden;
-}
-
-@include molecule(timeline-navigation) {
-	transition: opacity 2s ease-out;
-	transform: translate3d(0,0,0);
-	position: fixed;
-	top:0;
-	left: 0;
-	z-index: z_index(foreground);
-	display: flex;
-	justify-content: flex-end;
-	width: 100%;
-	//height: calc(100vh -#{rhythm(4)});
-	height: 100vh;
-
-	&[aria-hidden='true'] {
-		display: none;
-		opacity: 0;
-	}
-
-	&[aria-hidden='false'] {
-		animation: opacity;
-		animation-duration: 1s;
-		transform: translate3d(0,0,0);
-	}
-
-	@keyframes opacity {
-		0% {display: none; opacity: 0;}
-		1% {display: block; opacity: 0;}
-		100% {display: block; opacity: 1;}
-	}
-
-	@include e(button) {
-		position: fixed;
-		z-index: z_index(foreground);
-		right: rhythm(2);
-		bottom: rhythm(2);
-
-		&[aria-expanded='true'] {
-			+ [class*='overlay'] {
-				&::after {
-					box-shadow: 0 0 0 120vw rgba($color-cyberspace,0.7);
-
-					@media only screen and (orientation : portrait) {
-						box-shadow: 0 0 0 120vh rgba($color-cyberspace,0.7);
-					}
-				}
-			}
-		}
-
-		+ [class*='overlay'] {
-			position: fixed;
-			z-index: z_index(foregroundMinus);
-			right: rhythm(2);
-			bottom: rhythm(2);
-			width: rhythm(6);
-			height: rhythm(6);
-
-			&::after {
-				content: '';
-				position: absolute;
-				z-index: -1;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-				transition: box-shadow 0.3s ease-out;
-				transform: translate3d(0,0,0);
-			}
-		}
-	}
-
-	@include e(list) {
-		width: 100%;
-		max-width: 450px;
-		list-style-type: none;
-		margin: 0;
-		padding: 0 rhythm(5) 0 0;
-		position: relative;
-		overflow: hidden;
-		overflow-y: auto;
-		height: calc(100vh -#{rhythm(4)});
-
-
-		&::after {
-			content: '';
-			display: block;
-			width: 100%;
-			max-width: calc(450px -#{rhythm(7)});
-			height: rhythm(4);
-			position: fixed;
-			z-index: 2;
-			right: rhythm(7);
-			bottom: 0;
-			background-color: $color-cyberspace;
-		}
-
-		@include e(item) {
-			position: relative;
-			color: $color-snow;
-			padding: rhythm(2) rhythm(3);
-			background-color: $color-cyberspace;
-			border-right: 4px solid $color-snow;
-
-			&::after {
-				content: '';
-				display: flex;
-				height: 24px;
-				width: 24px;
-				border-radius: 50%;
-				background-color: $color-cyberspace;
-				border: 3px solid $color-snow;
-				position: absolute;
-				z-index: 1;
-				right: 0;
-				top: 50%;
-				transform: translateY(-50%) translateX(13.5px);
-				backface-visibility: visible !important;
-				animation-duration: 0.5s;
-				animation-fill-mode: both;
-				animation-delay: 0.15s;
-				transform-style: preserve-3d;
-			}
-
-			& + & {
-				border-top: 1px solid lighten($color-cyberspace, 7%);
-			}
-
-			&:hover {
-				background-color: lighten($color-cyberspace, 5%);
-			}
-
-			@include e(link) {
-				color: $color-snow;
-				text-decoration: none !important;
-				display: block;
-
-				&::after {
-					content: '';
-					display: block;
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					cursor: pointer;
-				}
-
-				&:hover,
-				&:focus {
-					text-decoration: underline;
-
-					> h2 {
-						text-decoration: underline;
-					}
-				}
-			}
-		}
-	}
-}