Internetstiftelsen Styleguide

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">
					{{#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
        }
      ]
    }
  ]
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/functions' as func;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.organism(filter) {
	@include bem.e(title) {
		padding: 0 0 0 func.rhythm(3);
	}

	@include bem.e(column) {
		margin-bottom: func.rhythm(4);

		@include breakpoint.bp-up(lg) {
			margin-bottom: 0;
		}
	}

	@include bem.e(clear) {
		position: absolute;
		top: -#{func.to_rem(50px)};
		right: func.rhythm(3);
	}
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: src/organisms/filter/_filter.scss
  • Size: 575 Bytes

No notes defined.