<nav id="timeline-navigation" class="m-timeline-navigation" aria-hidden="true" data-focus-trap="false">
    <ol class="m-timeline-navigation__list">
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1963
            </div>
            <a href="#1963" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1967
            </div>
            <a href="#1967" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1969
            </div>
            <a href="#1969" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1971
            </div>
            <a href="#1971" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1973
            </div>
            <a href="#1973" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1974
            </div>
            <a href="#1974" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ruby">
                1982
            </div>
            <a href="#1982" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
    </ol>
</nav>

<button type="button" class="a-paging m-timeline-navigation__button js-timeline-navigation" aria-expanded="false" data-a11y-toggle="timeline-navigation" aria-controls="timeline-navigation">
    <span class="u-visuallyhidden">Visa tidslinje</span>
    <svg class="icon a-paging__icon">
        <use xlink:href="#icon-richtext-bullet-list"></use>
    </svg>
</button>
<div class="m-timeline-navigation__button__overlay js-timeline-overlay"></div>
<nav id="timeline-navigation" class="m-timeline-navigation" aria-hidden="true" data-focus-trap="false">
	<ol class="m-timeline-navigation__list">
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-ocean">
				1963
			</div>
			<a href="#1963" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-ocean">
				1967
			</div>
			<a href="#1967" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-ocean">
				1969
			</div>
			<a href="#1969" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-sandstone">
				1971
			</div>
			<a href="#1971" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-sandstone">
				1973
			</div>
			<a href="#1973" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-sandstone">
				1974
			</div>
			<a href="#1974" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
		<li class="m-timeline-navigation__list__item">
			<div class="a-meta color-ruby">
				1982
			</div>
			<a href="#1982" class="m-timeline-navigation__list__item__link">
				<h2>Data vidion är en "text-tv-indenter"</h2>
			</a>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
		</li>
	</ol>
</nav>

<{{getelement el "button"}}
	{{#if button_type}}type="{{button_type}}"{{/if}}
	{{#if url}}href="{{ url }}"{{/if}}
	class="a-paging{{#if additional_classes}} {{ additional_classes}}{{/if}}" aria-expanded="false" data-a11y-toggle="{{aria_controls}}" aria-controls="{{aria_controls}}">
	<span class="u-visuallyhidden">{{text}}</span>
	{{> @icon id=icon additional_classes="a-paging__icon"}}
</{{getelement el "button"}}>
<div class="m-timeline-navigation__button__overlay js-timeline-overlay"></div>
{
  "text": "Visa tidslinje",
  "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
}
  • Content:
    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();
    		});
    	});
    }
    
  • URL: /components/raw/timeline-navigation/timeline-navigation.js
  • Filesystem Path: src/molecules/timeline-navigation/timeline-navigation.js
  • Size: 1.2 KB
  • Content:
    @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;
    					}
    				}
    			}
    		}
    	}
    }
    
  • URL: /components/raw/timeline-navigation/timeline-navigation.scss
  • Filesystem Path: src/molecules/timeline-navigation/timeline-navigation.scss
  • Size: 3.1 KB

No notes defined.