Filter

<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">
					<div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
						<fieldset class="field-group">
							<legend class="label-legend">Innehållstyp</legend>
							{{#each checkboxes1}}
								<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}}">{{label}}</label>
									{{#if is_inline}}
									</div>
									{{/if}}
								</div>
							{{/each}}
						</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>
							{{#each checkboxes2}}
								<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}}">{{label}}</label>
									{{#if is_inline}}
									</div>
									{{/if}}
								</div>
							{{/each}}
						</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>
							{{#each checkboxes3}}
								<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}}">{{label}}</label>
									{{#if is_inline}}
									</div>
									{{/if}}
								</div>
							{{/each}}
						</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>
							{{#each checkboxes4}}
								<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}}">{{label}}</label>
									{{#if is_inline}}
									</div>
									{{/if}}
								</div>
							{{/each}}
						</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>
							{{#each checkboxes5}}
								<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}}">{{label}}</label>
									{{#if is_inline}}
									</div>
									{{/if}}
								</div>
							{{/each}}
						</fieldset>
					</div>
				</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,
  "checkboxes1": [
    {
      "id": "film",
      "label": "Film",
      "value": "0",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "rapport",
      "label": "Rapport",
      "value": "1",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "internetguider",
      "label": "Internetguider",
      "value": "2",
      "is_inline": false,
      "is_disabled": false
    }
  ],
  "checkboxes2": [
    {
      "id": "barnhack",
      "label": "Barnhack",
      "value": "3",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "domämnnamn",
      "label": "Domämnnamn",
      "value": "4",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "it-säkerhet",
      "label": "IT-säkerhet",
      "value": "5",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "statistik",
      "label": "Statistik",
      "value": "6",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "dns",
      "label": "DNS",
      "value": "7",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "integritet",
      "label": "Integritet",
      "value": "8",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "skola",
      "label": "Skola",
      "value": "9",
      "is_inline": false,
      "is_disabled": false
    }
  ],
  "checkboxes3": [
    {
      "id": "barn och unga",
      "label": "Barn coh unga",
      "value": "10",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "företagare",
      "label": "Företagare",
      "value": "11",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "pedagoger",
      "label": "Pedagoger",
      "value": "12",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "föräldrar",
      "label": "Föräldrar",
      "value": "13",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "journalister",
      "label": "Journalister",
      "value": "14",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "privatpersoner",
      "label": "Privatpersoner",
      "value": "15",
      "is_inline": false,
      "is_disabled": false
    }
  ],
  "checkboxes4": [
    {
      "id": "iis",
      "label": "IIS",
      "value": "16",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "pts",
      "label": "PTS",
      "value": "17",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "scb",
      "label": "SCB",
      "value": "18",
      "is_inline": false,
      "is_disabled": false
    },
    {
      "id": "statens medieråd",
      "label": "Statens medieråd",
      "value": "19",
      "is_inline": false,
      "is_disabled": false
    }
  ],
  "checkboxes5": [
    {
      "id": "visa arkiverat material",
      "label": "Visa arkiverat material",
      "value": "20",
      "is_inline": false,
      "is_disabled": false
    }
  ]
}
  • Content:
    @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);
    	}
    }
    
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: src/organisms/filter/_filter.scss
  • Size: 293 Bytes

No notes defined.