altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
314 lines (290 loc) • 14.8 kB
HTML
<html lang="no" class="">
<head>
<title>DESIGNSYSTEM PROTOTYPE - Altinn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../../images/favicons/manifest.json">
<link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg">
<meta name="apple-mobile-web-app-title" content="Altinn">
<meta name="application-name" content="Altinn">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- FortAwesome icons-->
<script src="https://use.fortawesome.com/ed31cded.js"></script>
<script src="https://use.fortawesome.com/df832575.js"></script>
<!-- Theme stylesheet -->
<link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen">
<script type="text/javascript">
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "none";
}
</script>
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
<!-- never cache patterns -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535451812396" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535451812396" media="all" />
<!-- End Pattern Lab -->
</head>
<body class="" id="top">
<div class="a-sg-content-preloader">
<div class="a-sg-content-preloader-status"> </div>
</div>
<!-- START: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<ol class="a-circle-list ">
<li><b>Første punkt i listen</b>(med ekstra informasjon) </li>
<li><b>Andre punkt i listen har</b>en særdeles lang tekst som går over flere linjer med lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit purus eu vehicula bibendum. Duis luctus magna ac dui convallis iaculis. Donec aliquam dolor
quis convallis finibus. Vivamus commodo semper volutpat. Nullam iaculis, nisl in elementum viverra, ligula leo tristique mauris, ut laoreet justo massa ut nisi. Duis lacinia nulla justo, vitae vehicula arcu suscipit sed. Vivamus ac odio quis turpis
rutrum lacinia a eu dui. Nullam imperdiet, nibh sit amet venenatis auctor, libero massa placerat ipsum, fermentum dignissim nibh mauris sit amet ex. </li>
<li><b>Tredje punkt</b>har kun litt tekst. </li>
<li><b>Fjerde punkt i listen har lenke!</b>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.skatteetaten.no" class=" ">
Finn ut mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
</ol>
<!-- END: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "atomer-link",
"lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
"lineageState": "complete altinn altinnett"
}],
"lineage": [{
"lineagePattern": "atomer-link",
"lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
"lineageState": "complete altinn altinnett"
}],
"patternLineageRExists": true,
"patternLineagesR": [{
"lineagePattern": "atomer-♺-liste-nummerert-sirkel-gul",
"lineagePath": "../../patterns/00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul\\00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul.html",
"lineageState": "indesignreview altinn"
}, {
"lineagePattern": "molekyler-trekkspill-overskrifter",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-01-trekkspill-overskrifter\\01-molekyler-02-navigasjon-01-trekkspill-overskrifter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "maler-altinnett-forside",
"lineagePath": "../../patterns/03-maler-altinnett-10-forside-10-forside\\03-maler-altinnett-10-forside-10-forside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-artikkel",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-10-artikkel\\03-maler-altinnett-30-artikkel-10-artikkel.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-infoportal-artikkel",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-10-artikkel\\03-maler-infoportal-30-artikkel-10-artikkel.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hjelpetrinn",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-70-artikkel-v-hjelpetrinn\\03-maler-infoportal-30-artikkel-70-artikkel-v-hjelpetrinn.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-faktura",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_15-artikkel-v-faktura\\03-maler-infoportal-30-artikkel-_15-artikkel-v-faktura.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hvemhvahvordan",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_20-artikkel-v-hvemhvahvordan\\03-maler-infoportal-30-artikkel-_20-artikkel-v-hvemhvahvordan.html"
}, {
"lineagePattern": "maler-infoportal-hurtighjelp-svar",
"lineagePath": "../../patterns/03-maler-infoportal-_70-hurtighjelp-12-hurtighjelp-svar\\03-maler-infoportal-_70-hurtighjelp-12-hurtighjelp-svar.html",
"lineageState": "indesignreview"
}],
"lineageR": [{
"lineagePattern": "atomer-♺-liste-nummerert-sirkel-gul",
"lineagePath": "../../patterns/00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul\\00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul.html",
"lineageState": "indesignreview altinn"
}, {
"lineagePattern": "molekyler-trekkspill-overskrifter",
"lineagePath": "../../patterns/01-molekyler-02-navigasjon-01-trekkspill-overskrifter\\01-molekyler-02-navigasjon-01-trekkspill-overskrifter.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "maler-altinnett-forside",
"lineagePath": "../../patterns/03-maler-altinnett-10-forside-10-forside\\03-maler-altinnett-10-forside-10-forside.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-altinnett-artikkel",
"lineagePath": "../../patterns/03-maler-altinnett-30-artikkel-10-artikkel\\03-maler-altinnett-30-artikkel-10-artikkel.html",
"lineageState": "inprogress altinnett"
}, {
"lineagePattern": "maler-infoportal-artikkel",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-10-artikkel\\03-maler-infoportal-30-artikkel-10-artikkel.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hjelpetrinn",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-70-artikkel-v-hjelpetrinn\\03-maler-infoportal-30-artikkel-70-artikkel-v-hjelpetrinn.html",
"lineageState": "inreview"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-faktura",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_15-artikkel-v-faktura\\03-maler-infoportal-30-artikkel-_15-artikkel-v-faktura.html"
}, {
"lineagePattern": "maler-infoportal-artikkel-v-hvemhvahvordan",
"lineagePath": "../../patterns/03-maler-infoportal-30-artikkel-_20-artikkel-v-hvemhvahvordan\\03-maler-infoportal-30-artikkel-_20-artikkel-v-hvemhvahvordan.html"
}, {
"lineagePattern": "maler-infoportal-hurtighjelp-svar",
"lineagePath": "../../patterns/03-maler-infoportal-_70-hurtighjelp-12-hurtighjelp-svar\\03-maler-infoportal-_70-hurtighjelp-12-hurtighjelp-svar.html",
"lineageState": "indesignreview"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Foreløpig ingen retningslinjer.</p>\n",
"patternBreadcrumb": {
"patternType": "atomer",
"patternSubtype": "lister"
},
"patternExtension": "mustache",
"patternName": "Liste Nummerert Sirkel",
"patternPartial": "atomer-liste-nummerert-sirkel",
"patternState": "indesignreview altinn altinnett",
"patternEngineName": "mustache",
"extraOutput": {}
}
</script>
<script>
/*!
* scriptLoader - v0.1
*
* Copyright (c) 2014 Dave Olsen, http://dmolsen.com
* Licensed under the MIT license
*
*/
var scriptLoader = {
run: function(js, cb, target) {
var s = document.getElementById(target + '-' + cb);
for (var i = 0; i < js.length; i++) {
var src = (typeof js[i] != 'string') ? js[i].src : js[i];
var c = document.createElement('script');
c.src = '../../' + src + '?' + cb;
if (typeof js[i] != 'string') {
if (js[i].dep !== undefined) {
c.onload = function(dep, cb, target) {
return function() {
scriptLoader.run(dep, cb, target);
}
}(js[i].dep, cb, target);
}
}
s.parentNode.insertBefore(c, s);
}
}
}
</script>
<script id="pl-js-polyfill-insert-1535451812396">
(function() {
if (self != top) {
var cb = '1535451812396';
var js = [];
if (typeof document !== 'undefined' && !('classList' in document.documentElement)) {
js.push('styleguide/bower_components/classList.min.js');
}
scriptLoader.run(js, cb, 'pl-js-polyfill-insert');
}
})();
</script>
<script id="pl-js-insert-1535451812396">
(function() {
if (self != top) {
var cb = '1535451812396';
var js = [{
'src': 'styleguide/bower_components/jwerty.min.js',
'dep': ['styleguide/js/patternlab-pattern.min.js']
}];
scriptLoader.run(js, cb, 'pl-js-insert');
}
})();
</script>
<!-- JQUERY -->
<script src="../../js/jquery.min.js"></script>
<!-- CODE PRETTIFY: Prettify code snippets in HTML -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>
<!-- Bundled assets -->
<script src="../../js/altinnPrototyping.vendor.js"></script>
<!-- ALTINN DEV custom JavaScript -->
<script src="./../../js/altinnPrototyping.js"></script>
<!-- CSS uploader inline javascript -->
<script type="text/javascript">
<!-- Check if current Window is in iFrame -->
$(document).ready(function() {
if (self === top) {
var $body = 'body';
if ($('.sg-top').length) {
var $panelBrsys = '.welcome-panel-brsys';
var $panelaltinn = '.welcome-panel-altinn';
switch (window.localStorage.getItem('selected_project')) {
case 'altinn':
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'altinnett':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.brreg.css"]').remove();
$($panelBrsys).hide();
$($panelaltinn).show();
break;
case 'brsys':
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$($panelaltinn).hide();
$($panelBrsys).show();
break;
default:
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({
href: '../../css/style.prototype.altinn.css?1535451812396',
media: 'all'
});
break;
}
} else {
$('link[href*="style.prototype.altinn.css"]').remove();
$('link[href*="style.dist.altinnett.css"]').remove();
$('link[href*="style.dist.brreg.css"]').attr({
href: '../../css/style.prototype.altinn.css?1535451812396',
media: 'all'
});
}
}
});
$(window).on('load', function() {
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "block";
}
});
</script>
</body>
</html>