altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
460 lines (383 loc) • 19.7 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: 02-organismer-70-Modal-innhold-_99-klientdelegering-pa-fil -->
<div class="modal-body a-modal-body">
<div class="py-2">
<form data-toggle="validator">
<div class="mb-3">
</div>
<div class="mb-1">
</div>
<div class="mb-3">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-download " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Last ned fil</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<div class="mb-1">
</div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" href="#" data-target="#file-delegation-ID" aria-expanded="true" aria-controls="file-delegation-ID" class="a-collapse-title a-collapse-title--flexstart a-fontBold no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Denne teksten kan man trykke på for å se utvidet informasjon om et tema
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
<div class="mt-1 mb-4">
<div id="file-delegation-ID" class="a-collapseContent collapse" aria-expanded="false" role="group">
<img src="../../images/klientdelegeringfil.jpg" class="mb-2" alt="Illustrasjon av Excel-fil for filopplastning." />
<!-- START: 00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul -->
<!-- START: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<ol class="a-circle-list a-circle-list-yellow">
<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 -->
<!-- END: 00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul -->
</div>
</div>
<div class="mb-1">
</div>
<div class="mb-4">
<!-- START: 00-atomer-01-forms-_71-fileupload-klientdelegering JS doc: fileInputHandler.js -->
<label class="a-btn a-btn-action a-custom-fileupload mb-0">
<input required class="a-js-fileInputChangeHandler sr-only" type="file" id="customFileuploadId">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-upload " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Last opp fil
</label>
<div style="display: none" class="a-js-fileListContainer">
<!-- START: 00-atomer-08-lister-_20-liste-opplasting JS doc: fileInputHandler.js -->
<ul class="a-item-list-icon a-list a-list-borderTop">
<li class="a-dotted a-selectable" tabindex="0" role="button" onclick="onFileListDeleteClick(this)" aria-label="Fjern fil:">
<div class="row">
<div class="col">
<span class="a-js-listItemText">
klientrolle_delegeringer_30_05_16.csv
</span>
</div>
<div class="col-auto text-right">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</li>
</ul>
<!-- END: 00-atomer-08-lister-_20-liste-opplasting -->
</div>
<!-- END: 00-atomer-01-forms-_71-fileupload-klientdelegering -->
</div>
<div class="mb-1">
</div>
<div class="row">
<div class="col-12 col-md-8 col-xl-6 mb-2">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label sr-only " for="text-input-klientdelegering-fil">Epost</label>
<div class="a-form-group-items input-group ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-klientdelegering-fil" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" onclick="location.href='/patterns/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html'" class="a-btn a-btn-success mb-0 a-js-enableWhenValid">
Ferdig
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</form>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_99-klientdelegering-pa-fil -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "atomer-seksjonstittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-10-seksjonstittel\\00-atomer-07-tekst-10-seksjonstittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-link",
"lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-undertittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-11-undertittel\\00-atomer-07-tekst-11-undertittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-ekspanderbar-tekst",
"lineagePath": "../../patterns/00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst\\00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst.html",
"lineageState": "complete altinn"
}, {
"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": "atomer-fileupload-klientdelegering",
"lineagePath": "../../patterns/00-atomer-01-forms-_71-fileupload-klientdelegering\\00-atomer-01-forms-_71-fileupload-klientdelegering.html",
"lineageState": "complete altinn"
}, {
"lineagePattern": "atomer-tekst-input",
"lineagePath": "../../patterns/00-atomer-01-forms-10-tekst-input\\00-atomer-01-forms-10-tekst-input.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-knapp",
"lineagePath": "../../patterns/00-atomer-03-knapper-10-knapp\\00-atomer-03-knapper-10-knapp.html",
"lineageState": "complete altinn altinnett"
}],
"lineage": [{
"lineagePattern": "atomer-seksjonstittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-10-seksjonstittel\\00-atomer-07-tekst-10-seksjonstittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-link",
"lineagePath": "../../patterns/00-atomer-02-lenker-00-link\\00-atomer-02-lenker-00-link.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-undertittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-11-undertittel\\00-atomer-07-tekst-11-undertittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-ekspanderbar-tekst",
"lineagePath": "../../patterns/00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst\\00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst.html",
"lineageState": "complete altinn"
}, {
"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": "atomer-fileupload-klientdelegering",
"lineagePath": "../../patterns/00-atomer-01-forms-_71-fileupload-klientdelegering\\00-atomer-01-forms-_71-fileupload-klientdelegering.html",
"lineageState": "complete altinn"
}, {
"lineagePattern": "atomer-tekst-input",
"lineagePath": "../../patterns/00-atomer-01-forms-10-tekst-input\\00-atomer-01-forms-10-tekst-input.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-knapp",
"lineagePath": "../../patterns/00-atomer-03-knapper-10-knapp\\00-atomer-03-knapper-10-knapp.html",
"lineageState": "complete altinn altinnett"
}],
"patternLineageRExists": true,
"patternLineagesR": [{
"lineagePattern": "organismer-modal-klientdelegering",
"lineagePath": "../../patterns/02-organismer-_71-modal-gruppering-01-modal-klientdelegering\\02-organismer-_71-modal-gruppering-01-modal-klientdelegering.html",
"lineageState": "indesignreview altinn"
}],
"lineageR": [{
"lineagePattern": "organismer-modal-klientdelegering",
"lineagePath": "../../patterns/02-organismer-_71-modal-gruppering-01-modal-klientdelegering\\02-organismer-_71-modal-gruppering-01-modal-klientdelegering.html",
"lineageState": "indesignreview altinn"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Innholdet til modal klientdelegering på fil.</p>\n",
"patternBreadcrumb": {
"patternType": "organismer",
"patternSubtype": "Modal-innhold"
},
"patternExtension": "mustache",
"patternName": "Klientdelegering Pa Fil",
"patternPartial": "organismer-klientdelegering-pa-fil",
"patternState": "indesignreview",
"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>