Maui Jim Style Guide

Shopping Cart: Zeal 

<form class="shopping-cart js-shopping-cart">
    <h1 class="shopping-cart__title">Your Cart</h1>
    <table class="shopping-cart__items">
        <thead class="shopping-cart__items-header">
            <tr class="shopping-cart__items-header-row">
                <td class="shopping-cart__items-header-cell"></td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--items">Items</td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--qty">Qty</td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--price">Total Price</td>
            </tr>
        </thead>
        <tbody class="shopping-cart__items-body">
            <tr class="shopping-cart__item">
                <td class="shopping-cart__item-image-col">
                    <a href="#202-02"><img class="shopping-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225" alt="Gloss Black"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">PEAHI</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Gloss Black</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> Neutral Grey</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> 202-02</span>
                    <button class="shopping-cart__item-wishlist button button--plain-text">Move to Wishlist</button>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <select id="shopping-cart-qty" name="shopping-cart-qty" class="select js-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$149.00</span>
                    <span class="shopping-cart__item-tax">Inkl. MWST</span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item">
                <td class="shopping-cart__item-image-col">
                    <a href="#HTS267-15C"><img class="shopping-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225" alt="Olive Stripe"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">WATERWAYS</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Olive Stripe</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> Maui HT™</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> HTS267-15C</span>
                    <button class="shopping-cart__item-wishlist button button--plain-text">Move to Wishlist</button>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <select id="shopping-cart-qty" name="shopping-cart-qty" class="select js-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <div class="shopping-cart__item-vip-info">
                        <span class="shopping-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="shopping-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="shopping-cart__item-price">$219.00</span>
                    <span class="shopping-cart__item-tax">Inkl. MWST</span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item">
                <td class="shopping-cart__item-image-col">
                    <a href="#H257-16C"><img class="shopping-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225" alt="Tortoise with Antique Gold"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">KAWIKA</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> H257-16C</span>
                    <button class="shopping-cart__item-wishlist button button--plain-text">Move to Wishlist</button>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <select id="shopping-cart-qty" name="shopping-cart-qty" class="select js-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <div class="shopping-cart__item-vip-info">
                        <span class="shopping-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="shopping-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="shopping-cart__item-price">$299.00</span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item shopping-cart__item--extra shopping-cart__item--gift-bag js-shopping-cart-item-gift-bag">
                <td colspan="2">
                    <div class="shopping-cart__item-toggle">
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="shopping-cart-gift-bag" name="gift-bag" class="checkbox checkbox--default">
                            <label for="shopping-cart-gift-bag">
                Add Gift Bag
                <svg class="icon icon--gift-bag">
  <use xlink:href="/assets/icons/icons.svg#gift-bag"></use>
</svg>

              </label>
                        </div>
                    </div>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <select id="shopping-cart-gift-bag" name="shopping-cart-gift-bag" class="select js-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$3.99</span>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="shopping-cart__items-footer">
        <tfoot>
            <tr>
                <td class="shopping-cart__items-footer-cell" colspan="2">
                    <div class="gift-card-apply-form js-gift-card-apply-form">
                        <span class="gift-card-apply-form__title">Have a Gift Card, VIP or Choice Card?</span>
                        <div class="gift-card-apply-form__item gift-card-apply-form__item--number">
                            <div class="form-item form-item--text form-item--gift-card-apply-gift-card-number">
                                <label for="gift-card-apply-gift-card-number" class="label label--text">Card Number</label>
                                <input type="text" id="gift-card-apply-gift-card-number" name="gift-card-number" class="input input--text">
                            </div>

                        </div>
                        <div class="gift-card-apply-form__item gift-card-apply-form__item--pin">
                            <div class="form-item form-item--text form-item--gift-card-apply-gift-card-pin">
                                <label for="gift-card-apply-gift-card-pin" class="label label--text">Pin</label>
                                <input type="text" id="gift-card-apply-gift-card-pin" name="gift-card-pin" class="input input--text">
                            </div>

                        </div>
                        <div class="gift-card-apply-form__submit">
                            <button class="button button--outlined">Apply</button>

                        </div>
                    </div>
                    <div class="shopping-cart__applied-gift">
                        <span class="shopping-cart__applied-gift-label">Applied Gift Card or VIP Card</span>
                        <div class="shopping-cart__applied-gift-item">
                            <span class="shopping-cart__applied-gift-info">
                <span class="shopping-cart__applied-gift-info-label">VIP Card: </span>
                            <span class="shopping-cart__applied-gift-info-value">12345678901234567890</span>
                            <button class="button button--plain-text">Remove</button>

                        </div>
                        <div class="shopping-cart__applied-gift-item">
                            <span class="shopping-cart__applied-gift-info">
                <span class="shopping-cart__applied-gift-info-label">Gift Card: </span>
                            <span class="shopping-cart__applied-gift-info-value">12345678901234567890</span>
                            <button class="button button--plain-text">Remove</button>

                        </div>
                    </div>
                </td>
                <td class="shopping-cart__items-footer-cell" colspan="2">
                    <ul class="shopping-cart__totals">
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">Order Subtotal (4):</span>
                            <span class="shopping-cart__totals-value">$1096.00</span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">Gift Bag (1):</span>
                            <span class="shopping-cart__totals-value">$3.99</span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">Gift Card:</span>
                            <span class="shopping-cart__totals-value">- $300.00</span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">Estimated Tax*:</span>
                            <span class="shopping-cart__totals-value">-</span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">Shipping*:</span>
                            <span class="shopping-cart__totals-value">-</span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label shopping-cart__totals-label--tbd">* Calculated at Checkout</span>
                        </li>
                        <li class="shopping-cart__totals-item shopping-cart__totals-item--total">
                            <span class="shopping-cart__totals-label">Total:</span>
                            <span class="shopping-cart__totals-value">$799.99</span>
                        </li>
                    </ul>
                    <button class="button button--primary shopping-cart__checkout">Checkout</button>
                </td>
            </tr>
        </tfoot>
    </table>
</form>
 
<form class="shopping-cart js-shopping-cart">
  <h1 class="shopping-cart__title">{{title}}</h1>
  {{#if products}}
  <table class="shopping-cart__items">
    <thead class="shopping-cart__items-header">
      <tr class="shopping-cart__items-header-row">
        <td class="shopping-cart__items-header-cell"></td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--items">Items</td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--qty">Qty</td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--price">Total Price</td>
      </tr>
    </thead>
    <tbody class="shopping-cart__items-body">
      {{#each products}}
      <tr class="shopping-cart__item">
        <td class="shopping-cart__item-image-col">
          <a href="{{variants.0.url}}"><img class="shopping-cart__item-image" src="{{productImage variants.0.images.front 225}}" alt="{{variants.0.name}}"></a>
        </td>
        <td class="shopping-cart__item-info-col">
          <span class="shopping-cart__item-name">{{name}}</span>
          <span class="shopping-cart__item-info"><strong>Frame:</strong> {{variants.0.name}}</span>
          <span class="shopping-cart__item-info"><strong>Lens:</strong> {{variants.0.lens}}</span>
          {{#if ../showAllInfo}}
          <span class="shopping-cart__item-info"><strong>Lens Material:</strong> {{variants.0.lensMaterial}}</span>
          <span class="shopping-cart__item-info"><strong>Gradient:</strong> Single Gradient</span>
          {{/if}}
          <span class="shopping-cart__item-info"><strong>SKU:</strong> {{variants.0.id}}</span>
          <button class="shopping-cart__item-wishlist button button--plain-text">Move to Wishlist</button>
        </td>
        <td class="shopping-cart__item-qty-col">
          <div class="shopping-cart__item-qty">
            {{render '@select-normal' ../quantity}}
          </div>
        </td>
        <td class="shopping-cart__item-price-col">
          {{#if vip}}
          <div class="shopping-cart__item-vip-info">
            <span class="shopping-cart__item-vip-card-value">VIP Card {{vip.cardValue}}</span>
            <span class="shopping-cart__item-vip-original-price">{{vip.originalPrice}}</span>
          </div>
          {{/if}}
          <span class="shopping-cart__item-price">{{variants.0.price}}</span>
          {{#if tax}}
          <span class="shopping-cart__item-tax">{{tax}}</span>
          {{/if}}
          <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
        </td>
      </tr>
      {{/each}}
      <tr class="shopping-cart__item shopping-cart__item--extra shopping-cart__item--gift-bag js-shopping-cart-item-gift-bag">
        <td colspan="2">
          <div class="shopping-cart__item-toggle">
            {{> @checkbox modifier="default" id="shopping-cart-gift-bag" name="gift-bag" label="Add Gift Bag" labelIcon="gift-bag"}}
          </div>
        </td>
        <td class="shopping-cart__item-qty-col">
          <div class="shopping-cart__item-qty">
            {{render '@select-normal' giftBag.quantity}}
          </div>
        </td>
        <td class="shopping-cart__item-price-col">
          <span class="shopping-cart__item-price">{{giftBag.price}}</span>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="shopping-cart__items-footer">
    <tfoot>
      <tr>
        <td class="shopping-cart__items-footer-cell" colspan="2">
          <div class="gift-card-apply-form js-gift-card-apply-form">
            <span class="gift-card-apply-form__title">{{giftCard.title}}</span>
            <div class="gift-card-apply-form__item gift-card-apply-form__item--number">
              {{render '@input' giftCard.number}}
            </div>
            <div class="gift-card-apply-form__item gift-card-apply-form__item--pin">
              {{render '@input' giftCard.pin}}
            </div>
            <div class="gift-card-apply-form__submit">
              {{render '@buttons' giftCard.submit}}
            </div>
          </div>
          {{#if giftCard.applied}}
          <div class="shopping-cart__applied-gift">
            <span class="shopping-cart__applied-gift-label">{{giftCard.applied.label}}</span>
            {{#each giftCard.applied.items}}
            <div class="shopping-cart__applied-gift-item">
              <span class="shopping-cart__applied-gift-info">
                <span class="shopping-cart__applied-gift-info-label">{{label}}: </span>
                <span class="shopping-cart__applied-gift-info-value">{{value}}</span>
              {{render '@buttons--plain-text' remove}}
            </div>
            {{/each}}
          </div>
          {{/if}}
        </td>
        <td class="shopping-cart__items-footer-cell" colspan="2">
          <ul class="shopping-cart__totals">
            {{#each totals}}
            <li class="shopping-cart__totals-item">
              <span class="shopping-cart__totals-label{{#if modifier}} shopping-cart__totals-label--{{modifier}}{{/if}}">{{label}}{{#if value}}:{{/if}}</span>
              {{#if value}}
              <span class="shopping-cart__totals-value{{#if modifier}} shopping-cart__totals-value--{{modifier}}{{/if}}">{{value}}</span>
              {{/if}}
            </li>
            {{/each}}
            {{#if total}}
            <li class="shopping-cart__totals-item shopping-cart__totals-item--total">
              <span class="shopping-cart__totals-label">{{total.label}}:</span>
              <span class="shopping-cart__totals-value">{{total.value}}</span>
            </li>
            {{/if}}
          </ul>
          <button class="button button--primary shopping-cart__checkout">{{checkout}}</button>
        </td>
      </tr>
    </tfoot>
  </table>
  {{else}}
  <div class="shopping-cart__empty">
    <img class="shopping-cart__empty-brand-logo" src="{{empty.brandLogo}}">
    <span class="shopping-cart__empty-label">{{empty.label}}</span>
    <a class="shopping-cart__empty-button button button--primary">{{empty.buttonValue}}</a>
  </div>
  {{/if}}
</form>
 
{
  "pageCss": [
    "checkout"
  ],
  "showAllInfo": null,
  "title": "Your Cart",
  "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-empty",
        "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": "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": "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": "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-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": "New",
          "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": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "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": null,
          "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": 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": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-full",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": null,
      "variants": [
        {
          "id": "H257-16C",
          "name": "Tortoise with Antique Gold",
          "color": "#e0d468",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#H257-16C",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "H257-16C",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "B257-05CR",
          "name": "Crystal",
          "color": "#fff; border: 1px solid #dedede",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B257-05CR",
          "status": null,
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "B257-05CR",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "257-17C",
          "name": "Black Gloss with Antique Pewter",
          "color": "#808080",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#257-17C",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "257-17C",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    }
  ],
  "quantity": {
    "id": "shopping-cart-qty",
    "name": "shopping-cart-qty",
    "label": null,
    "required": null,
    "options": {
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5"
    }
  },
  "giftBag": {
    "quantity": {
      "id": "shopping-cart-gift-bag",
      "name": "shopping-cart-gift-bag",
      "label": null,
      "required": null,
      "options": {
        "1": "1",
        "2": "2",
        "3": "3"
      }
    },
    "price": "$3.99"
  },
  "giftCard": {
    "title": "Have a Gift Card, VIP or Choice Card?",
    "number": {
      "type": "text",
      "id": "gift-card-apply-gift-card-number",
      "name": "gift-card-number",
      "label": "Card Number",
      "required": null
    },
    "pin": {
      "type": "text",
      "id": "gift-card-apply-gift-card-pin",
      "name": "gift-card-pin",
      "label": "Pin",
      "required": null
    },
    "submit": {
      "modifier": "outlined",
      "buttonValue": "Apply"
    },
    "applied": {
      "label": "Applied Gift Card or VIP Card",
      "items": [
        {
          "label": "VIP Card",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        },
        {
          "label": "Gift Card",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        }
      ]
    }
  },
  "totals": [
    {
      "label": "Order Subtotal (4)",
      "value": "$1096.00"
    },
    {
      "label": "Gift Bag (1)",
      "value": "$3.99"
    },
    {
      "label": "Gift Card",
      "value": "- $300.00"
    },
    {
      "label": "Estimated Tax*",
      "value": "-"
    },
    {
      "label": "Shipping*",
      "value": "-"
    },
    {
      "label": "* Calculated at Checkout",
      "modifier": "tbd"
    }
  ],
  "total": {
    "label": "Total",
    "value": "$799.99"
  },
  "checkout": "Checkout",
  "empty": {
    "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
    "label": "Your Shopping Cart is Empty",
    "buttonValue": "Shop Now"
  }
}
  • Content: 
    (function (window) {
  'use strict';

  function handleToggle(e) {
    const item = e.target.closest('.js-shopping-cart-item-gift-bag');
    toggleItem(item);
  }

  function toggleItem(item) {
    item.classList.toggle('js-shopping-cart-disable');
  }

  function init() {
    const instances = document.querySelectorAll('.js-shopping-cart-item-gift-bag');

    for (let i = 0; i < instances.length; i++) {
      if (!instances[i].classList.contains('js-component-init')) {
        const toggle = instances[i].querySelector('.checkbox');
        if (toggle) {
          toggle.addEventListener('click', handleToggle);
        }
        toggleItem(instances[i]);
        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);
  }

  init();

})(this);
  • URL: /components/raw/shopping-cart/shopping-cart.js
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.js
  • Size: 939 Bytes
  • Content: 
    .shopping-cart__title {
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid $color-light;
  color: $color-dark;
  font-size: 1.6rem;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  line-height: 1.9rem;
  text-shadow: none;
  text-transform: none;

  @include breakpoint($breakpoint-xl) {
    padding-bottom: 5px;
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.shopping-cart__items {
  width: 100%;
  border-collapse: collapse;
}

.shopping-cart__items-header {
  background-color: $color-lighter;
  color: $color-darkest;
  font-size: 1.4rem;
  font-weight: $font-weight-bold;
  line-height: 2.0rem;

  tr {
    height: 50px;
  }

  @include breakpoint($breakpoint-sm-only) {
    display: none;
  }
}

.shopping-cart__items-header-cell--qty {
  @include breakpoint($breakpoint-xl) {
    padding-left: 25px;
  }
}

.shopping-cart__items-header-cell--price {
  padding-right: 20px;
  text-align: right;
}

.shopping-cart__items-body {
  @include breakpoint($breakpoint-sm-only) {
    td {
      display: block;
    }
  }
}

.shopping-cart__item {
  border-bottom: 1px solid $shopping-cart-item-border-bottom;

  @include breakpoint($breakpoint-sm-only) {
    @include clearfix;
    display: block;
    position: relative;
    padding-bottom: 50px;
  }

  @include breakpoint($breakpoint-md) {
    &:last-child {
      border-bottom: 0;
    }
  }
}

.shopping-cart__item--extra {
  @include breakpoint($breakpoint-sm-only) {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
}

.shopping-cart__item-image-col {
  & > a:focus {
    outline: none;
  }

  @include breakpoint($breakpoint-md) {
    width: 20%;
  }

  @include breakpoint($breakpoint-xl) {
    width: 25%;
  }
}

.shopping-cart__item-image {
  max-width: 225px;
  margin: 10px auto;

  @include breakpoint($breakpoint-md) {
    max-width: 150px;
  }

  @include breakpoint($breakpoint-xl) {
    max-width: 225px;
  }
}

.shopping-cart__item-info-col,
.shopping-cart__item-price-col {
  @include breakpoint($breakpoint-md) {
    position: relative;
  }

  @include breakpoint($breakpoint-xl) {
    padding-right: 20px;
  }
}

.shopping-cart__item-info-col {
  margin-bottom: 15px;

  @include breakpoint($breakpoint-md) {
    padding: $shopping-cart-item-info-col-padding;
  }
}

.shopping-cart__item-name {
  display: block;
  color: $color-dark;
  font-size: #{map-get($shopping-cart-item-name-font-size, sm)};
  font-weight: $font-weight-bold;
  letter-spacing: $shopping-cart-item-name-letter-spacing;
  line-height: #{map-get($shopping-cart-item-name-line-height, sm)};
  text-transform: uppercase;

  @include breakpoint($breakpoint-sm-only) {
    margin-bottom: 10px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 10px;
    font-size: #{map-get($shopping-cart-item-name-font-size, xl)};
    line-height: #{map-get($shopping-cart-item-name-line-height, xl)};
  }
}

.shopping-cart__item-info {
  display: block;
  color: $color-darkest;
  font-size: 1.4rem;
  line-height: 2.0rem;

  @include breakpoint($breakpoint-xl) {
    max-width: 290px;
  }
}

.shopping-cart__item-wishlist,
.shopping-cart__item-remove {
  position: absolute;
  bottom: $shopping-cart-item-button-bottom;
  width: auto;
  min-width: 0;
  padding: 0;
}

.shopping-cart__item-wishlist {
  left: 0;
  color: $color-darkest;
}

.shopping-cart__item-remove {
  right: 0;
  color: $color-error;

  &:hover {
    color: $color-error;
  }

  @include breakpoint($breakpoint-xl) {
    right: 20px;
  }
}

.shopping-cart__item-qty-col {
  @include breakpoint($breakpoint-sm-only) {
    float: left;
  }
}

.shopping-cart__item-qty {
  .form-item--select {
    margin: 0;
  }

  .select-wrapper {
    width: 80px;
    height: 50px;
  }

  .select {
    padding-left: 20px;
    color: $color-darkest;

    option {
      padding-left: 20px;
    }
  }

  @include breakpoint($breakpoint-md) {
    .form-item--select {
      margin: 15px 0;
    }
  }
}

.shopping-cart__item-price-col {
  text-align: right;

  @include breakpoint($breakpoint-sm-only) {
    float: right;
  }
}

.shopping-cart__item-price {
  color: $shopping-cart-item-price-color;
  font-size: 2.7rem;
  line-height: 5.0rem;
}

.shopping-cart__item-tax {
  display: block;
  margin-top: -14px;
  color: $color-medium-dark;
  font-size: 1.2rem;
  line-height: 2.0rem;
}

.shopping-cart__item-vip-info {
  margin-top: -28px;
  margin-bottom: -2px;
  color: $color-dark;
  font-size: 1.4rem;
  font-weight: $font-weight-medium;
  line-height: 1.5rem;

  @include breakpoint($breakpoint-md) {
    margin-top: -23px;
    margin-bottom: -7px;
    font-size: 1.2rem;
  }

  @include breakpoint($breakpoint-xl) {
    right: 20px;
    margin-top: -28px;
    margin-bottom: -2px;
  }
}

.shopping-cart__item-vip-card-value {
  display: block;
  white-space: nowrap;
}

.shopping-cart__item-vip-original-price {
  display: block;
  text-decoration: line-through;
}

.shopping-cart__item-toggle {
  margin: 15px 0;

  label {
    font-weight: $font-weight-bold;
  }
}

.shopping-cart__item--gift-bag {
  .shopping-cart__item-toggle label .icon {
    top: -4px;
    right: -30px;
    padding-left: 0;
  }
}

.shopping-cart__items-footer {
  width: 100%;
  background-color: $color-lighter;
  border-collapse: collapse;
}

.shopping-cart__items-footer-cell {
  vertical-align: top;

  @include breakpoint($breakpoint-sm-only) {
    display: block;
  }
}

.gift-card-apply-form {
  padding: 10px;
}

.gift-card-apply-form__title {
  display: block;
  margin: 10px 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2rem;
}

.gift-card-apply-form__item {
  label {
    font-size: 1.4rem;
    font-weight: $font-weight-normal;
  }

  @include breakpoint($breakpoint-md) {
    margin-right: $gutter-width;
    float: left;
  }
}

.gift-card-apply-form__item--number {
  @include breakpoint($breakpoint-md) {
    width: 220px;
  }

  @include breakpoint($page-width-max) {
    width: 240px;
  }
}

.gift-card-apply-form__item--pin {
  @include breakpoint($breakpoint-md) {
    width: 80px;
    margin-right: 0;
  }

  @include breakpoint($page-width-max) {
    width: 100px;
    margin-right: 20px;
  }
}

.gift-card-apply-form__submit .button {
  display: block;
  margin: 10px auto 0;
  background-color: $color-lighter;

  @include breakpoint($breakpoint-md) {
    margin: 10px 0 0;
    clear: both;
  }
}

.shopping-cart__applied-gift {
  margin: 20px 0;
  padding: 10px;
  clear: both;
  font-size: 1.4rem;
  line-height: 2.0rem;

  @include breakpoint($breakpoint-xl) {
    margin: 0;
    padding-top: 10px;
  }
}

.shopping-cart__applied-gift-label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: $font-weight-bold;
}

.shopping-cart__applied-gift-item {
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.shopping-cart__applied-gift-info {
  .button {
    width: auto;
    min-width: 0;
    padding: 0;
    color: $color-error;
    line-height: 2.0rem;
  }

  @include breakpoint($breakpoint-sm-only) {
    .button {
      float: right;
    }
  }

  @include breakpoint($breakpoint-md) {
    .button {
      margin-left: 15px;
    }
  }
}

.shopping-cart__applied-gift-info-label {
  display: block;
  margin-bottom: 5px;
}

.shopping-cart__totals {
  @include reset-list;
  margin: 20px $gutter-width-half;
  color: $color-darkest;
  font-size: 1.4rem;
  line-height: 2.0rem;

  @include breakpoint($breakpoint-md) {
    min-width: 270px;
    max-width: 330px;
    margin-left: auto;
  }

  @include breakpoint($breakpoint-xl) {
    margin-right: 20px;
  }
}

.shopping-cart__totals-item {
  clear: both;
}

.shopping-cart__totals-item--total {
  margin-top: 15px;
  font-weight: $font-weight-bold;
}

.shopping-cart__totals-value {
  float: right;
}

.shopping-cart__totals-label--tbd {
  display: inline-block;
  margin-top: 8px;
  color: $color-medium-dark;
}

.shopping-cart__totals-value--tbd {
  @include breakpoint($breakpoint-md) {
    color: $color-medium-dark;
  }
}

.shopping-cart__checkout {
  display: block;
  width: 100px;
  min-width: 120px;
  margin: 0 10px 10px auto;

  @include breakpoint($breakpoint-md) {
    width: 150px;
    margin-bottom: 30px;
  }
}

.shopping-cart__empty {
  padding-bottom: 10px;
  text-align: center;

  @include breakpoint($breakpoint-md) {
    padding-bottom: 50px;
  }
}

.shopping-cart__empty-brand-logo {
  margin: 30px auto;

  @include breakpoint($breakpoint-md) {
    margin-top: 70px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-top: 50px;
  }
}

.shopping-cart__empty-label {
  display: block;
  margin: 20px 0;
  color: $color-darkest;
  font-size: 1.6rem;
  line-height: 1.9rem;
}

.shopping-cart__empty-button {
  padding: 0 20px;
}

.shopping-cart__item-qty-col,
.shopping-cart__item-price-col {
  .js-shopping-cart-disable & {
    opacity: .5;
    pointer-events: none;
  }
}
  • URL: /components/raw/shopping-cart/shopping-cart.scss
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.scss
  • Size: 8.8 KB

There are no notes for this item.