altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
835 lines (633 loc) • 30.6 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-_30-starte-enk -->
<!-- Modal -->
<span class="a-scene a-page">
<div class="a-modal " id="" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Modal Header -->
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
<div class="a-modal-top-user">
<!-- START: 00-atomer-07-tekst-40-innlogget -->
<div class="a-personSwitcher " title="JAN PETTERSEN ">
<span
class="a-personSwitcher-name">
<span class="d-block">JAN PETTERSEN</span>
<span class="d-block"></span>
</span>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private-circle-big a-personSwitcher-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<!-- END: 00-atomer-07-tekst-40-innlogget -->
</div>
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
<!-- END Modal Header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<!-- Modal NavBar -->
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-back a-js-tabable-popover" onclick="goBack()" aria-label="Lukk">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-back " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-close a-js-tabable-popover" onclick="location.href='../../patterns/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive.html';"
aria-label="Lukk">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<!-- END Modal NavBar -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<!-- Modal window -->
<span class="a-right-panel a-page a-scene-element ">
<div class="modal-content">
<!-- Modal Body header -->
<!-- START: 01-molekyler-20-modalelementer-15-modal-body-header -->
<div class="modal-header a-modal-header">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-background a-iconText-large ">
<div class="a-iconText-icon "><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-icon a-icon-circle " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small">Brønnøysundregistrene</span>
<span class="a-iconText-text-large">Starte Enkeltpersonforetak </span>
</h1>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</div>
<!-- END: 01-molekyler-20-modalelementer-15-modal-body-header -->
<!-- Modal Body content -->
<div class="modal-body a-modal-body">
<!-- TITLE -->
<!-- INTROTEKST -->
<!-- START: 00-atomer-07-tekst-02-intro-tekst -->
<p class="a-leadText " id="leadText">Ingress er et kort innledende avsnitt som vanligvis plasseres mellom overskriften og brødteksten.</p>
<!-- END: 00-atomer-07-tekst-02-intro-tekst -->
<!-- BUTTON -->
<!-- INPUT: OWNER INFO -->
<!-- *********************** --->
<!-- OLD INPUT: ORG NAME REMOVE--->
<!-- *********************** --->
<div class="a-btn-group mt-2">
</div>
<!-- *********************** --->
<!-- END OLD INPUT: ORG NAME REMOVE--->
<!-- *********************** --->
<!-- FIND INDUSTY CODE -->
<!-- INPUT: KEYWORD -->
<!-- LOADER -->
<!-- IF NO RESULTS -->
<!-- INPUT: CATEGORY -->
<!-- START: 02-organismer-20-forms-50-skjema-radio -->
<form data-toggle="validator" role="form" action="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="">
<div class="a-modal-contentFullWidth mt-2">
<!-- START: 00-atomer-01-forms-04-radioknapp -->
<fieldset class="form-group ">
<legend class="a-legend">Hvilken knapp vil du velge?
</legend>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList a-radioButtons-stackedList ">
<input type="radio" id="radio20" name="customRadio" value="radio20" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio20">En radioknapp
<span class="a-radioButtons-excerpt a-maxThreeLines">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</label>
</div>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList a-radioButtons-stackedList ">
<input type="radio" id="radio21" name="customRadio" value="radio21" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio21">Enda en radioknapp som inneholder <strong>mye tekst</strong>
<span class="a-radioButtons-excerpt a-maxThreeLines">
Mer lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-04-radioknapp -->
</div>
<div class="a-btn-group mt-2">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn ">
Velg denne radioknappen
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class=" ">
Finn næringskode selv
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</form>
<!-- END: 02-organismer-20-forms-50-skjema-radio -->
<!-- END FIND INDUSTY CODE -->
<!-- INPUT: DESCRIPTION -->
<!-- INPUT: ADRESS -->
<!-- INPUT: DATE -->
<!-- START: 02-organismer-20-forms-40-skjema-dato -->
<form data-toggle="validator" role="form" action="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="">
<!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
<label class="d-inline-block a-w-3-sm-down mr-0 mr-md-1 " for="">
<span class="a-input-labelText control-label">
Oppstartdato:
</span>
</label>
<div class="d-inline-block form-group a-form-group a-form-group-datepicker">
<div class="input-group">
<input type="text" id="" required class="form-control a-hasButton a-hasIcon date" />
<div class="input-group-prepend a-icon-right">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-deadline "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-60-datovelger -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn mt-2">
Neste
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</form>
<!-- END: 02-organismer-20-forms-40-skjema-dato -->
<!-- EXTRA INFO (Footer) -->
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list mx-1 mt-4 a-bulletList-light">
<li>
Første punkt i bullet-listen.
<!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
<a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
data-popover-content="popoverWithIconToggle">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-js-popoverIconInitial "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus a-js-popoverIconExpanded "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Vis mer info</span>
</a>
<div id="popoverWithIconToggle" style="display: none">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Dette er en tekst
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.altinn.no" class=" ">
med en lenke som står i løpende tekst
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
og man kan ha mer tekst etter.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->
</li>
<li>
Andre punkt i bullet-listen.
</li>
<li>
Tredje punkt i bullet-listen.
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
<!-- END Modal body -->
</div>
<!-- END .modal-Content -->
</span>
<!-- END Modal window -->
<!-- START: 02-organismer-30-seksjoner-28-chat -->
<div class="a-chat" id="chat">
<p>
Chat
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-exit a-modal-close-icon " id="close-chat"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<div class="a-chat-scrollarea">
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
Hei! Kan jeg hjelpe deg?
<p class="a-textBubble-metaText">2 minutter siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Ja, veldig gjerne
<p class="a-textBubble-metaText">30 sekunder siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Jeg skal strikke lusekofter og holde kurs i kulturvern. Hva skal jeg søke på?
<p class="a-textBubble-metaText">Nå</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
...
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
</div>
<!-- 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="chat">Skriv her</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="text" placeholder="Skriv her" name="input-field" data-val="true" id="chat">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<!-- END: 02-organismer-30-seksjoner-28-chat -->
</div>
</div>
</div>
</div>
</div>
</span>
<!-- END: 02-organismer-70-Modal-innhold-_30-starte-enk -->
<!-- DO NOT REMOVE -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
{
"cssEnabled": false,
"patternLineageExists": true,
"patternLineages": [{
"lineagePattern": "molekyler-modal-header",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-05-modal-header\\01-molekyler-20-modalelementer-05-modal-header.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "molekyler-modal-navbar",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-10-modal-navbar\\01-molekyler-20-modalelementer-10-modal-navbar.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "molekyler-modal-body-header",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-15-modal-body-header\\01-molekyler-20-modalelementer-15-modal-body-header.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "atomer-seksjonstittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-10-seksjonstittel\\00-atomer-07-tekst-10-seksjonstittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-intro-tekst",
"lineagePath": "../../patterns/00-atomer-07-tekst-02-intro-tekst\\00-atomer-07-tekst-02-intro-tekst.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": "organismer-skjema-innehaver",
"lineagePath": "../../patterns/02-organismer-20-forms-10-skjema-innehaver\\02-organismer-20-forms-10-skjema-innehaver.html",
"lineageState": "archived 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"
}, {
"lineagePattern": "atomer-laster-inn",
"lineagePath": "../../patterns/00-atomer-09-bilder-og-media-07-laster-inn\\00-atomer-09-bilder-og-media-07-laster-inn.html",
"lineageState": "specification altinn"
}, {
"lineagePattern": "atomer-avsnitt",
"lineagePath": "../../patterns/00-atomer-07-tekst-03-avsnitt\\00-atomer-07-tekst-03-avsnitt.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-skjema-radio",
"lineagePath": "../../patterns/02-organismer-20-forms-50-skjema-radio\\02-organismer-20-forms-50-skjema-radio.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-beskrivelse",
"lineagePath": "../../patterns/02-organismer-20-forms-60-skjema-beskrivelse\\02-organismer-20-forms-60-skjema-beskrivelse.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-adresse",
"lineagePath": "../../patterns/02-organismer-20-forms-30-skjema-adresse\\02-organismer-20-forms-30-skjema-adresse.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-dato",
"lineagePath": "../../patterns/02-organismer-20-forms-40-skjema-dato\\02-organismer-20-forms-40-skjema-dato.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "atomer-liste-unummerert-kuler",
"lineagePath": "../../patterns/00-atomer-08-lister-11-liste-unummerert-kuler\\00-atomer-08-lister-11-liste-unummerert-kuler.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-chat",
"lineagePath": "../../patterns/02-organismer-30-seksjoner-28-chat\\02-organismer-30-seksjoner-28-chat.html",
"lineageState": "archived altinn"
}],
"lineage": [{
"lineagePattern": "molekyler-modal-header",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-05-modal-header\\01-molekyler-20-modalelementer-05-modal-header.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "molekyler-modal-navbar",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-10-modal-navbar\\01-molekyler-20-modalelementer-10-modal-navbar.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "molekyler-modal-body-header",
"lineagePath": "../../patterns/01-molekyler-20-modalelementer-15-modal-body-header\\01-molekyler-20-modalelementer-15-modal-body-header.html",
"lineageState": "inprogress altinn altinnett"
}, {
"lineagePattern": "atomer-seksjonstittel",
"lineagePath": "../../patterns/00-atomer-07-tekst-10-seksjonstittel\\00-atomer-07-tekst-10-seksjonstittel.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "atomer-intro-tekst",
"lineagePath": "../../patterns/00-atomer-07-tekst-02-intro-tekst\\00-atomer-07-tekst-02-intro-tekst.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": "organismer-skjema-innehaver",
"lineagePath": "../../patterns/02-organismer-20-forms-10-skjema-innehaver\\02-organismer-20-forms-10-skjema-innehaver.html",
"lineageState": "archived 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"
}, {
"lineagePattern": "atomer-laster-inn",
"lineagePath": "../../patterns/00-atomer-09-bilder-og-media-07-laster-inn\\00-atomer-09-bilder-og-media-07-laster-inn.html",
"lineageState": "specification altinn"
}, {
"lineagePattern": "atomer-avsnitt",
"lineagePath": "../../patterns/00-atomer-07-tekst-03-avsnitt\\00-atomer-07-tekst-03-avsnitt.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-skjema-radio",
"lineagePath": "../../patterns/02-organismer-20-forms-50-skjema-radio\\02-organismer-20-forms-50-skjema-radio.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-beskrivelse",
"lineagePath": "../../patterns/02-organismer-20-forms-60-skjema-beskrivelse\\02-organismer-20-forms-60-skjema-beskrivelse.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-adresse",
"lineagePath": "../../patterns/02-organismer-20-forms-30-skjema-adresse\\02-organismer-20-forms-30-skjema-adresse.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "organismer-skjema-dato",
"lineagePath": "../../patterns/02-organismer-20-forms-40-skjema-dato\\02-organismer-20-forms-40-skjema-dato.html",
"lineageState": "archived altinn"
}, {
"lineagePattern": "atomer-liste-unummerert-kuler",
"lineagePath": "../../patterns/00-atomer-08-lister-11-liste-unummerert-kuler\\00-atomer-08-lister-11-liste-unummerert-kuler.html",
"lineageState": "complete altinn altinnett"
}, {
"lineagePattern": "organismer-chat",
"lineagePath": "../../patterns/02-organismer-30-seksjoner-28-chat\\02-organismer-30-seksjoner-28-chat.html",
"lineageState": "archived altinn"
}],
"patternLineageRExists": false,
"patternLineagesR": [],
"lineageR": [],
"patternLineageEExists": true,
"patternDesc": "<p>Brukes i tilfeller der brukeren skal gjennom en prosess for å utføre endringer innefor et område. Modalvinduet kan bestå av flere steg. Når prosessen er fullført vises grønn bakgrunn i modalvinduet. Dersom prosessen mislykkes, vises rød bakgrunn i modalvinduet. Modalvinduet kan også brukes for å vise mer informasjon om et tema.</p>\n",
"patternBreadcrumb": {
"patternType": "organismer",
"patternSubtype": "Modal-innhold"
},
"patternExtension": "mustache",
"patternName": "Starte Enk",
"patternPartial": "organismer-starte-enk",
"patternState": "archived",
"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>