<div class="order">
    <div class="order__order-summary">
        <span class="order__order-date"><strong>Date:</strong> 13/3/2018</span>
        <span class="order__order-number"><strong>Order N.:</strong> W1523650494318</span>
        <span class="order__order-shipping">
      <strong>Shipping:</strong>
      <a href="" class="order__track-delivery">Track your Delivery <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
    </span>
        <div class="order__order-actions">
            <button class="order__view-details button button--primary">View Details</button>
        </div>
    </div>
    <div class="order__item">
        <a href="#" class="order__item-link">
            <div class="order__item-image-wrapper">
                <img class="order__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
            </div>
            <div class="order__item-summary">
                <div class="order__item-name">PEAHI</div>
                <span class="order__item-info"><strong>Frame:</strong> Gloss Black</span>
                <span class="order__item-info"><strong>Lens:</strong> Neutral Grey</span>
                <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
            </div>
        </a>
        <div class="order__item-line-item">
            <span class="order__item-qty"><strong>Qty:</strong> 3</span>
            <span class="order__item-price">
        <strong>Total:</strong> $447.00
        <span class="order__item-tax">
          Inkl. MWST
        </span>
            </span>
        </div>
    </div>
    <div class="order__item">
        <a href="#" class="order__item-link">
            <div class="order__item-image-wrapper">
                <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
            </div>
            <div class="order__item-summary">
                <div class="order__item-name">WATERWAYS</div>
                <span class="order__item-info"><strong>Frame:</strong> Olive Stripe</span>
                <span class="order__item-info"><strong>Lens:</strong> Maui HT™</span>
                <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
            </div>
        </a>
        <div class="order__item-line-item">
            <span class="order__item-qty"><strong>Qty:</strong> 2</span>
            <span class="order__item-price">
        <strong>Total:</strong> $438.00
        <span class="order__item-tax">
          Inkl. MWST
        </span>
            </span>
        </div>
    </div>
    <div class="order__item">
        <a href="#" class="order__item-link">
            <div class="order__item-image-wrapper">
                <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
            </div>
            <div class="order__item-summary">
                <div class="order__item-name">KAWIKA</div>
                <span class="order__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                <span class="order__item-info"><strong>Lens Material:</strong> MauiPure</span>
            </div>
        </a>
        <div class="order__item-line-item">
            <span class="order__item-qty"><strong>Qty:</strong> 2</span>
            <span class="order__item-price">
        <strong>Total:</strong> $598.00
      </span>
        </div>
    </div>
</div>
<div class="order">
  <div class="order__order-summary">
    <span class="order__order-date"><strong>Date:</strong> {{order.date}}</span>
    <span class="order__order-number"><strong>Order N.:</strong> {{order.number}}</span>
    <span class="order__order-shipping">
      <strong>Shipping:</strong>
      {{#if order.delivery}}
      <span class="order__delivered">{{this.deliveredText}}</span>
      {{else}}
      <a href="{{../trackLink.path}}" class="order__track-delivery">{{this.trackLink.label}} {{render '@icons--arrow-right'}}</a>
      {{/if}}
    </span>
    {{#unless details}}
    <div class="order__order-actions">
      <button class="order__view-details button button--primary">View Details</button>
    </div>
    {{/unless}}
  </div>
  {{#each this.order.products}}
  <div class="order__item">
    <a href="#" class="order__item-link">
      <div class="order__item-image-wrapper">
        <img class="order__item-image" src="{{productImage variants.0.images.front 225}}">
      </div>
      <div class="order__item-summary">
        <div class="order__item-name">{{name}}</div>
        <span class="order__item-info"><strong>Frame:</strong> {{variants.0.name}}</span>
        <span class="order__item-info"><strong>Lens:</strong> {{variants.0.lens}}</span>
        <span class="order__item-info"><strong>Lens Material:</strong> {{variants.0.lensMaterial}}</span>
        {{#if ../details}}
        <span class="order__item-info"><strong>SKU:</strong> {{variants.0.id}}</span>
        {{/if}}
      </div>
    </a>
    <div class="order__item-line-item">
      <span class="order__item-qty"><strong>Qty:</strong> {{qty}}</span>
      <span class="order__item-price">
        <strong>Total:</strong> {{total}}
        {{#if tax}}
        <span class="order__item-tax">
          {{tax}}
        </span>
        {{/if}}
      </span>
    </div>
  </div>
  {{/each}}
</div>
{
  "pageCss": [
    "account"
  ],
  "deliveredText": "Delivered",
  "trackLink": {
    "path": "#",
    "label": "Track your Delivery"
  },
  "order": {
    "date": "13/3/2018",
    "number": "W1523650494318",
    "delivery": null,
    "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-half",
          "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": "New",
            "stock": "In Stock",
            "lens": "Blue Hawaii",
            "lensId": "bluehawaii",
            "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
            "lensMaterial": "SuperThin Glass",
            "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
            "lensDetailData": {
              "product": "B202-2M",
              "inactive": true,
              "material": "superthin"
            }
          },
          {
            "id": "H202-10",
            "name": "Dark Tortoise",
            "color": "#303032",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#H202-10",
            "status": null,
            "stock": "In Stock",
            "lens": "HCL® Bronze",
            "lensId": "hclbronze",
            "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
            "lensMaterial": "SuperThin Glass",
            "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
            "lensDetailData": {
              "product": "H202-10",
              "inactive": true,
              "material": "superthin"
            }
          },
          {
            "id": "H202-2M",
            "name": "Matte Black",
            "color": "#000",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#H202-2M",
            "status": null,
            "stock": "In Stock",
            "lens": "HCL® Bronze",
            "lensId": "hclbronze",
            "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
            "lensMaterial": "SuperThin Glass",
            "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
            "lensDetailData": {
              "product": "H202-2M",
              "inactive": true,
              "material": "superthin"
            }
          },
          {
            "id": "H202-70",
            "name": "Redfish",
            "color": "#7d4a07",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#H202-70",
            "status": null,
            "stock": "In Stock",
            "lens": "HCL® Bronze",
            "lensId": "hclbronze",
            "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
            "lensMaterial": "SuperThin Glass",
            "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
            "lensDetailData": {
              "product": "H202-70",
              "inactive": true,
              "material": "superthin"
            }
          },
          {
            "id": "HT202-71",
            "name": "MahiMahi",
            "color": "#218b16",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#HT202-71",
            "status": null,
            "stock": "In Stock",
            "lens": "Maui HT™",
            "lensId": "mauiht",
            "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
            "lensMaterial": "MauiPure",
            "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
            "lensDetailData": {
              "product": "HT202-71",
              "inactive": true,
              "material": "mauipure"
            }
          },
          {
            "id": "H202-2M-2",
            "name": "Matte Black",
            "color": "#000",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#H202-2M-2",
            "status": null,
            "stock": "Out of Stock",
            "lens": "HCL® Bronze",
            "lensId": "hclbronze",
            "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
            "lensMaterial": "SuperThin Glass",
            "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
            "lensDetailData": {
              "product": "H202-2M-2",
              "inactive": true,
              "material": "superthin"
            }
          },
          {
            "id": "H202-70-2",
            "name": "Redfish",
            "color": "#7d4a07",
            "orderMonth": null,
            "orderYear": null,
            "locationCategory": null,
            "purchaseLocation": null,
            "images": {
              "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
              "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
              "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": null,
            "price": "$229.00",
            "salePrice": null,
            "url": "#H202-70-2",
            "status": 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,
        "qty": 3,
        "total": "$447.00"
      },
      {
        "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": 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,
        "qty": 2,
        "total": "$438.00"
      },
      {
        "name": "KAWIKA",
        "summary": null,
        "description": null,
        "category": "Classic",
        "rating": [
          "star-full",
          "star-full",
          "star-full",
          "star-empty",
          "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": null,
            "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,
        "qty": 2,
        "total": "$598.00"
      }
    ]
  }
}
  • Content:
    .order__order-summary {
      position: relative;
      margin-bottom: 15px;
      padding: 10px;
      background: $color-lighter;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      strong {
        color: $color-darkest;
      }
    
      @include breakpoint($breakpoint-xl) {
        @include clearfix;
        position: static;
        height: auto;
      }
    }
    
    .order__order-date,
    .order__order-number,
    .order__order-shipping {
      display: block;
    
      @include breakpoint($breakpoint-md) {
        margin-right: 205px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 20%;
        margin: 0;
        float: left;
    
        strong {
          display: block;
        }
      }
    }
    
    .order__order-shipping {
      margin-top: 15px;
    
      strong {
        padding-right: .3em;
        float: left;
    
        @include breakpoint($breakpoint-md) {
          float: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 25%;
        margin: 0;
        float: left;
      }
    }
    
    .order__delivered,
    .order__track-delivery {
      display: block;
    
      @include breakpoint($breakpoint-md) {
        display: inline;
      }
    }
    
    .order__track-delivery {
      position: relative;
      transition: color .2s ease 0s;
      color: $color-darkest;
      text-decoration: none;
    
      .icon--arrow-right {
        position: absolute;
        top: 7px;
        right: 0;
        height: 6px;
      }
    
      @include breakpoint($breakpoint-md) {
        .icon--arrow-right {
          position: relative;
          top: -2px;
          right: unset;
        }
      }
    }
    
    .order__order-actions {
      @include breakpoint($breakpoint-md) {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        width: 185px;
        height: 100%;
        padding: 0 5px;
        float: right;
      }
    
      @include breakpoint($breakpoint-xl) {
        display: block;
        position: static;
        width: 35%;
        padding: 0;
        float: right;
        text-align: right;
      }
    }
    
    .order__view-details {
      height: 30px;
      line-height: 30px;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        margin: 20px auto 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        margin: 5px 0;
      }
    }
    
    .order__item {
      position: relative;
      padding: 5px 0 0;
      border-bottom: 1px solid $color-light;
    
      &:last-child {
        border-style: none;
    
        .order__item-line-item {
          padding-bottom: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 10px 0 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        display: flex;
        position: relative;
        justify-content: flex-start;
        min-height: 90px;
        padding: 15px 0;
      }
    }
    
    .order__item-summary {
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-xl) {
        flex-grow: 3;
        margin: 0;
        padding: 0;
      }
    }
    
    .order__item-link {
      text-decoration: none;
    
      @include breakpoint($breakpoint-md) {
        display: flex;
      }
    }
    
    .order__item-image-wrapper {
      max-width: 85px;
      height: auto;
      margin-right: 10px;
      float: left;
    
      @include breakpoint($breakpoint-md) {
        max-width: 115px;
        max-height: 45px;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        flex-grow: 1;
        max-width: 225px;
        float: none;
      }
    }
    
    .order__item-name {
      margin-bottom: 5px;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 35px;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
        margin: 13px 0;
        line-height: 1.9rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 0 0 10px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .order__item-info {
      display: none;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      &:not(:last-child)::after {
        width: 1px;
        margin: 0 1em;
        border-right: 1px solid $color-darkest;
        content: '';
      }
    
      strong {
        display: none;
      }
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
      }
    }
    
    .order__item-line-item {
      @include clearfix;
      width: 100%;
      padding: 0 10px 15px;
      clear: both;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        padding: 0 0 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        flex-grow: 2;
        max-width: 330px;
        height: auto;
        margin: 0;
        padding: 0;
      }
    }
    
    .order__item-qty,
    .order__item-price {
      width: 50%;
      float: left;
    
      @include breakpoint($breakpoint-xl) {
        line-height: 2.8rem;
      }
    }
    
    .order__item-qty {
      @include breakpoint($breakpoint-xl) {
        width: 30%;
      }
    }
    
    .order__item-price {
      @include breakpoint($breakpoint-xl) {
        width: 70%;
        white-space: nowrap;
      }
    }
    
    .order__item-tax {
      display: block;
      margin: -3px 0 0 1px;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
      }
    }
    
    .order__item-add-to-cart {
      float: right;
    
      @include breakpoint($breakpoint-md) {
        float: right;
      }
    }
    
    .order__item-add-to-cart,
    .order__item-remove {
      height: 30px;
      margin-bottom: 5px;
      line-height: 30px;
    
      @include breakpoint($breakpoint-md) {
        margin: 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 50px;
        line-height: 50px;
      }
    }
    
  • URL: /components/raw/order/order.scss
  • Filesystem Path: src/components/02-components/orders/order/order.scss
  • Size: 5.1 KB

There are no notes for this item.