<a href="#" class="vgr-quick-search__item">
    <p class="vgr-quick-search__headline">Title <span class="vgr-quick-search__id" title="VGR-id">VGR-id</span></p>
    <ul class="vgr-quick-search__inline-list">
        <li class="vgr-quick-search__inline-list-item">
            <svg class="vgr-autocomplete__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">X</span>

        </li>
        <li class="vgr-quick-search__inline-list-item">
            <svg class="vgr-autocomplete__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">X</span>

        </li>
        <li class="vgr-quick-search__inline-list-item">
            <svg class="vgr-autocomplete__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">X</span>

        </li>
    </ul>
</a>
<a href="{{ url }}" class="vgr-quick-search__item">
  <p class="vgr-quick-search__headline">{{ headline }} <span class="vgr-quick-search__id" title="{{ vgrid }}">{{ vgridResult }}</span></p>
  <ul class="vgr-quick-search__inline-list">
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-bestallar-id" %}
      {% if multipleBestallarid %}
        <strong>{{ multipleBestallaridText }} {{ bestallarid }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ bestallarid }}:</span> <span title="{{ bestallarid }}">{{ bestallaridResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-ansvarsnummer" %}
        {% if multipleAnsvarsnummer %}
        <strong>{{ multipleAnsvarsnummerText }} {{ ansvarsnummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ ansvarsnummer }}:</span> <span title="{{ ansvarsnummer }}">{{ ansvarsnummerResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-i-nummer" %}
      {% if multipleInummer %}
        <strong>{{ multipleInummerText }} {{ inummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ inummer }}</span> <span title="{{ inummer }}">{{ inummerResult }}</span>
      {% endif %}
    </li>
  </ul>
</a>
{
  "headline": "Title",
  "url": "#",
  "photo": "http://via.placeholder.com/48x48",
  "multipleBestallaridText": "Flera",
  "multipleAnsvarsnummerText": "Flera",
  "multipleInummerText": "Flera",
  "vgrid": "VGR-id",
  "bestallarid": "Beställar-id",
  "ansvarsnummer": "Ansvarsnummer",
  "inummer": "I-nummer",
  "vgridResult": "VGR-id",
  "bestallaridResult": "X",
  "ansvarsnummerResult": "X",
  "inummerResult": "X"
}
  • Content:
    .vgr-quick-search {
    
      $link-color: $theme-color;
    
      &__item {
        padding: 1rem;
        display: block;
        text-decoration: none;
        border-bottom: 1px solid #E6E6E6;
    
        @at-root {
          a#{&} {
            color: $text-color;
    
            .vgr-quick-search__headline {
              color: $link-color;
            }
    
            &:hover,
            &:focus {
              background: $link-color;
              color: #fff;
    
              .vgr-quick-search__headline,
              mark {
                color: #fff;
              }
            }
          }
        }
      }
    
      &__headline {
        margin: 0;
        font-size: .875rem;
      }
    
      &__id {
        &:before {
          content: "(";
        }
        &:after {
          content: ")";
        }
      }
    
      &__inline-list {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: .8125rem;
      }
    
      &__inline-list-item {
        display: inline-block;
        margin-right: .625rem;
        white-space: nowrap;
      }
    
      &__inline-list-icon {
        vertical-align: text-bottom;
      }
    
      &__inline-list-title {
        display: none;
    
        @media screen and (min-width: $small) {
          display: inline;
        }
      }
    }
    
    // Aligned
    .vgr-quick-search__item--aligned {
      .vgr-quick-search__inline-list {
        display: flex;
        flex-wrap: wrap;
      }
    
      .vgr-quick-search__inline-list-item {
        flex: 1 0 auto;
      }
    }
    
    
    // Photo
    .vgr-quick-search__item--photo {
      display: flex;
    }
    
    .vgr-quick-search__item-img {
      margin-right: .5rem;
      display: none;
      border-radius: .25rem;
      overflow: hidden;
      width: 3rem;
      height: 3rem;
    
      @media screen and (min-width: $small) {
        display: block;
      }
    }
    
  • URL: /components/raw/quick-search-item/_quick-search-item.scss
  • Filesystem Path: components/components/search/quick-search-item/_quick-search-item.scss
  • Size: 1.5 KB

There are no notes for this item.