altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
566 lines (451 loc) • 21 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-_49-ekspanderbart-panel-innhold-70-innboks-panel-innhold -->
<div class="row">
<div class="col"></div>
<div class="col-12 col-md-auto mb-1 mb-md-0 text-left text-md-right">
<!-- START: 00-atomer-02-lenker-36-link-ikon -->
<a href="/patterns/04-sider-portal-50-innboks-04-innboks-aktivitetslogg/04-sider-portal-50-innboks-04-innboks-aktivitetslogg.html" class="a-linkIcon a-fontReg a-fontSizeXS pr-0">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg ai-nw ai-nw-pr reg-log "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>
Aktivitetslogg
</span>
</a>
<!-- END: 00-atomer-02-lenker-36-link-ikon -->
</div>
<div class="col-12 col-md-auto text-left text-md-right">
<span class="a-fontSizeXS a-fontBold">mottatt: </span><span class="a-fontSizeXS ">05.03.2016</span>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="my-0 d-inline">Mva-meldingen skal leveres av de som er registrert i Merverdiavgiftsregisteret. Den viser hvor mye merverdiavgift du som avgiftspliktig skal innbetale til staten, eller staten skal tilbakebetale til deg.</p>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<!-- START: 00-atomer-08-lister-10-liste-unummerert-ikoner -->
<ul class="no-decoration a-iconList">
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment-ods ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>
<b>Forretningsplan.ods</b>
(last ned)
</span>
</a>
</li>
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>
<b>Oppdragsavtale.doc</b>
(last ned)
</span>
</a>
</li>
<li>
<a href="#" class="">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-attachment-pdf ai-md ai-nw pr-1 ai-fontSizeS"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>
<b>Driftsbudsjett.pdf</b>
(last ned)
</span>
</a>
</li>
</ul>
<!-- END: 00-atomer-08-lister-10-liste-unummerert-ikoner -->
</div>
<div class="col-12">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-download " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Last ned alle
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<div class="row mt-3">
<div class="col">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div class="a-message a-message-info a-message--arrow-off a-message--extendLeft a-message--no-dropshadow pb-4 pt-2 ">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<div class="">
<span class='a-fontBold'>fra:</span> Avsender
</div>
Dette er en beskjed uten pil og med full bredde
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
</div>
<div class="row mt-3">
<div class="col">
<!-- START: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold JS doc: expandContent.js -->
<div class="row">
<div class="col-12" id="expandableExample">
<p>
Til daglig leder:
<p>
<h2>
Nå kommer sykmeldinger i Altinn
</h2>
<p>
Fra 29. september vil u finne sykmeldinger fra noen av dine ansatte her i meldingsboksen hos Altinn. Dette er sykmeldinger fra de ansatte som velger å prøve en ny tjeneste fra NAV.
</p>
<p>
Tjenesten gjør det mulig å sende sykmeldingen digitalt. I samme øyeblikk kan du melde tilbake til NAV hvem som følger opp den sykmeldte, altså nærmeste leder med personalansvar.
</p>
<h2>
Hva skal du gjøre?
</h2>
<p>
For å kunne se sykmeldingene i Altinn må det gis tilgang. Det er bare den som er registrert i Brønnøysundregisteret som daglig leder som kan tildele tilganger til andre personer i virksomheten.
</p>
<p>
Lorem ipsum dolor sit amet, at ius dicit dissentias disputando, cum movet delenit facilisis et, ea tritani nonumes accumsan vel. Duo et salutatus torquatos. Eos at alterum senserit, ius in ipsum dicat. At minim definitionem quo, in reque alienum fierent
sit, sint iusto impedit ei usu. Eam et tale dicit clita, est probo sadipscing definitionem ne, ut qui causae evertitur voluptaria.
</p>
<p>
Dicunt periculis aliquando eum an, adhuc iusto menandri cu nec. Latine periculis eum eu, mel sonet semper convenire eu. In duo consul necessitatibus, purto nominati mel in. Ut illud soluta quo, at sit sumo utinam postea. No aliquam fabellas deseruisse
duo, ea vel quod case.
</p>
</div>
<div class="col-12">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action a-fullWidthBtn" data-toggle="altinn-expand" data-target="#expandableExample" aria-hidden="true" tabindex="-1">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-plus " aria-hidden="true" ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Les hele</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
</div>
<!-- END: 00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold -->
</div>
</div>
<div class="row">
<div class="col mt-3">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mb-0 a-btn-no-textwrap">
Ok
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
<div class="col-lg-auto col-12 mt-3">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-help ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Hjelp
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-archive ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Arkiver
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block mr-2 ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-trash ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Slett
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn-link a-btn-md-block ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-forward " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text ">
Videresend
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<!-- END: 02-organismer-_49-ekspanderbart-panel-innhold-70-innboks-panel-innhold -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "atomer-link-ikon",
"lineagePath": "../../patterns/00-atomer-02-lenker-36-link-ikon\\00-atomer-02-lenker-36-link-ikon.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-varsel",
"lineagePath": "../../patterns/00-atomer-07-tekst-00-varsel\\00-atomer-07-tekst-00-varsel.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-liste-unummerert-ikoner",
"lineagePath": "../../patterns/00-atomer-08-lister-10-liste-unummerert-ikoner\\00-atomer-08-lister-10-liste-unummerert-ikoner.html",
"lineageState": "indesignreview altinn"
}, {
"lineagePattern": "atomer-knapp-ikon-tekst",
"lineagePath": "../../patterns/00-atomer-03-knapper-25-knapp-ikon-tekst\\00-atomer-03-knapper-25-knapp-ikon-tekst.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-♺-handlingsknapp-ekspanderbart-innhold",
"lineagePath": "../../patterns/00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold\\00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold.html",
"lineageState": "indesignreview altinn"
}, {
"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-link-ikon",
"lineagePath": "../../patterns/00-atomer-02-lenker-36-link-ikon\\00-atomer-02-lenker-36-link-ikon.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-varsel",
"lineagePath": "../../patterns/00-atomer-07-tekst-00-varsel\\00-atomer-07-tekst-00-varsel.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-liste-unummerert-ikoner",
"lineagePath": "../../patterns/00-atomer-08-lister-10-liste-unummerert-ikoner\\00-atomer-08-lister-10-liste-unummerert-ikoner.html",
"lineageState": "indesignreview altinn"
}, {
"lineagePattern": "atomer-knapp-ikon-tekst",
"lineagePath": "../../patterns/00-atomer-03-knapper-25-knapp-ikon-tekst\\00-atomer-03-knapper-25-knapp-ikon-tekst.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-♺-handlingsknapp-ekspanderbart-innhold",
"lineagePath": "../../patterns/00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold\\00-atomer-04-handlingsknapper-20-♺-handlingsknapp-ekspanderbart-innhold.html",
"lineageState": "indesignreview altinn"
}, {
"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-ekspanderbart-panel",
"lineagePath": "../../patterns/02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel\\02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel.html",
"lineageState": "specification altinn"
}],
"lineageR": [{
"lineagePattern": "organismer-ekspanderbart-panel",
"lineagePath": "../../patterns/02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel\\02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel.html",
"lineageState": "specification altinn"
}],
"patternLineageEExists": true,
"patternDesc": "<p>Ekspanderbart panel-innhold for innboks</p>\n",
"patternBreadcrumb": {
"patternType": "organismer",
"patternSubtype": "ekspanderbart-panel-innhold"
},
"patternExtension": "mustache",
"patternName": "Innboks Panel Innhold",
"patternPartial": "organismer-innboks-panel-innhold",
"patternState": "inprogress altinn",
"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>