<div class="zip-geolocate__results">
    <div class="zip-geolocate__result">
        <div class="zip-geolocate-result__summary zip-geolocate-result__details">
            <span class="zip-geolocate-result__name">Dean Optical LTD</span>
            <span class="zip-geolocate-result__distance">26.4 mi</span>
        </div>
        <span class="zip-geolocate-result__address zip-geolocate-result__details">209 S La Salle St, Lbby 120, Chicago, USA-IL, 60604-1436, United States</span>
        <span class="zip-geolocate-result__type zip-geolocate-result__details">Prescription Retailer</span>
        <div class="zip-geolocate__actions">
            <button class="button button--primary zip-geolocate__action zip-geolocate__action-reserve">Reserve Now</button>

        </div>
    </div>
</div>
<div class="zip-geolocate__results{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}">
  {{#if resultsFound}}
  <p class="paragraph reserve-in-store__results-found">
    <span class="reserve-in-store__results-found--results"></span> results for ZIP code <span class="reserve-in-store__results-found--zip"></span>
  </p>
  {{/if}}
  {{#each stores}}
  <div class="zip-geolocate__result">
    {{#if detailsLink}}
    <span class="zip-geolocate-result__back-link">
      {{render '@icons--arrow-left'}}
      Back
    </span>
    {{/if}}
    <div class="zip-geolocate-result__summary zip-geolocate-result__details">
      <span class="zip-geolocate-result__name">{{name}}</span>
      <span class="zip-geolocate-result__distance">{{distance}}</span>
    </div>
    <span class="zip-geolocate-result__address zip-geolocate-result__details">{{address}}</span>
    <span class="zip-geolocate-result__type zip-geolocate-result__details">{{type}}</span>
    {{#if detailsLink}}
    <a href="{{url}}" class="zip-geolocate-result__details-link">
      {{render '@icons--arrow-right'}}
    </a>
    {{/if}}
    <div class="zip-geolocate__actions">
      {{#each actions}}
      {{render (dynamicComponent 'buttons') this}}
      {{/each}}
    </div>
  </div>
  {{/each}}
</div>
{
  "stores": [
    {
      "url": "#",
      "name": "Dean Optical LTD",
      "address": "209 S La Salle St, Lbby 120, Chicago, USA-IL, 60604-1436, United States",
      "type": "Prescription Retailer",
      "distance": "26.4 mi",
      "actions": [
        {
          "modifier": "primary",
          "buttonValue": "Reserve Now",
          "type": "button",
          "classes": [
            "zip-geolocate__action",
            "zip-geolocate__action-reserve"
          ]
        }
      ]
    }
  ]
}
  • Content:
    .zip-geolocate__result {
      @include clearfix;
      display: block;
      padding: 13px $gutter-width-half 0;
      border-top: 1px solid $color-light;
      color: $color-medium-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-decoration: none;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 $gutter-width-half;
        padding: 15px 0 $gutter-width;
      }
    
      &:first-of-type {
        border-top: 0;
      }
    }
    
    .zip-geolocate-result__summary {
      display: flex;
      justify-content: space-between;
    }
    
    .zip-geolocate-result__name,
    .zip-geolocate-result__address,
    .zip-geolocate-result__type,
    .zip-geolocate-result__distance {
      display: block;
    }
    
    .zip-geolocate-result__address {
      margin-bottom: 10px;
    }
    
    .block--request-store-details {
      .zip-geolocate__result {
        margin: 0;
      }
    
      .zip-geolocate-result__details {
        @include breakpoint($breakpoint-md) {
          margin-top: 0;
          margin-bottom: 5px;
        }
      }
    }
    
    .zip-geolocate-result__name {
      margin-bottom: 10px;
      color: $color-darkest;
      font-weight: bold;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 5px;
      }
    }
    
    .zip-geolocate-result__details-link {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 100%;
    
      * {
        pointer-events: none;
      }
    
      .icon {
        position: absolute;
        top: 50%;
        margin-top: -5px;
        padding-left: 35px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .zip-geolocate-result__back-link {
      display: none;
      margin-bottom: 37px;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
      text-transform: uppercase;
      cursor: pointer;
    
      * {
        pointer-events: none;
      }
    
      .icon {
        padding-right: $gutter-width / 2;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .zip-geolocate-result__type {
      margin-top: 10px;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 0 10px;
      }
    }
    
    .zip-geolocate__action {
      width: auto;
      padding-right: 0;
      padding-left: 0;
      float: right;
      clear: both;
      color: $color-primary;
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
    
      &,
      &:hover,
      &:active {
        background: transparent;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 0 10px;
        color: $color-white;
        line-height: 3.0rem;
    
        &,
        &:hover,
        &:active {
          background: $color-primary;
        }
      }
    }
    
  • URL: /components/raw/zip-geolocate-result/zip-geolocate-result.scss
  • Filesystem Path: src/components/01-elements/search/zip-geolocate-result/zip-geolocate-result.scss
  • Size: 2.4 KB

There are no notes for this item.