<div class="search-autocomplete-result">
    <a class="search-autocomplete-result__link" href="#">
    <span class="search-autocomplete-result__image-container">
      <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
        srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
    </span>
    <span class="search-autocomplete-result__title">Red Sands</span>
  </a>
</div>
<div class="search-autocomplete-result">
  <a class="search-autocomplete-result__link" href="{{this.path}}">
    <span class="search-autocomplete-result__image-container">
      <img class="search-autocomplete-result__image" src="{{image.medium.path}}" sizes="(min-width: 681px) {{image.medium.vw}}vw, {{image.small.vw}}vw"
        srcset="{{image.small.path}} {{image.small.width}}w, {{image.medium.path}} {{image.medium.width}}w">
    </span>
    <span class="search-autocomplete-result__title">{{title}}</span>
  </a>
</div>
{
  "path": "#",
  "title": "Red Sands",
  "image": {
    "small": {
      "path": "/assets/images/search-autocomplete-small.jpg",
      "width": "75",
      "vw": "25"
    },
    "medium": {
      "path": "/assets/images/search-autocomplete-medium.jpg",
      "width": "340",
      "vw": "50"
    }
  }
}
  • Content:
    .search-autocomplete-result {
      @include breakpoint($breakpoint-sm-only) {
        @include clearfix;
        height: 50px;
        border-bottom: 1px solid $color-light;
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 15px;
        text-align: center;
      }
    }
    
    .search-autocomplete-result__link {
      display: block;
      color: $color-dark;
      text-decoration: none;
    
      &:focus {
        outline: none;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    
      @include breakpoint($breakpoint-md) {
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, .25);
        }
      }
    }
    
    .search-autocomplete-result__image-container {
      @include breakpoint($breakpoint-sm-only) {
        width: 100px;
      }
    }
    
    .search-autocomplete-result__image {
      display: block;
      height: auto;
      margin: 5px auto;
      vertical-align: middle;
    
      @include breakpoint($breakpoint-sm-only) {
        width: auto;
        max-width: 100px;
        height: 40px;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 340px;
        margin: 0 auto;
      }
    }
    
    .search-autocomplete-result__title {
      display: inline-block;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 2px;
      text-transform: uppercase;
      vertical-align: middle;
    
      @include breakpoint($breakpoint-sm-only) {
        max-width: calc(100% - 110px);
        margin-left: 10px;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    }
    
  • URL: /components/raw/search-autocomplete-result/search-autocomplete-result.scss
  • Filesystem Path: src/components/01-elements/search/search-autocomplete-result/search-autocomplete-result.scss
  • Size: 1.5 KB

There are no notes for this item.