Lunds universitet - Style Guide

Search Filter: all 

<div class="modal fade" id="search-filter" tabindex="-1" role="dialog" aria-labelledby="search-filter-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-0 rounded">
            <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
                <div id="search-filter-label" class="d-flex justify-content-between">
                    <h3 class=" m-0">Filtrera</h3>

                </div>
                <a href="#" class="d-block">Nollställ filter</a>
                <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
                    <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                </button>
            </nav>
            <div class="p-3">
                <form action="" class="form">
                    <fieldset class="mb-3">
                        <legend>Filtyp</legend>
                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-1-modal" name="checkbox" value="value" checked>
                                <label class="form-check-label" for="filter1-1-modal">Webbsidor (117472)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-2-modal" name="checkbox" value="value" checked>
                                <label class="form-check-label" for="filter1-2-modal">PDF (17233)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-3-modal" name="checkbox" value="value" checked>
                                <label class="form-check-label" for="filter1-3-modal">Word (17371)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-4-modal" name="checkbox" value="value">
                                <label class="form-check-label" for="filter1-4-modal">PowerPoint (483)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-5-modal" name="checkbox" value="value">
                                <label class="form-check-label" for="filter1-5-modal">Excel (305)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-6-modal" name="checkbox" value="value">
                                <label class="form-check-label" for="filter1-6-modal">Text (235)</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="filter1-7-modal" name="checkbox" value="value">
                                <label class="form-check-label" for="filter1-7-modal">RTF (6)</label>
                            </div>
                        </div>

                    </fieldset>
                    <div class="mt-3 text-center">
                        <input type="submit" class="btn btn-primary" value="Tillämpa">

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="d-lg-none text-center mb-5">
    <button class="btn btn-primary" data-bs-target="#search-filter" data-bs-toggle="modal" aria-controls="search-filter" aria-expanded="false" aria-label="Visa filter"> Fler filter</button>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
    <div class="row mb-3">
        <div class="col">
            <h4 class="mt-0">Filtrera</h4>
        </div>
        <div class="col text-end">
            <a href="#">Nollställ filter</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <fieldset>
                <legend>Filtyp</legend>
                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-1" name="checkbox" value="value" checked>
                        <label class="form-check-label" for="filter1-1">Webbsidor (117472)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-2" name="checkbox" value="value" checked>
                        <label class="form-check-label" for="filter1-2">PDF (17233)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-3" name="checkbox" value="value" checked>
                        <label class="form-check-label" for="filter1-3">Word (17371)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-4" name="checkbox" value="value">
                        <label class="form-check-label" for="filter1-4">PowerPoint (483)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-5" name="checkbox" value="value">
                        <label class="form-check-label" for="filter1-5">Excel (305)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-6" name="checkbox" value="value">
                        <label class="form-check-label" for="filter1-6">Text (235)</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="filter1-7" name="checkbox" value="value">
                        <label class="form-check-label" for="filter1-7">RTF (6)</label>
                    </div>
                </div>

            </fieldset>
        </div>
    </div>
</div>
 
<div class="modal fade" id="{{modal-id}}" tabindex="-1" role="dialog" aria-labelledby="{{modal-id}}-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content border-0 rounded">
      <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
        <div id="{{modal-id}}-label" class="d-flex justify-content-between">
          <h3 class=" m-0">{{title}}</h3>

        </div>
        <a href="#" class="d-block">Nollställ filter</a>
        <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
          <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
        </button>
      </nav>
      <div class="p-3">
        <form action="" class="form">
          {{#each modal-filters}}
            <fieldset class="mb-3">
              <legend>{{title}}</legend>
              {{#if checkbox}}
                {{#each checkbox.items}}
                  {{render "@form-checkbox--spaced" this merge=true}}
                {{/each}}
              {{/if}}
              {{#if radio}}
                {{#each radio.items}}
                  {{render "@form-radio--spaced" this merge=true}}
                {{/each}}
              {{/if}}
            {{#if select}}
              {{render "@form-select" select merge=true}}
            {{/if}}
            </fieldset>
          {{/each}}
          <div class="mt-3 text-center">
            {{render "@form-submit" modal-submit merge=true}}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="d-lg-none text-center mb-5">
  <button class="btn btn-primary" data-bs-target="#{{modal-id}}" data-bs-toggle="modal" aria-controls="{{modal-id}}" aria-expanded="false"
     aria-label="Visa filter"> Fler filter</button>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
  <div class="row mb-3">
    <div class="col">
      <h4 class="mt-0">{{title}}</h4>
    </div>
    <div class="col text-end">
      <a href="#">Nollställ filter</a>
    </div>
  </div>
  <div class="row">
    {{#each filters}}
      <div class="col-12{{#unless @last}} mb-5{{/unless}}">
        <fieldset>
          <legend>{{title}}</legend>
          {{#if checkbox}}
            {{#each checkbox.items}}
              {{render "@form-checkbox--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if radio}}
            {{#each radio.items}}
              {{render "@form-radio--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if select}}
            {{render "@form-select--tight" select merge=true}}
          {{/if}}
        </fieldset>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "modal-id": "search-filter",
  "title": "Filtrera",
  "modal-submit": {
    "label": "Tillämpa"
  },
  "filters": [
    {
      "title": "Filtyp",
      "checkbox": {
        "items": [
          {
            "label": "Webbsidor (117472)",
            "id": "filter1-1",
            "checked": true
          },
          {
            "label": "PDF (17233)",
            "id": "filter1-2",
            "checked": true
          },
          {
            "label": "Word (17371)",
            "id": "filter1-3",
            "checked": true
          },
          {
            "label": "PowerPoint (483)",
            "id": "filter1-4"
          },
          {
            "label": "Excel (305)",
            "id": "filter1-5"
          },
          {
            "label": "Text (235)",
            "id": "filter1-6"
          },
          {
            "label": "RTF (6)",
            "id": "filter1-7"
          }
        ]
      }
    }
  ],
  "modal-filters": [
    {
      "title": "Filtyp",
      "checkbox": {
        "items": [
          {
            "label": "Webbsidor (117472)",
            "id": "filter1-1-modal",
            "checked": true
          },
          {
            "label": "PDF (17233)",
            "id": "filter1-2-modal",
            "checked": true
          },
          {
            "label": "Word (17371)",
            "id": "filter1-3-modal",
            "checked": true
          },
          {
            "label": "PowerPoint (483)",
            "id": "filter1-4-modal"
          },
          {
            "label": "Excel (305)",
            "id": "filter1-5-modal"
          },
          {
            "label": "Text (235)",
            "id": "filter1-6-modal"
          },
          {
            "label": "RTF (6)",
            "id": "filter1-7-modal"
          }
        ]
      }
    }
  ]
}

No notes defined.