<div class="product-compare js-product-compare">
    <div class="product-compare__header js-product-compare-toggle">
        <h3 class="product-compare__title">Compare Products</h3>
        <p class="product-compare__amount">
            (<span class="js-product-compare-count">3</span> of <span class="js-product-compare-total">4</span>)
        </p>
        <button class="product-compare__toggle">
      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

    </button>
    </div>
    <div class="product-compare__body js-product-compare-body" data-position="1">
        <div class="product-compare__body-inner js-swipe">
            <form>
                <button class="product-compare__remove-all js-product-compare-remove-all">Remove All</button>
            </form>
            <button class="product-compare__control js-product-compare-control" data-direction="prev">
        <span class="u-visually-hidden">Previous</span>
        <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      </button>
            <button class="product-compare__control js-product-compare-control" data-direction="next">
        <span class="u-visually-hidden">Next</span>
        <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

      </button>
            <table class="product-compare__products">
                <tr class="product-compare__products-row">
                    <td class="product-compare__products-cell product-compare__products-cell--blank">&nbsp;</td>
                    <td class="product-compare__products-cell">
                        <ul class="rating">
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-empty">
                                <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                            </li>
                        </ul>

                        <img class="product-compare__product-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;268">
                        <h3 class="product-compare__product-name">PEAHI</h3>
                        <span class="product-compare__product-price">$149.00</span>
                        <span class="product-compare__product-tax">Inkl. MWST</span>
                        <span class="product-compare__product-inventory">In Stock</span>
                        <form>
                            <button class="product-compare__cart-button button button--primary">Add to Cart</button>
                        </form>
                        <form>
                            <button class="product-compare__remove-button">Remove</button>
                        </form>
                    </td>
                    <td class="product-compare__products-cell">
                        <ul class="rating">
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-full">
                                <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                            </li>
                            <li class="rating__star rating__star--star-empty">
                                <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                            </li>
                        </ul>

                        <img class="product-compare__product-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;268">
                        <h3 class="product-compare__product-name">WATERWAYS</h3>
                        <span class="product-compare__product-price">$219.00</span>
                        <span class="product-compare__product-tax">Inkl. MWST</span>
                        <span class="product-compare__product-inventory">In Stock</span>
                        <form>
                            <button class="product-compare__cart-button button button--primary">Add to Cart</button>
                        </form>
                        <form>
                            <button class="product-compare__remove-button">Remove</button>
                        </form>
                    </td>
                    <td class="product-compare__products-cell">
                        <img class="product-compare__product-image" src="/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg">
                        <h3 class="product-compare__product-name">MJM025511</h3>
                        <form>
                            <button class="product-compare__optician-button button button--outlined">
                <span class="product-compare__optician-short">Find Optician</span>
                <span class="product-compare__optician-long">Find an Optician</span>
              </button>
                        </form>
                        <form>
                            <button class="product-compare__remove-button">Remove</button>
                        </form>
                    </td>
                    <td class="product-compare__products-cell product-compare__products-cell--empty">
                        <img class="product-compare__product-image" src="/assets/images/compare-empty-product.jpg">
                        <form>
                            <button class="product-compare__product-add-button">
                Add Another Style
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                        </form>
                    </td>
                </tr>
            </table>
            <div class="product-compare__table-wrapper">
                <table class="product-compare__table">
                    <tr class="product-compare__table-category">
                        <td class="product-compare__table-category-label" colspan="5">Available in</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Prescription
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">Yes</td>
                        <td class="product-compare__table-data-cell">Yes</td>
                        <td class="product-compare__table-data-cell">Only</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Readers
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">No</td>
                        <td class="product-compare__table-data-cell">No</td>
                        <td class="product-compare__table-data-cell">-</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-category">
                        <td class="product-compare__table-category-label" colspan="5">Dimensions</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                <img class="product-compare__table-data-label-image" alt="Eye Width" src="/assets/images/compare-eye-width.jpg">
                Eye Width
              </span>
                        </td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">49.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">48.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">51.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                <img class="product-compare__table-data-label-image" alt="Eye Height" src="/assets/images/compare-eye-height.jpg">
                Eye Height
              </span>
                        </td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">42.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">40.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">44.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                <img class="product-compare__table-data-label-image" alt="Bridge" src="/assets/images/compare-bridge.jpg">
                Bridge
              </span>
                        </td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">22.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">22.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">17.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                <img class="product-compare__table-data-label-image" alt="Temple" src="/assets/images/compare-temple.jpg">
                Temple
              </span>
                        </td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">140.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">138.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">135.0 / 140.0 / 150.0</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                <img class="product-compare__table-data-label-image" alt="Base Curve" src="/assets/images/compare-base-curve.jpg">
                Base Curve
              </span>
                        </td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">6</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">6</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">30.5</td>
                        <td class="product-compare__table-data-cell product-compare__table-data-cell--image">-</td>
                    </tr>
                    <tr class="product-compare__table-category">
                        <td class="product-compare__table-category-label" colspan="5">Color(s) Available</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Frame
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">Blue with Rootbeer</td>
                        <td class="product-compare__table-data-cell">Matte Tortoise</td>
                        <td class="product-compare__table-data-cell">-</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Lens
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">Neutral Grey</td>
                        <td class="product-compare__table-data-cell">HCL®Bronze</td>
                        <td class="product-compare__table-data-cell">-</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-category">
                        <td class="product-compare__table-category-label" colspan="5">Material</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Frame
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">Plastics</td>
                        <td class="product-compare__table-data-cell">Plastics</td>
                        <td class="product-compare__table-data-cell">Rimless Beta Titanium 3 Piece Mount</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Lens
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">SuperThin Glass</td>
                        <td class="product-compare__table-data-cell">SuperThin Glass</td>
                        <td class="product-compare__table-data-cell">-</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                    <tr class="product-compare__table-category">
                        <td class="product-compare__table-category-label" colspan="5">Fit</td>
                    </tr>
                    <tr class="product-compare__table-data">
                        <td class="product-compare__table-data-label">
                            <span class="product-compare__table-data-label-inner">
                Head Size
              </span>
                        </td>
                        <td class="product-compare__table-data-cell">Small</td>
                        <td class="product-compare__table-data-cell">Small</td>
                        <td class="product-compare__table-data-cell">Medium</td>
                        <td class="product-compare__table-data-cell">-</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="product-compare js-product-compare">
  <div class="product-compare__header js-product-compare-toggle">
    <h3 class="product-compare__title">{{title}}</h3>
    <p class="product-compare__amount">
      (<span class="js-product-compare-count">{{count}}</span> of <span class="js-product-compare-total">{{total}}</span>)
    </p>
    <button class="product-compare__toggle">
      {{render '@icons--arrow-up'}}
      {{render '@icons--arrow-down'}}
    </button>
  </div>
  <div class="product-compare__body js-product-compare-body" data-position="1">
    <div class="product-compare__body-inner js-swipe">
      <form>
        <button class="product-compare__remove-all js-product-compare-remove-all">{{removeLabel}}</button>
      </form>
      <button class="product-compare__control js-product-compare-control" data-direction="prev">
        <span class="u-visually-hidden">Previous</span>
        {{render '@icons--arrow-left'}}
      </button>
      <button class="product-compare__control js-product-compare-control" data-direction="next">
        <span class="u-visually-hidden">Next</span>
        {{render '@icons--arrow-right'}}
      </button>
      <table class="product-compare__products">
        <tr class="product-compare__products-row">
          <td class="product-compare__products-cell product-compare__products-cell--blank">&nbsp;</td>
          {{#each products}}
          <td class="product-compare__products-cell">
            {{#unless excludeRating}}
            {{render '@rating'}}
            {{/unless}}
            <img class="product-compare__product-image" src="{{productImage variants.0.images.front 268}}">
            <h3 class="product-compare__product-name">{{name}}</h3>
            {{#unless excludePrice}}
            <span class="product-compare__product-price">{{variants.0.price}}</span>
            {{/unless}}
            {{#if tax}}
            <span class="product-compare__product-tax">{{tax}}</span>
            {{/if}}
            {{#unless excludeInventory}}
            <span class="product-compare__product-inventory">{{variants.0.stock}}</span>
            {{/unless}}
            <form>
              {{#if optician}}
              <button class="product-compare__optician-button button button--outlined">
                <span class="product-compare__optician-short">Find Optician</span>
                <span class="product-compare__optician-long">Find an Optician</span>
              </button>
              {{else}}
              <button class="product-compare__cart-button button button--primary">Add to Cart</button>
              {{/if}}
            </form>
            <form>
              <button class="product-compare__remove-button">Remove</button>
            </form>
          </td>
          {{/each}}
          <td class="product-compare__products-cell product-compare__products-cell--empty">
            <img class="product-compare__product-image" src="/assets/images/compare-empty-product.jpg">
            <form>
              <button class="product-compare__product-add-button">
                Add Another Style
                {{render '@icons--arrow-right'}}
              </button>
            </form>
          </td>
        </tr>
      </table>
      <div class="product-compare__table-wrapper">
        <table class="product-compare__table">
          {{#each table}}
          <tr class="product-compare__table-category">
            <td class="product-compare__table-category-label" colspan="5">{{label}}</td>
          </tr>
          {{#each rows}}
          <tr class="product-compare__table-data">
            <td class="product-compare__table-data-label">
              <span class="product-compare__table-data-label-inner">
                {{#if image}}
                <img class="product-compare__table-data-label-image" alt="{{label}}" src="{{image}}">
                {{/if}}
                {{label}}
              </span>
            </td>
            {{#each cells}}
            <td class="product-compare__table-data-cell{{#if ../image}} product-compare__table-data-cell--image{{/if}}">{{this}}</td>
            {{/each}}
          </tr>
          {{/each}}
          {{/each}}
        </table>
      </div>
    </div>
  </div>
</div>
{
  "title": "Compare Products",
  "count": "3",
  "total": "4",
  "removeLabel": "Remove All",
  "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-empty",
        "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": "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-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": 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-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": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-half",
        "star-empty",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "HTS267-15C",
          "name": "Olive Stripe",
          "color": "#808000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#HTS267-15C",
          "status": "New",
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HTS267-15C",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS267-10M",
          "name": "Matte Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_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": "#HS267-10M",
          "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": "HS267-10M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS267-02MR",
          "name": "Matte Black Rubber",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$239.00",
          "salePrice": null,
          "url": "#GS267-02MR",
          "status": "New",
          "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": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "MJM025511",
      "summary": "Mens Specialty Metal Eyeglasses",
      "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": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-empty",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "mjo2010-140",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg",
            "angle": "/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg",
            "side": "/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$229.00",
          "salePrice": null,
          "url": "#mjo2010-140",
          "status": "New",
          "stock": "In Stock",
          "lens": "Clear",
          "lensId": null,
          "lensFull": "Clear",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "mjo2010-140",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "mjo2010",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "/assets/images/dummy-products/mjo2010-20-140_front.jpg",
            "angle": "/assets/images/dummy-products/mjo2010-20-140_quarter.jpg",
            "side": "/assets/images/dummy-products/mjo2010-20-140_side.jpg"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#mjo2010",
          "status": null,
          "stock": "In Stock",
          "lens": "Clear",
          "lensId": null,
          "lensFull": "Clear",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "mjo2010",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "mjm025511-fake",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "/assets/images/dummy-products/mjo2001-20-140_front.jpg",
            "angle": "/assets/images/dummy-products/mjo2001-20-140_quarter.jpg",
            "side": "/assets/images/dummy-products/mjo2001-20-140_side.jpg"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#mjm025511-fake",
          "status": null,
          "stock": "In Stock",
          "lens": "Clear",
          "lensId": null,
          "lensFull": "Clear",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "mjm025511-fake",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": null,
      "prescription": "true",
      "excludeRating": true,
      "excludePrice": true,
      "excludeInventory": true,
      "optician": true
    }
  ],
  "table": [
    {
      "label": "Available in",
      "rows": [
        {
          "label": "Prescription",
          "cells": [
            "Yes",
            "Yes",
            "Only",
            "-"
          ]
        },
        {
          "label": "Readers",
          "cells": [
            "No",
            "No",
            "-",
            "-"
          ]
        }
      ]
    },
    {
      "label": "Dimensions",
      "rows": [
        {
          "image": "/assets/images/compare-eye-width.jpg",
          "label": "Eye Width",
          "cells": [
            "49.0",
            "48.0",
            "51.0",
            "-"
          ]
        },
        {
          "image": "/assets/images/compare-eye-height.jpg",
          "label": "Eye Height",
          "cells": [
            "42.0",
            "40.0",
            "44.0",
            "-"
          ]
        },
        {
          "image": "/assets/images/compare-bridge.jpg",
          "label": "Bridge",
          "cells": [
            "22.0",
            "22.0",
            "17.0",
            "-"
          ]
        },
        {
          "image": "/assets/images/compare-temple.jpg",
          "label": "Temple",
          "cells": [
            "140.0",
            "138.0",
            "135.0 / 140.0 / 150.0",
            "-"
          ]
        },
        {
          "image": "/assets/images/compare-base-curve.jpg",
          "label": "Base Curve",
          "cells": [
            "6",
            "6",
            "30.5",
            "-"
          ]
        }
      ]
    },
    {
      "label": "Color(s) Available",
      "rows": [
        {
          "label": "Frame",
          "cells": [
            "Blue with Rootbeer",
            "Matte Tortoise",
            "-",
            "-"
          ]
        },
        {
          "label": "Lens",
          "cells": [
            "Neutral Grey",
            "HCL®Bronze",
            "-",
            "-"
          ]
        }
      ]
    },
    {
      "label": "Material",
      "rows": [
        {
          "label": "Frame",
          "cells": [
            "Plastics",
            "Plastics",
            "Rimless Beta Titanium 3 Piece Mount",
            "-"
          ]
        },
        {
          "label": "Lens",
          "cells": [
            "SuperThin Glass",
            "SuperThin Glass",
            "-",
            "-"
          ]
        }
      ]
    },
    {
      "label": "Fit",
      "rows": [
        {
          "label": "Head Size",
          "cells": [
            "Small",
            "Small",
            "Medium",
            "-"
          ]
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const openClass = 'js-product-compare--open';
      const openBodyClass = 'js-product-compare-open';
      let previousScrollTop = null;
    
      function handleToggle(e) {
        const instance = e.target.closest('.js-product-compare');
    
        if (!instance.classList.contains(openClass)) {
          openInstance(instance);
        }
        else {
          closeInstance(instance);
        }
      }
    
      function openInstance(instance = document.querySelector('.js-product-compare')) {
        // iOS requires `body { position: fixed }` to prevent background scrolling
        // while the modal is open, which forces the page to jump to the top. The
        // following counteracts that jump.
        previousScrollTop = (document.documentElement.scrollTop || document.body.scrollTop);
        document.body.style.top = (-1 * previousScrollTop) + 'px';
        document.body.classList.add(openBodyClass);
    
        instance.classList.add(openClass);
      }
    
      function closeInstance(instance = document.querySelector('.js-product-compare')) {
        // Undoes the positioning fix from openInstance().
        document.body.classList.remove(openBodyClass);
        document.body.style.top = '';
        document.documentElement.scrollTop = document.body.scrollTop = previousScrollTop;
    
        instance.classList.remove(openClass);
      }
    
      function handleControl(e) {
        const control = e.target;
        const body = control.closest('.js-product-compare-body');
    
        if (body) {
          const direction = control.getAttribute('data-direction');
          let currentPosition = parseInt(body.getAttribute('data-position'));
    
          if (direction == 'prev' && currentPosition > 1) {
            currentPosition--;
          }
          else if (direction == 'next' && currentPosition < 3) {
            currentPosition++;
          }
    
          body.setAttribute('data-position', currentPosition);
        }
      }
    
      function handleSwipe(element, direction) {
        const instance = element.closest('.js-product-compare');
        const controlDirection = (direction == 'left') ? 'prev' : 'next';
        const control = instance.querySelector('.js-product-compare-control[data-direction="' + controlDirection + '"]');
    
        if (control) {
          control.click();
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-product-compare');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const toggle = instances[i].querySelector('.js-product-compare-toggle');
            const controls = instances[i].querySelectorAll('.js-product-compare-control');
            const swipeElement = instances[i].querySelector('.js-swipe');
    
            toggle.addEventListener('click', handleToggle);
    
            for (let i = 0; i < controls.length; i++) {
              controls[i].addEventListener('click', handleControl);
            }
    
            if (typeof swipeElement.events !== 'undefined') {
              swipeElement.events.on('swipe', handleSwipe);
            }
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
        componentEvents.on('product-compare-open', openInstance);
        componentEvents.on('product-compare-close', closeInstance);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/product-compare/product-compare.js
  • Filesystem Path: src/components/01-elements/modals/product-compare/product-compare.js
  • Size: 3.3 KB
  • Content:
    .js-product-compare-open {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    .product-compare {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: translateY(100%) translateY(-50px);
      transition: transform .2s ease 0s;
      background-color: $color-white;
      box-shadow: 0 0 20px rgba(0, 0, 0, .1);
      z-index: 10;
    
      &.js-product-compare--open {
        transform: translateY(0);
        z-index: 55;
      }
    
      @include breakpoint($breakpoint-xl) {
        transform: translateY(100%) translateY(-70px);
      }
    }
    
    .product-compare__header {
      position: relative;
      height: 50px;
      padding: 7px 0;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      cursor: pointer;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-xl) {
        height: 70px;
        padding: 11px 0;
      }
    }
    
    .product-compare__title {
      margin: 0;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .product-compare__amount {
      margin: 0;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .product-compare__toggle {
      @include reset-button;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;
      width: 50px;
    
      .icon {
        width: 14px;
        height: 6px;
        pointer-events: none;
      }
    
      .icon--arrow-down {
        display: none;
      }
    
      .js-product-compare--open & {
        .icon--arrow-up {
          display: none;
        }
    
        .icon--arrow-down {
          display: inline-block;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 70px;
    
        .icon {
          width: 20px;
          height: 8px;
        }
      }
    }
    
    .product-compare__body {
      height: calc(100% - 50px);
      overflow-y: scroll;
      overflow-x: hidden;
    
      @include breakpoint($breakpoint-xl) {
        height: calc(100% - 70px);
        padding-top: 60px;
        box-sizing: border-box;
      }
    }
    
    .product-compare__body-inner {
      max-width: $page-width-max;
      margin: 0 auto;
    }
    
    .product-compare__remove-all {
      @include reset-button;
      margin: 0 10px;
      color: $color-error;
      font-size: 1.0rem;
      letter-spacing: 1px;
      line-height: 3.8rem;
    
      @include breakpoint($breakpoint-xl) {
        display: none;
      }
    }
    
    .product-compare__control {
      @include reset-button;
      position: absolute;
      top: 130px;
      width: 32px;
      height: 60px;
      background-color: $color-black;
      opacity: .4;
      z-index: 1;
    
      &[data-direction='prev'] {
        left: $gutter-width-half;
    
        [data-position='1'] & {
          display: none;
        }
      }
    
      &[data-direction='next'] {
        right: $gutter-width-half;
    
        [data-position='3'] & {
          display: none;
        }
      }
    
      .icon {
        fill: $color-white;
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .product-compare__products {
      @include breakpoint($breakpoint-sm-only) {
        width: 200%;
        transition: transform .2s ease 0s;
    
        [data-position='2'] & {
          transform: translateX(-25%);
        }
    
        [data-position='3'] & {
          transform: translateX(-50%);
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
      }
    }
    
    .product-compare__products-cell {
      display: block;
      position: relative;
      width: 25%;
      padding: 0 $gutter-width-half;
      float: left;
      text-align: center;
      box-sizing: border-box;
    
      .rating {
        position: absolute;
        right: 0;
        left: 0;
      }
    
      .rating__star {
        margin: 0 3px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 20%;
      }
    }
    
    .product-compare__products-cell--blank {
      @include breakpoint(0 ($breakpoint-xl - 1)) {
        display: none;
      }
    }
    
    .product-compare__product-image {
      // Brands with ratings need a top margin on this image for proper alignment.
      margin: $product-compare-image-margin-top auto 0;
    }
    
    .product-compare__product-name {
      margin: 12px 0 2px;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 2px;
      line-height: 1.6rem;
    }
    
    .product-compare__product-price {
      display: block;
      color: $color-medium-dark;
      font-size: 2.7rem;
      line-height: 3.2rem;
    }
    
    .product-compare__product-tax {
      display: block;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
      }
    }
    
    .product-compare__product-inventory {
      display: block;
      margin: 15px 0 5px;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .product-compare__cart-button,
    .product-compare__optician-button {
      width: 100%;
      padding: 0;
      line-height: 3.0rem;
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        margin: 0 auto;
        padding: 0 20px;
      }
    }
    
    .product-compare__optician-button {
      margin-top: 20px;
    }
    
    .product-compare__optician-short {
      @include breakpoint($breakpoint-lg) {
        display: none;
      }
    }
    
    .product-compare__optician-long {
      @include breakpoint(0 ($breakpoint-lg - 1)) {
        display: none;
      }
    }
    
    .product-compare__remove-button {
      @include reset-button;
      height: 30px;
      margin: 0 auto;
      color: $color-error;
      font-size: 1.1rem;
      letter-spacing: 1px;
      line-height: 1.3rem;
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 10px;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .product-compare__product-add-button {
      @include reset-button;
      margin-top: 45px;
      color: $color-darkest;
      font-size: 1.2rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      .icon {
        height: 8px;
        padding-left: 5px;
      }
    }
    
    .product-compare__table-wrapper {
      width: calc(100% - 20px);
      margin: 0 $gutter-width-half;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    
    .product-compare__table {
      letter-spacing: normal;
      border-collapse: collapse;
    
      @include breakpoint($breakpoint-sm-only) {
        width: 200%;
        transition: transform .2s ease 0s;
    
        [data-position='2'] & {
          transform: translateX(-25%);
        }
    
        [data-position='3'] & {
          transform: translateX(-50%);
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
      }
    }
    
    .product-compare__table-category-label {
      padding: 15px 0 5px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-sm-only) {
        transition: transform .2s ease 0s;
    
        [data-position='2'] & {
          transform: translateX(25%);
        }
    
        [data-position='3'] & {
          transform: translateX(50%);
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .product-compare__table-data {
      @include clearfix;
      display: block;
      position: relative;
    }
    
    .product-compare__table-data-label {
      display: block;
      position: absolute;
      padding: 0;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.6rem;
      text-align: center;
      pointer-events: none;
    
      @include breakpoint($breakpoint-sm-only) {
        width: 50%;
        transition: transform .2s ease 0s;
    
        [data-position='2'] & {
          transform: translateX(50%);
        }
    
        [data-position='3'] & {
          transform: translateX(100%);
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
      }
    
      @include breakpoint($breakpoint-xl) {
        position: static;
        width: 20%;
        float: left;
        color: $color-darkest;
        font-size: 1.4rem;
        font-weight: $font-weight-bold;
        letter-spacing: 2px;
        line-height: 4.0rem;
        text-align: left;
        pointer-events: auto;
      }
    }
    
    .product-compare__table-data-label-inner {
      background-color: $color-white;
    }
    
    .product-compare__table-data-label-image {
      margin: 0 auto;
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 10px;
        float: left;
      }
    }
    
    .product-compare__table-data-cell {
      display: block;
      width: 25%;
      min-height: 26px;
      padding: 7px 20px;
      float: left;
      color: $color-darkest;
      font-size: 1.0rem;
      line-height: 1.2rem;
      text-align: center;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-xl) {
        width: 20%;
        min-height: 40px;
        padding: 10px 20px;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .product-compare__table-data-cell--image {
      margin-top: 30px;
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
      }
    }
    
  • URL: /components/raw/product-compare/product-compare.scss
  • Filesystem Path: src/components/01-elements/modals/product-compare/product-compare.scss
  • Size: 8.3 KB

There are no notes for this item.