<form class="repairs-form repairs-form--step-1">
    <div class="repairs-form__items">

        <div class="repairs-form__item-group">
            <div class="form-step">
                <span class="form-step__step-number form-step__step-number--present">1</span>
                <h4 class="form-step__title">Select Your Style</h4>
            </div>

            <p class="paragraph">Please start by providing some information below regarding the <strong>Non-Prescription Sunglasses</strong> you need to repair.</p>

            <div class="repairs-autocomplete">
                <div class="search-standalone js-search-standalone u-page-width-max-gutters">

                    <form class="search-standalone-form">
                        <label for="" class="label">Type in your style number or name</label>

                        <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="">
                        <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Clear</span>
      <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </button>
                    </form>
                </div>

                <div class="repairs-autocomplete__results js-repairs-autocomplete-results">
                    <div class="repairs-autocomplete__product">
                        <ul class="repairs-autocomplete__product-list">
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">202-02</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">B202-2M</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">H202-10</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">H202-2M</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">H202-70</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">HT202-71</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">H202-2M-2</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">H202-70-2</span>
                                </div>
                            </li>
                            <li class="repairs-autocomplete__variant" href="#">
                                <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                                <div class="repairs-autocomplete__variant-info">
                                    <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                    <span class="repairs-autocomplete__variant-id">HT202-71-2</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <button class="button button--plain-text js-modal-open-link js-modal-style-number-help button--style-number-help" data-modal-id="style-number-help">Your style number is the first 3 numbers (&#x27;266&#x27; instead of &#x27;MJ-266&#x27; or &#x27;Maui 266&#x27;) on the right temple of your sunglasses. Do not include MJ or any letters before the style number. Click here to find your style number.</button>

            <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>
                <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/H711-18_front?$config1800$&amp;wid&#x3D;169" alt="KOHALA thumbnail" class="style-search-results__image">
                        </div>
                        <div class="style-search-results__details">
                            <span class="style-search-results__name">KOHALA</span>
                            <span class="style-search-results__style-number">H711-18</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/H706-16C_front?$config1800$&amp;wid&#x3D;169" alt="STILLWATER thumbnail" class="style-search-results__image">
                        </div>
                        <div class="style-search-results__details">
                            <span class="style-search-results__name">STILLWATER</span>
                            <span class="style-search-results__style-number">H706-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/H712-18_front?$config1800$&amp;wid&#x3D;169" alt="PANIOLO thumbnail" class="style-search-results__image">
                        </div>
                        <div class="style-search-results__details">
                            <span class="style-search-results__name">PANIOLO</span>
                            <span class="style-search-results__style-number">H712-18</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/R420-04T_front?$config1800$&amp;wid&#x3D;169" alt="KEANAE thumbnail" class="style-search-results__image">
                        </div>
                        <div class="style-search-results__details">
                            <span class="style-search-results__name">KEANAE</span>
                            <span class="style-search-results__style-number">R420-04T</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/R740-02MB_front?$config1800$&amp;wid&#x3D;169" alt="TAIL SLIDE thumbnail" class="style-search-results__image">
                        </div>
                        <div class="style-search-results__details">
                            <span class="style-search-results__name">TAIL SLIDE</span>
                            <span class="style-search-results__style-number">R740-02MB</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="form-step">
                <span class="form-step__step-number form-step__step-number--future">2</span>
                <h4 class="form-step__title">Select Your Repair Package</h4>
            </div>

        </div>
    </div>
</form>
<form class="repairs-form{{#if formStep}} repairs-form--{{formStep}}{{/if}}">
  <div class="repairs-form__items">
    {{#each formItemGroups}}
    {{#if groupTitle}}<h4 class="repairs-form__item-group-title">{{groupTitle}}</h4>{{/if}}
    <div class="repairs-form__item-group{{#if modifier}} repairs-form__item-group--{{modifier}}{{/if}}">
      {{#each formItems}}
      {{#if component}}
      {{render (dynamicComponent component) this}}
      {{/if}}
      {{#if cards}}
      <div class="repairs-cards">
        {{#each cards}}
        {{render '@repairs-card' this merge=true}}
        {{/each}}
      </div>
      {{/if}}
      {{/each}}
    </div>
    {{/each}}
    {{#if actions}}
    <div class="repairs-form__actions js-repairs-form-actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
    {{/if}}
    {{#if footerText}}
    <span class="repairs-form__footer-text">{{footerText}}</span>
    {{/if}}
  </div>
</form>
{
  "formStep": "step-1",
  "formItemGroups": [
    {
      "formItems": [
        {
          "component": "form-step",
          "stepNumber": "1",
          "stepStatus": "present",
          "title": "Select Your Style"
        },
        {
          "component": "paragraph",
          "classes": true,
          "value": "Please start by providing some information below regarding the <strong>Non-Prescription Sunglasses</strong> you need to repair."
        },
        {
          "component": "repairs-autocomplete",
          "components": [
            {
              "component": "search-standalone",
              "title": null,
              "placeholder": null,
              "label": "Type in your style number or name"
            }
          ],
          "products": [
            {
              "name": "PEAHI",
              "summary": "Polarized men's classic sunglasses",
              "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
              "category": "Wrap",
              "rating": [
                "star-full",
                "star-full",
                "star-full",
                "star-half",
                "star-empty"
              ],
              "vip": null,
              "tax": "Inkl. MWST",
              "variants": [
                {
                  "id": "202-02",
                  "name": "Gloss Black",
                  "color": "#000",
                  "orderMonth": "12",
                  "orderYear": "2017",
                  "locationCategory": "Online Retailer",
                  "purchaseLocation": "Dicks.com",
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": true,
                  "price": "$149.00",
                  "salePrice": "$229.00",
                  "url": "#202-02",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "Neutral Grey",
                  "lensId": "neutralgrey",
                  "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "202-02",
                    "inactive": null,
                    "material": "superthin"
                  }
                },
                {
                  "id": "B202-2M",
                  "name": "Matte Black",
                  "color": "#000",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$189.00",
                  "salePrice": "$219.00",
                  "url": "#B202-2M",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "Blue Hawaii",
                  "lensId": "bluehawaii",
                  "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "B202-2M",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "H202-10",
                  "name": "Dark Tortoise",
                  "color": "#303032",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#H202-10",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "HCL® Bronze",
                  "lensId": "hclbronze",
                  "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "H202-10",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "H202-2M",
                  "name": "Matte Black",
                  "color": "#000",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#H202-2M",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "HCL® Bronze",
                  "lensId": "hclbronze",
                  "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "H202-2M",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "H202-70",
                  "name": "Redfish",
                  "color": "#7d4a07",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#H202-70",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "HCL® Bronze",
                  "lensId": "hclbronze",
                  "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "H202-70",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "HT202-71",
                  "name": "MahiMahi",
                  "color": "#218b16",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#HT202-71",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "Maui HT™",
                  "lensId": "mauiht",
                  "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                  "lensMaterial": "MauiPure",
                  "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                  "lensDetailData": {
                    "product": "HT202-71",
                    "inactive": true,
                    "material": "mauipure"
                  }
                },
                {
                  "id": "H202-2M-2",
                  "name": "Matte Black",
                  "color": "#000",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#H202-2M-2",
                  "status": null,
                  "stock": "Out of Stock",
                  "lens": "HCL® Bronze",
                  "lensId": "hclbronze",
                  "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "H202-2M-2",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "H202-70-2",
                  "name": "Redfish",
                  "color": "#7d4a07",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#H202-70-2",
                  "status": "New",
                  "stock": "In Stock",
                  "lens": "HCL® Bronze",
                  "lensId": "hclbronze",
                  "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                  "lensMaterial": "SuperThin Glass",
                  "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                  "lensDetailData": {
                    "product": "H202-70-2",
                    "inactive": true,
                    "material": "superthin"
                  }
                },
                {
                  "id": "HT202-71-2",
                  "name": "MahiMahi",
                  "color": "#218b16",
                  "orderMonth": null,
                  "orderYear": null,
                  "locationCategory": null,
                  "purchaseLocation": null,
                  "images": {
                    "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                    "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                    "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                  },
                  "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                  "swatchImage": null,
                  "active": null,
                  "price": "$229.00",
                  "salePrice": null,
                  "url": "#HT202-71-2",
                  "status": null,
                  "stock": "In Stock",
                  "lens": "Maui HT™",
                  "lensId": "mauiht",
                  "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                  "lensMaterial": "MauiPure",
                  "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                  "lensDetailData": {
                    "product": "HT202-71-2",
                    "inactive": true,
                    "material": "mauipure"
                  }
                }
              ],
              "callToAction": null,
              "mauijim": true,
              "zeal": null,
              "excludeVariants": null,
              "mymaui": "true",
              "prescription": null
            }
          ]
        },
        {
          "component": "buttons",
          "classes": [
            "js-modal-style-number-help",
            "button--style-number-help"
          ],
          "buttonValue": "Your style number is the first 3 numbers ('266' instead of 'MJ-266' or 'Maui 266') on the right temple of your sunglasses. Do not include MJ or any letters before the style number. Click here to find your style number.",
          "buttonModal": "style-number-help",
          "modifier": "plain-text"
        },
        {
          "component": "style-search-results",
          "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"
            },
            {
              "freeItems": null,
              "name": "KOHALA",
              "image": {
                "alt": "KOHALA thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": null,
              "style": "H711-18"
            },
            {
              "freeItems": null,
              "name": "STILLWATER",
              "image": {
                "alt": "STILLWATER thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": null,
              "style": "H706-16C"
            },
            {
              "freeItems": null,
              "name": "PANIOLO",
              "image": {
                "alt": "PANIOLO thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/H712-18_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": null,
              "style": "H712-18"
            },
            {
              "freeItems": null,
              "name": "KEANAE",
              "image": {
                "alt": "KEANAE thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/R420-04T_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": null,
              "style": "R420-04T"
            },
            {
              "freeItems": null,
              "name": "TAIL SLIDE",
              "image": {
                "alt": "TAIL SLIDE thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/R740-02MB_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": null,
              "style": "R740-02MB"
            }
          ],
          "more": true
        },
        {
          "component": "form-step",
          "stepNumber": "2",
          "stepStatus": "future",
          "title": "Select Your Repair Package"
        }
      ]
    }
  ],
  "actions": [],
  "pageModals": [
    {
      "component": "form-modal--style-number-help"
    }
  ]
}
  • Content:
    .repairs-form {
      @include clearfix;
      margin: 0 auto;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      .error {
        margin: 35px 10px 0;
      }
    
      .form-step + .paragraph {
        margin-top: 20px;
      }
    
      .repairs-autocomplete + .button {
        max-width: 444px;
        margin-top: 5px;
        padding: 0;
        color: $color-primary;
        font-size: 1.4rem;
        line-height: 2.0rem;
        text-align: left;
        white-space: normal;
        overflow: visible;
    
        @include breakpoint($breakpoint-sm-only) {
          max-width: 100%;
        }
      }
    
      .search-standalone {
        margin-bottom: 0;
      }
    
      .paragraph {
        margin: 30px 0;
      }
    
      .label {
        margin-bottom: 5px;
        color: $color-darkest;
      }
    
      .style-search-results {
        margin: 30px 0 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results {
          margin-top: 60px;
        }
    
        .style-search-results--cart {
          margin: 10px 0;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
    
        .form-step + .paragraph {
          margin-top: 25px;
        }
    
        .button {
          font-size: 1.4rem;
        }
      }
    
      .button--style-number-assistance {
        max-width: none;
        min-height: 80px;
        margin: 25px 0 55px;
        padding: 10px 10px 10px 85px;
        background: transparent url('../images/sunglasses-maui-jim.png') no-repeat 12px center;
        background-size: 60px;
        color: $color-dark;
        font-size: 1.6rem;
        letter-spacing: 1px;
        line-height: 1.9rem;
        text-align: left;
        white-space: normal;
    
        &:hover {
          box-shadow: 0 0 40px 0 rgba(0, 0, 0, .20);
        }
    
        @include breakpoint($breakpoint-md) {
          width: 340px;
          margin: 25px 0 55px;
          padding-left: 120px;
          background-position: 15px center;
          background-size: 90px;
        }
    
        @include breakpoint($breakpoint-xl) {
          width: 100%;
          margin: 50px 0 70px;
          padding: 20px 20px 20px 170px;
          background-position: 25px;
          background-size: 120px;
          font-size: 2.4rem;
          line-height: 2.8rem;
        }
      }
    }
    
    .repairs-form__items {
      @include breakpoint($breakpoint-md) {
        margin-left: 40px;
    
        .form-step {
          position: relative;
          left: -40px;
          width: calc(100% + 40px);
        }
      }
    }
    
    .repairs-form__item-group {
      @include clearfix;
    
      .paragraph {
        &:first-child {
          margin-top: 0;
          text-align: center;
        }
      }
    
      .list {
        &:last-child {
          margin-bottom: 15px;
        }
      }
    }
    
    .repairs-cards {
      display: flex;
      flex-direction: column;
      margin-top: $gutter-width;
      margin-bottom: 0;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2rem;
    
      @include breakpoint($breakpoint-md) {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
      }
    }
    
    .repairs-form__footer-text {
      display: block;
      margin-top: 40px;
      float: left;
      color: $color-medium-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-left: $gutter-width-half;
        float: left;
      }
    }
    
    .repairs-form--welcome {
      .paragraph,
      .list {
        margin: 30px 0;
        letter-spacing: 0;
      }
    
      .list {
        padding-left: 15px;
      }
    
      .button {
        display: block;
        margin: 0 auto $gutter-width;
      }
    
      .repairs-form__items {
        margin-left: 0;
      }
    
      .repairs-form__item-group {
        padding-left: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        .paragraph,
        .list {
          margin: 60px 0;
    
          &:last-child {
            margin-bottom: 15px;
          }
        }
    
        .button {
          float: left;
    
          &:first-child {
            margin: 0 $gutter-width 0 0;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          width: 300px;
        }
      }
    }
    
    .repairs-form--step-1 {
      .style-search-results--cart {
        margin-left: 0;
    
        .style-search-results__result {
          display: flex;
        }
    
        .style-search-results__image-wrapper {
          position: static;
          max-width: 85px;
        }
    
        .style-search-results__name {
          margin-top: 0;
          font-weight: normal;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results--cart {
          .style-search-results__image-wrapper {
            top: 0;
            left: 0;
            max-width: 113px;
          }
        }
    
        .form-item--button-input {
          max-width: 445px;
    
          & + .paragraph {
            max-width: 340px;
          }
        }
    
        .button-input__input {
          width: calc(100% - 105px);
        }
    
        .button-input__submit {
          width: 105px;
        }
    
        .button-input__submit-label {
          display: inline;
        }
    
        .repairs-form__actions {
          float: right;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .style-search-results--cart {
          .style-search-results__image-wrapper {
            max-width: 169px;
            margin-right: $gutter-width / 2;
          }
    
          .style-search-results__name {
            font-size: 2.4rem;
            line-height: 2.8rem;
          }
        }
      }
    }
    
    .repairs-form--step-2 {
      .style-search-results {
        margin-top: 15px;
      }
    
      .repairs-form__actions {
        margin-top: 30px;
    
        .button {
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results {
          margin-top: 0;
          margin-bottom: 40px;
          margin-left: 55px;
        }
    
        .repairs-form__actions {
          padding: 0 10px;
    
          .button {
            width: auto;
            padding-right: $gutter-width;
            padding-left: $gutter-width;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .style-search-results {
          margin-top: 0;
          margin-bottom: 55px;
          margin-left: 35px;
        }
      }
    }
    
    .repairs-form--cart {
      .repairs-form__item-group {
        border-bottom: 1px solid $color-medium-dark;
      }
    
      .style-search-results {
        margin-bottom: 20px;
        @include breakpoint($breakpoint-md) {
          margin-left: 190px;
        }
      }
    
      .repairs-form__actions {
        @include breakpoint($breakpoint-md) {
          text-align: right;
        }
      }
    }
    
    .repairs-form__header {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        height: 40px;
        background: $color-lighter;
        font-size: 1.4rem;
        line-height: 40px;
      }
    }
    
    .repairs-form__header--items {
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 340px);
        padding-left: 190px;
        font-weight: bold;
      }
    }
    
    .repairs-form__header--price {
      @include breakpoint($breakpoint-md) {
        width: 150px;
        float: right;
        font-weight: bold;
      }
    }
    
    .repairs-form__repairs {
      @include breakpoint($breakpoint-md) {
        margin-left: 190px;
      }
    }
    
    .repairs-form__repair {
      position: relative;
      padding: 20px 0 10px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      &:first-child {
        border-top: 1px solid $color-light;
      }
    
      &:last-child {
        border-bottom-style: none;
      }
    
      .list--ul {
        margin: 0 0 25px;
        padding-left: 15px;
      }
    
      @include breakpoint($breakpoint-md) {
        min-height: 80px;
    
        .list--ul {
          margin-bottom: 5px;
        }
      }
    }
    
    .repairs-form__repair-type {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        font-weight: normal;
        line-height: 2.8rem;
      }
    }
    
    .repairs-form__item-info {
      textarea {
        font-family: $font-primary;
        resize: vertical;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        margin-left: 190px;
    
        .form-item--select {
          max-width: 150px;
          margin: 0 $gutter-width $gutter-width 0;
        }
    
        .form-item--textarea {
          position: absolute;
          top: 0;
          right: 0;
          width: calc(100% - 170px);
          margin-top: 0;
        }
    
        textarea {
          min-height: 145px;
          resize: none;
        }
      }
    }
    
    .repairs-form__repair-price {
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 20px;
        right: 0;
        min-width: 150px;
      }
    }
    
    .repairs-form__standard-price-wrapper {
      @include breakpoint($breakpoint-md) {
        min-width: 150px;
      }
    }
    
    .repairs-form__repair-price,
    .repairs-form__standard-price {
      color: $color-medium-dark;
      font-size: 2.7rem;
      line-height: 3.2rem;
    }
    
    .repairs-form__repair-tax,
    .repairs-form__standard-tax {
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .repairs-form__repair-tax {
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 50px;
        right: 0;
        width: 150px;
      }
    }
    
    .repairs-form__standard-tax {
      display: block;
    
      @include breakpoint($breakpoint-md) {
        line-height: 1.4rem;
      }
    }
    
    .repairs-form__repair-actions {
      position: absolute;
      right: 0;
      bottom: -3px;
    
      @include breakpoint($breakpoint-md) {
        bottom: 0;
        width: 150px;
      }
    }
    
    .repairs-form__repair-delete-button {
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    }
    
    .repairs-form__standard {
      padding: 25px 0 10px;
    
      .icon {
        display: block;
        width: 64px;
        height: 64px;
        margin: 0 auto;
    
        @include breakpoint($breakpoint-md) {
          width: 36px;
          height: 36px;
          margin: 0 77px;
        }
      }
    
      .block__heading {
        margin-top: 25px;
        margin-bottom: 0;
        color: $color-dark;
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: normal;
        line-height: 1.9rem;
    
        @include breakpoint($breakpoint-md) {
          margin: 0;
        }
      }
    
      .block--repairs-form {
        @include breakpoint($breakpoint-md) {
          // Width is (100% - (width of icon + width of price)).
          width: calc(100% - 320px);
          margin-right: $gutter-width;
        }
      }
    
      .paragraph {
        margin: 0 0 10px;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    
    
      .repairs-form__standard-price {
        @include breakpoint($breakpoint-md) {
          min-width: 150px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        align-items: center;
      }
    }
    
    .repairs-form__add-repair,
    .repairs-form__checkout {
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        margin: 0 auto;
      }
    }
    
    .repairs-form__add-repair {
      max-width: 100%;
      background: transparent;
    }
    
    .repairs-form__line-items {
      padding: 0;
    
      @include breakpoint($breakpoint-md) {
        width: 300px;
        margin: 0 0 30px;
        float: right;
      }
    }
    
    .repairs-form__line-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0;
      padding: 0;
      list-style-type: none;
    
      &:last-child {
        margin-top: 15px;
      }
    
      & > span {
        min-width: 30%;
      }
    
      [class$='value'] {
        text-align: right;
      }
    }
    
    .repairs-form__tbd-label {
      margin-top: 8px;
      color: $color-medium-dark;
    }
    
    .repairs-form__total-label,
    .repairs-form__total-value {
      font-weight: bold;
    }
    
    .repairs-form__summary {
      position: relative;
      margin-bottom: 30px;
      padding: $gutter-width ($gutter-width / 2) ($gutter-width / 2);
      background: $color-lighter;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      .paragraph {
        margin-bottom: 0;
        clear: both;
        color: $color-error;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        padding: 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        padding-right: 50px;
        padding-left: 50px;
      }
    }
    
    .repairs-form__summary-actions {
      @include breakpoint($breakpoint-md) {
        max-width: calc(100% - 310px);
        float: left;
      }
    }
    
    .repairs-form__checkout {
      @include breakpoint($breakpoint-md) {
        width: 300px;
      }
    
      @include breakpoint($breakpoint-xl) {
        position: static;
        width: auto;
        padding: 0 20px;
        float: right;
      }
    }
    
  • URL: /components/raw/repairs/repairs.scss
  • Filesystem Path: src/components/01-elements/forms/repairs/repairs.scss
  • Size: 11.4 KB

There are no notes for this item.