Stilguiden VGR

Search Block with Quick Search 

<div class="vgr-block vgr-block__search">
    <div class="vgr-block__container">
        <div class="vgr-block__header">
            <h2 class="vgr-block__header-heading">
                <svg width="17" height="18" viewBox="0 0 17 18" xmlns="http://www.w3.org/2000/svg">
  <path d="M6.843 0c3.338 0 6.044 2.91 6.044 6.5 0 1.61-.55 3.09-1.45 4.23l.25.27h.735l4.65 5-1.395 1.5-4.65-5v-.79l-.25-.27C9.717 12.41 8.34 13 6.842 13 3.505 13 .8 10.09.8 6.5S3.504 0 6.842 0zm0 2C4.518 2 2.66 4 2.66 6.5S4.517 11 6.842 11s4.184-2 4.184-4.5S9.166 2 6.843 2z" fill="#494746"/>
</svg> Sök
            </h2>
        </div>
        <div class="vgr-block__content">
            <form action="/" method="POST" class="vgr-block__search-form" data-module="quicksearch">
                <label class="vgr-block__search-label" for="q">Etikett</label>
                <div class="vgr-block__search-box">
                    <input class="vgr-block__search-input" type="search" id="q" value="" data-url="/temp/autosuggest.json?q=">
                    <button class="vgr-button vgr-button--primary vgr-block__search-button">Sök</button>
                </div>
                <div data-id="template" hidden>
                    <div class="vgr-quick-search__item">
                        <p class="vgr-quick-search__headline">
                            #headline#
                            <span class="vgr-quick-search__id" title="VGR-id">#vgrid#</span>
                        </p>
                        <ul class="vgr-quick-search__inline-list">
                            <li class="vgr-quick-search__inline-list-item">
                                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">  <g fill="none" fill-rule="evenodd"><circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/><path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>  </g></svg>
                                <span class="vgr-quick-search__inline-list-title">Beställar-id:</span>
                                <span title="Beställar-id">#bNumber#</span>
                            </li>
                            <li class="vgr-quick-search__inline-list-item">
                                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">  <g fill="none" fill-rule="evenodd"><circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/><path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>  </g></svg>
                                <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span>
                                <span title="Ansvarsnummer">#aNumber#</span>
                            </li>
                            <li class="vgr-quick-search__inline-list-item">
                                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">  <g fill="none" fill-rule="evenodd"><circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/><path fill="#FFF" d="M7 3v9h2V3"/>  </g></svg>
                                <span class="vgr-quick-search__inline-list-title">I-nummer</span>
                                <span title="I-nummer">#iNumber#</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
 
<div class="vgr-block vgr-block__search">
  <div class="vgr-block__container">
    <div class="vgr-block__header">
      <h2 class="vgr-block__header-heading">
        {% render "@icon-search" %}
        {{ title }}
      </h2>
    </div>
    <div class="vgr-block__content">
      <form action="/" method="POST" class="vgr-block__search-form"  data-module="quicksearch">
        <label class="vgr-block__search-label" for="q">{{ label }}</label>
        <div class="vgr-block__search-box">
          <input class="vgr-block__search-input" type="search" id="q" value="" data-url="/temp/autosuggest.json?q=">
          <button class="vgr-button vgr-button--primary vgr-block__search-button">{{ button }}</button>
        </div>
        <div data-id="template" hidden>
          <div class="vgr-quick-search__item">
            <p class="vgr-quick-search__headline">
              #headline#
              <span class="vgr-quick-search__id" title="VGR-id">#vgrid#</span>
            </p>
            <ul class="vgr-quick-search__inline-list">
              <li class="vgr-quick-search__inline-list-item">
                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">  <g fill="none" fill-rule="evenodd"><circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/><path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>  </g></svg>
                <span class="vgr-quick-search__inline-list-title">Beställar-id:</span>
                <span title="Beställar-id">#bNumber#</span>
              </li>
              <li class="vgr-quick-search__inline-list-item">
                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">  <g fill="none" fill-rule="evenodd"><circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/><path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>  </g></svg>
                <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span>
                <span title="Ansvarsnummer">#aNumber#</span>
              </li>
              <li class="vgr-quick-search__inline-list-item">
                <svg class="vgr-quick-search__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">  <g fill="none" fill-rule="evenodd"><circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/><path fill="#FFF" d="M7 3v9h2V3"/>  </g></svg>
                <span class="vgr-quick-search__inline-list-title">I-nummer</span>
                <span title="I-nummer">#iNumber#</span>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
 
{
  "title": "Sök",
  "label": "Etikett",
  "button": "Sök"
}
  • Content: 
    .vgr-block__search {
  width: 100%;

  &-form {
    padding: 1.5rem 1rem;
  }

  &-label {
    display: block;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 700;
  }

  &-box {
    display: flex;
  }

  &-input {
    width: 100%;
    padding: .25rem .5rem;
    border: 1px solid #CCC;
    border-radius: 3px;
    font-size: 1rem;
    transition: all .1s linear;

    &:focus {
      border-color: transparent;
      border-radius: 3px;
      box-shadow: 0 0 0 3px #125D9D;
      outline: none;
    }
  }

  &-button {
    font-size: 1rem;
  }
}
  • URL: /components/raw/search-block/_search-block.scss
  • Filesystem Path: components/components/search/search-block/_search-block.scss
  • Size: 563 Bytes

Test using eve or 366