<div class="o-filter">
<div class="js-o-accordion o-accordion o-accordion--transparent">
<h3 class="o-filter__title js-accordion__header o-accordion__header--no-border o-accordion__header--inline">
Filtrera
</h3>
<div class="js-accordion__panel o-accordion__panel--ash u-border-radius">
<div class="o-accordion__panel__content">
<div class="row">
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">Innehållstyp</legend>
<div class="checkbox">
<input type="checkbox" id="film" name="" value="0" class="a-checkbox u-visuallyhidden">
<label for="film">Film</label>
</div>
<div class="checkbox">
<input type="checkbox" id="rapport" name="" value="1" class="a-checkbox u-visuallyhidden">
<label for="rapport">Rapport</label>
</div>
<div class="checkbox">
<input type="checkbox" id="internetguider" name="" value="2" class="a-checkbox u-visuallyhidden">
<label for="internetguider">Internetguider</label>
</div>
</fieldset>
</div>
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">Ämne</legend>
<div class="checkbox">
<input type="checkbox" id="barnhack" name="" value="3" class="a-checkbox u-visuallyhidden">
<label for="barnhack">Barnhack</label>
</div>
<div class="checkbox">
<input type="checkbox" id="domämnnamn" name="" value="4" class="a-checkbox u-visuallyhidden">
<label for="domämnnamn">Domämnnamn</label>
</div>
<div class="checkbox">
<input type="checkbox" id="it-säkerhet" name="" value="5" class="a-checkbox u-visuallyhidden">
<label for="it-säkerhet">IT-säkerhet</label>
</div>
<div class="checkbox">
<input type="checkbox" id="statistik" name="" value="6" class="a-checkbox u-visuallyhidden">
<label for="statistik">Statistik</label>
</div>
<div class="checkbox">
<input type="checkbox" id="dns" name="" value="7" class="a-checkbox u-visuallyhidden">
<label for="dns">DNS</label>
</div>
<div class="checkbox">
<input type="checkbox" id="integritet" name="" value="8" class="a-checkbox u-visuallyhidden">
<label for="integritet">Integritet</label>
</div>
<div class="checkbox">
<input type="checkbox" id="skola" name="" value="9" class="a-checkbox u-visuallyhidden">
<label for="skola">Skola</label>
</div>
</fieldset>
</div>
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">För vem?</legend>
<div class="checkbox">
<input type="checkbox" id="barn och unga" name="" value="10" class="a-checkbox u-visuallyhidden">
<label for="barn och unga">Barn coh unga</label>
</div>
<div class="checkbox">
<input type="checkbox" id="företagare" name="" value="11" class="a-checkbox u-visuallyhidden">
<label for="företagare">Företagare</label>
</div>
<div class="checkbox">
<input type="checkbox" id="pedagoger" name="" value="12" class="a-checkbox u-visuallyhidden">
<label for="pedagoger">Pedagoger</label>
</div>
<div class="checkbox">
<input type="checkbox" id="föräldrar" name="" value="13" class="a-checkbox u-visuallyhidden">
<label for="föräldrar">Föräldrar</label>
</div>
<div class="checkbox">
<input type="checkbox" id="journalister" name="" value="14" class="a-checkbox u-visuallyhidden">
<label for="journalister">Journalister</label>
</div>
<div class="checkbox">
<input type="checkbox" id="privatpersoner" name="" value="15" class="a-checkbox u-visuallyhidden">
<label for="privatpersoner">Privatpersoner</label>
</div>
</fieldset>
</div>
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">Avsändare</legend>
<div class="checkbox">
<input type="checkbox" id="iis" name="" value="16" class="a-checkbox u-visuallyhidden">
<label for="iis">IIS</label>
</div>
<div class="checkbox">
<input type="checkbox" id="pts" name="" value="17" class="a-checkbox u-visuallyhidden">
<label for="pts">PTS</label>
</div>
<div class="checkbox">
<input type="checkbox" id="scb" name="" value="18" class="a-checkbox u-visuallyhidden">
<label for="scb">SCB</label>
</div>
<div class="checkbox">
<input type="checkbox" id="statens medieråd" name="" value="19" class="a-checkbox u-visuallyhidden">
<label for="statens medieråd">Statens medieråd</label>
</div>
</fieldset>
</div>
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">Arkiv</legend>
<div class="checkbox">
<input type="checkbox" id="visa arkiverat material" name="" value="20" class="a-checkbox u-visuallyhidden">
<label for="visa arkiverat material">Visa arkiverat material</label>
</div>
</fieldset>
</div>
</div>
<button type="button" class="a-button a-button--ruby-light small o-filter__clear">
<span class="a-button__text">Rensa</span>
</button>
</div>
</div>
</div>
</div>
<div class="o-filter">
<div class="js-o-accordion o-accordion o-accordion--transparent">
<h3 class="o-filter__title js-accordion__header o-accordion__header--no-border o-accordion__header--inline"{{#if is_expanded}} data-accordion-opened="true"{{/if}}>
{{heading}}
</h3>
<div class="js-accordion__panel o-accordion__panel--ash u-border-radius">
<div class="o-accordion__panel__content">
<div class="row">
{{#each columns}}
{{#unless textSearch}}
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
<fieldset class="field-group">
<legend class="label-legend">{{title}}</legend>
{{#each checkboxes}}
<div class="checkbox{{#if is_inline}} checkbox--inline row no-gutters{{/if}}">
{{#if is_inline}}
<div class="grid-auto">
{{/if}}
<input type="checkbox" id="{{id}}" name="{{name}}" value="{{value}}" class="a-checkbox u-visuallyhidden" {{#if is_disabled}}disabled{{/if}}>
<label for="{{id}}">{{checkboxLabel}}</label>
{{#if is_inline}}
</div>
{{/if}}
</div>
{{/each}}
</fieldset>
</div>
{{/unless}}
{{#if textSearch}}
<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
{{> '@input' placeholder="Söktext" name="search" label="Fritextsök"}}
</div>
{{/if}}
{{/each}}
</div>
{{> @button el="button" button_type="button" modifiers="ruby-light small" text="Rensa" additional_classes="o-filter__clear"}}
</div>
</div>
</div>
</div>
{
"heading": "Filtrera",
"is_expanded": false,
"columns": [
{
"title": "Innehållstyp",
"checkboxes": [
{
"id": "film",
"checkboxLabel": "Film",
"value": "0",
"is_inline": false,
"is_disabled": false
},
{
"id": "rapport",
"checkboxLabel": "Rapport",
"value": "1",
"is_inline": false,
"is_disabled": false
},
{
"id": "internetguider",
"checkboxLabel": "Internetguider",
"value": "2",
"is_inline": false,
"is_disabled": false
}
]
},
{
"title": "Ämne",
"checkboxes": [
{
"id": "barnhack",
"checkboxLabel": "Barnhack",
"value": "3",
"is_inline": false,
"is_disabled": false
},
{
"id": "domämnnamn",
"checkboxLabel": "Domämnnamn",
"value": "4",
"is_inline": false,
"is_disabled": false
},
{
"id": "it-säkerhet",
"checkboxLabel": "IT-säkerhet",
"value": "5",
"is_inline": false,
"is_disabled": false
},
{
"id": "statistik",
"checkboxLabel": "Statistik",
"value": "6",
"is_inline": false,
"is_disabled": false
},
{
"id": "dns",
"checkboxLabel": "DNS",
"value": "7",
"is_inline": false,
"is_disabled": false
},
{
"id": "integritet",
"checkboxLabel": "Integritet",
"value": "8",
"is_inline": false,
"is_disabled": false
},
{
"id": "skola",
"checkboxLabel": "Skola",
"value": "9",
"is_inline": false,
"is_disabled": false
}
]
},
{
"title": "För vem?",
"checkboxes": [
{
"id": "barn och unga",
"checkboxLabel": "Barn coh unga",
"value": "10",
"is_inline": false,
"is_disabled": false
},
{
"id": "företagare",
"checkboxLabel": "Företagare",
"value": "11",
"is_inline": false,
"is_disabled": false
},
{
"id": "pedagoger",
"checkboxLabel": "Pedagoger",
"value": "12",
"is_inline": false,
"is_disabled": false
},
{
"id": "föräldrar",
"checkboxLabel": "Föräldrar",
"value": "13",
"is_inline": false,
"is_disabled": false
},
{
"id": "journalister",
"checkboxLabel": "Journalister",
"value": "14",
"is_inline": false,
"is_disabled": false
},
{
"id": "privatpersoner",
"checkboxLabel": "Privatpersoner",
"value": "15",
"is_inline": false,
"is_disabled": false
}
]
},
{
"title": "Avsändare",
"checkboxes": [
{
"id": "iis",
"checkboxLabel": "IIS",
"value": "16",
"is_inline": false,
"is_disabled": false
},
{
"id": "pts",
"checkboxLabel": "PTS",
"value": "17",
"is_inline": false,
"is_disabled": false
},
{
"id": "scb",
"checkboxLabel": "SCB",
"value": "18",
"is_inline": false,
"is_disabled": false
},
{
"id": "statens medieråd",
"checkboxLabel": "Statens medieråd",
"value": "19",
"is_inline": false,
"is_disabled": false
}
]
},
{
"title": "Arkiv",
"checkboxes": [
{
"id": "visa arkiverat material",
"checkboxLabel": "Visa arkiverat material",
"value": "20",
"is_inline": false,
"is_disabled": false
}
]
}
]
}
@charset 'UTF-8';
@include organism(filter) {
@include e(title) {
padding: 0 0 0 rhythm(3);
}
@include e(column) {
margin-bottom: rhythm(4);
@include bp-up(lg) {
margin-bottom: 0;
}
}
@include e(clear) {
position: absolute;
top: -#{rem(50px)};
right: rhythm(3);
}
}
No notes defined.