<div class="style-search-results style-search-results--list">
    <a class="style-search-results__result-link" href="#">
        <div class="style-search-results__result">
            <div class="style-search-results__image-wrapper">
                <img src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;169" alt="PEAHI thumbnail" class="style-search-results__image">
            </div>
            <div class="style-search-results__details">
                <span class="style-search-results__name">PEAHI</span>
                <span class="style-search-results__style-number">202-02</span>
            </div>
            <div class="style-search-results__result-actions">
                <button class="button button--primary">Select</button>
                <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
            </div>
        </div>
    </a>
    <a class="style-search-results__result-link" href="#">
        <div class="style-search-results__result">
            <div class="style-search-results__image-wrapper">
                <img src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;169" alt="WATERWAYS thumbnail" class="style-search-results__image">
            </div>
            <div class="style-search-results__details">
                <span class="style-search-results__name">WATERWAYS</span>
                <span class="style-search-results__style-number">HTS267-15C</span>
            </div>
            <div class="style-search-results__result-actions">
                <button class="button button--primary">Select</button>
                <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
            </div>
        </div>
    </a>
    <a class="style-search-results__result-link" href="#">
        <div class="style-search-results__result">
            <div class="style-search-results__image-wrapper">
                <img src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;169" alt="KAWIKA thumbnail" class="style-search-results__image">
            </div>
            <div class="style-search-results__details">
                <span class="style-search-results__name">KAWIKA</span>
                <span class="style-search-results__style-number">H257-16C</span>
            </div>
            <div class="style-search-results__result-actions">
                <button class="button button--primary">Select</button>
                <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
            </div>
        </div>
    </a>
    <a class="style-search-results__result-link" href="#">
        <div class="style-search-results__result">
            <div class="style-search-results__image-wrapper">
                <img src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;169" alt="VOYAGER thumbnail" class="style-search-results__image">
            </div>
            <div class="style-search-results__details">
                <span class="style-search-results__name">VOYAGER</span>
                <span class="style-search-results__style-number">H178-10</span>
            </div>
            <div class="style-search-results__result-actions">
                <button class="button button--primary">Select</button>
                <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
            </div>
        </div>
    </a>
    <a class="style-search-results__result-link" href="#">
        <div class="style-search-results__result">
            <div class="style-search-results__image-wrapper">
                <img src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;169" alt="LEIA thumbnail" class="style-search-results__image">
            </div>
            <div class="style-search-results__details">
                <span class="style-search-results__name">LEIA</span>
                <span class="style-search-results__style-number">RS708-26D</span>
            </div>
            <div class="style-search-results__result-actions">
                <button class="button button--primary">Select</button>
                <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
            </div>
        </div>
    </a>
    <div class="style-search-results__results-actions">
        <button class="button button--outlined">Show All (13)</button>
    </div>
</div>
<div class="style-search-results style-search-results--{{_self.name}}">
  {{#each results}}
  {{#unless selected}}<a class="style-search-results__result-link" href="{{link}}">{{/unless}}
    <div class="style-search-results__result">
      <div class="style-search-results__image-wrapper">
        <img src="{{productImage this.image.path this.image.width}}" alt="{{this.image.alt}}" class="style-search-results__image">
      </div>
      <div class="style-search-results__details">
        {{#if selected}}
        {{#if lensType}}<span class="style-search-results__lens-type">{{lensType}}</span>{{/if}}
        {{/if}}
        <span class="style-search-results__name">{{this.name}}</span>
        <span class="style-search-results__style-number">{{this.style}}</span>
      </div>
      {{#unless selected}}
      <div class="style-search-results__result-actions">
        {{> '@buttons' modifier='primary' buttonValue='Select'}}
        <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          {{render '@icons--check-circle'}}
        </button>
      </div>
      {{/unless}}
    </div>
  {{#unless selected}}</a>{{/unless}}
  {{/each}}
  {{#unless selected}}
  {{#if more}}
  <div class="style-search-results__results-actions">
    {{> '@buttons' modifier='outlined' buttonValue='Show All (13)'}}
  </div>
  {{/if}}
  {{/unless}}
</div>
{
  "results": [
    {
      "freeItems": null,
      "name": "PEAHI",
      "image": {
        "alt": "PEAHI thumbnail",
        "path": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
        "width": "169"
      },
      "lensType": "Non-prescription Sunglasses",
      "link": "#",
      "repairType": null,
      "selected": null,
      "style": "202-02"
    },
    {
      "freeItems": null,
      "name": "WATERWAYS",
      "image": {
        "alt": "WATERWAYS thumbnail",
        "path": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
        "width": "169"
      },
      "lensType": "Non-prescription Sunglasses",
      "link": "#",
      "repairType": null,
      "selected": null,
      "style": "HTS267-15C"
    },
    {
      "freeItems": null,
      "name": "KAWIKA",
      "image": {
        "alt": "KAWIKA thumbnail",
        "path": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
        "width": "169"
      },
      "lensType": "Non-prescription Sunglasses",
      "link": "#",
      "repairType": null,
      "selected": null,
      "style": "H257-16C"
    },
    {
      "freeItems": null,
      "name": "VOYAGER",
      "image": {
        "alt": "VOYAGER thumbnail",
        "path": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
        "width": "169"
      },
      "lensType": "Non-prescription Sunglasses",
      "link": "#",
      "repairType": null,
      "selected": null,
      "style": "H178-10"
    },
    {
      "freeItems": null,
      "name": "LEIA",
      "image": {
        "alt": "LEIA thumbnail",
        "path": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$",
        "width": "169"
      },
      "lensType": "Non-prescription Sunglasses",
      "link": "#",
      "repairType": null,
      "selected": null,
      "style": "RS708-26D"
    }
  ],
  "more": true
}
  • Content:
    .style-search-results {
      .icon--check-circle {
        fill: $color-primary;
      }
    }
    
    .style-search-results__result {
      display: flex;
      align-items: center;
      justify-content: space-between;
    
      @include breakpoint($breakpoint-md) {
        padding-top: 15px;
        padding-bottom: 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-top: 6px;
        padding-bottom: 6px;
      }
    }
    
    .style-search-results__result-link {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      color: $color-darkest;
      text-decoration: none;
    
      &:focus {
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 5px;
    
        &:hover {
          position: relative;
          box-shadow: 0 0 40px 0 rgba(0, 0, 0, .20);
          z-index: 1;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
      }
    }
    
    .style-search-results__image-wrapper {
      max-width: 85px;
    
      @include breakpoint($breakpoint-md) {
        max-width: 113px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 169px;
      }
    }
    
    .style-search-results__details {
      width: calc(100% - (85px + 50px));
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - (113px + 110px));
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(100% - (190px + 110px));
      }
    }
    
    .style-search-results__name,
    .style-search-results__style-number {
      display: block;
    }
    
    .style-search-results__lens-type {
      color: $color-medium-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-medium;
      line-height: 1.5rem;
    }
    
    .style-search-results__name {
      font-size: 1.6rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .style-search-results__style-number {
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .style-search-results__result-actions {
      padding-right: 10px;
    
      .button--primary {
        display: none;
      }
    
      @include breakpoint($breakpoint-md) {
        .button--primary {
          display: inline;
          height: 30px;
          line-height: 30px;
        }
    
        .button--plain-text {
          display: none;
        }
      }
    }
    
    .style-search-results__results-actions {
      margin-top: 30px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 45px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 35px;
      }
    }
    
    .style-search-results--selected {
      .style-search-results-result {
        margin-bottom: 10px;
    
        @include breakpoint($breakpoint-md) {
          margin-bottom: 5px;
        }
    
        @include breakpoint($breakpoint-xl) {
          margin-bottom: 0;
        }
      }
    
      .style-search-results__details {
        width: calc(100% - (85px));
        line-height: 1.9rem;
    
        @include breakpoint($breakpoint-md) {
          width: calc(100% - (113px));
        }
    
        @include breakpoint($breakpoint-xl) {
          width: calc(100% - (190px));
        }
      }
    }
    
    .style-search-results--cart {
      .style-search-results__result {
        display: block;
        position: relative;
      }
    
      .style-search-results__details {
        width: 100%;
      }
    
      .style-search-results__image-wrapper {
        max-width: none;
        text-align: center;
      }
    
      .style-search-results__lens-type {
        color: $color-medium-dark;
        font-size: 1.6rem;
        line-height: 1.9rem;
      }
    
      .style-search-results__name {
        margin-top: 5px;
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.9rem;
      }
    
      .style-search-results__style-number {
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results__lens-type {
          font-size: 1.2rem;
          line-height: 1.5rem;
        }
    
        .style-search-results__name {
          font-weight: bold;
        }
    
        .style-search-results__result {
          position: relative;
        }
    
        .style-search-results__image-wrapper {
          position: absolute;
          top: 20px;
          left: -190px;
          max-width: 169px;
        }
      }
    }
    
  • URL: /components/raw/style-search-results/style-search-results.scss
  • Filesystem Path: src/components/01-elements/search/style-search-results/style-search-results.scss
  • Size: 3.8 KB

There are no notes for this item.