<section class="order-summary" aria-labelledby="summary">
    <h2 class="order-summary__title" id="summary">
        Summary
    </h2>

    <div class="order-summary__details">
        <h3 class="order-summary__subtitle">
            Esimate Shipping and Tax
        </h3>

        <ul class="order-summary__list">
            <li class="order-summary__list-item">
                <span class="order-summary__label">
                    Subtotal
                </span>

                <span class="order-summary__value">
                    $159.95
                </span>
            </li>
            <li class="order-summary__list-item">
                <span class="order-summary__label">
                    TAX
                </span>

                <span class="order-summary__value">
                    $159.95
                </span>
            </li>
            <li>
                <hr class="order-summary__divider">
            </li>
            <li class="order-summary__list-item order-summary__total">
                <h2 class="order-summary__title-total">
                    Order Total
                </h2>

                <span class="order-summary__amount text-right">
                    $159.95
                </span>
            </li>
        </ul>
    </div>

    <button class="button button--fluid margin-bottom-m" type="button" aria-label="Click to go to checkout">
        Proceed to Checkout
    </button>

    <a class="button button--link order-summary__link" href="#" title="Check Out with Multiple Addresses">
        Check Out with Multiple Addresses
    </a>

</section>
<section class="order-summary" {{{ attributes }}}>
    {{ render '@heading' heading }}

    <div class="order-summary__details">
        {{ render '@heading' estimate }}

        <ul class="order-summary__list">
            {{#each items }}
                <li class="order-summary__list-item">
                    <span class="order-summary__label">
                        {{ label }}
                    </span>

                    <span class="order-summary__value">
                        {{ value }}
                    </span>
                </li>
            {{/each}}
            <li>
                <hr class="order-summary__divider">
            </li>
            <li class="order-summary__list-item order-summary__total">
                {{ render '@heading' total }}

                <span class="order-summary__amount text-right">
                    {{ amount }}
                </span>
            </li>
        </ul>
    </div>

    {{#if tab }}
        <div
            class="order-summary__tab active"
            data-collapsible="true"
            role="tablist"
        >
            <div
                class="order-summary__tab-title"
                data-role="title"
                role="tab"
                aria-selected="true"
                aria-expanded="true"
                tabindex="0"
            >
                <span class="order-summary__tab-text">
                    {{ tab.label }}
                </span>

                {{ render '@icon' tab.icon }}
            </div>

            {{#if tab.products }}
                <div
                    class="content order-summary__products"
                    data-role="content"
                    role="tabpanel"
                    aria-hidden="false"
                    style="display: block;"
                >
                    {{#each tab.products }}
                        <div class="order-summary__product-item">
                            {{ render '@image' img}}

                            <div class="order-summary__product-info">
                                <div class="order-summary__product-details">
                                    <div class="order-summary__product-name">
                                        {{ label }}
                                    </div>
                                    <div class="order-summary__product-qty">
                                        <span>{{ quantity.label }}</span>:
                                        <span>{{ quantity.value }}</span>
                                    </div>
                                </div>
                                <span class="price order-summary__product-price">
                                    {{ price }}
                                </span>
                            </div>
                        </div>
                    {{/each}}
                </div>
            {{/if}}
        </div>
    {{/if }}

    {{#if button }}
        {{ render '@button' button }}
    {{/if}}

    {{#if link }}
        {{ render '@button--link' link }}
    {{/if }}

    {{#if displayQuote }}
        {{ render '@quote-form' }}
    {{/if}}
</section>
{
  "heading": {
    "tag": "h2",
    "attributes": "id=\"summary\"",
    "text": "Summary",
    "class": "order-summary__title"
  },
  "attributes": "aria-labelledby=\"summary\"",
  "estimate": {
    "tag": "h3",
    "text": "Esimate Shipping and Tax",
    "class": "order-summary__subtitle"
  },
  "items": [
    {
      "label": "Subtotal",
      "value": "$159.95"
    },
    {
      "label": "TAX",
      "value": "$159.95"
    }
  ],
  "total": {
    "tag": "h2",
    "text": "Order Total",
    "class": "order-summary__title-total"
  },
  "amount": "$159.95",
  "button": {
    "tag": "button",
    "class": "button--fluid margin-bottom-m",
    "attributes": "type=\"button\" aria-label=\"Click to go to checkout\"",
    "text": "Proceed to Checkout"
  },
  "link": {
    "tag": "a",
    "class": "button--link order-summary__link",
    "attributes": "href=\"#\" title=\"Check Out with Multiple Addresses\"",
    "text": "Check Out with Multiple Addresses"
  }
}
  • Content:
    // Cart Summary
    $order-summary__padding                      : $spacer--semi-medium !default;
    $order-summary__background                   : $gray-lighter !default;
    $order-summary__margin                       : 0 0 $spacer--extra-large !default;
    
    // Title
    $order-summary__title-margin                 : 0 0 $spacer--medium !default;
    $order-summary__title-font-family            : $font-family-base !default;
    $order-summary__title-font-size              : $font-size-large !default;
    $order-summary__title-font-weight            : $font-weight-bold !default;
    $order-summary__title-text-transform         : none !default;
    $order-summary__title-total-margin           : 0 !default;
    $order-summary__title-total-font-family      : $font-family-base !default;
    $order-summary__title-total-font-size        : $font-size-large !default;
    $order-summary__title-total-font-weight      : $font-weight-bold !default;
    $order-summary__title-total-text-transform   : none !default;
    
    // Amount
    $order-summary__amount-margin                : 0 !default;
    $order-summary__amount-font-family           : $font-family-base !default;
    $order-summary__amount-font-size             : $font-size-large !default;
    $order-summary__amount-font-weight           : $font-weight-bold !default;
    $order-summary__amount-text-transform        : none !default;
    
    // Subtitle
    $order-summary__subtitle-margin              : 0 0 $spacer--medium !default;
    $order-summary__subtitle-font-family         : $font-family-base !default;
    $order-summary__subtitle-font-size           : $font-size-large !default;
    $order-summary__subtitle-font-weight         : $font-weight-base !default;
    $order-summary__subtitle-text-transform      : none !default;
    
    // List
    $order-summary__list-margin                  : 0 !default;
    $order-summary__list-padding                 : $spacer--medium 0 !default;
    $order-summary__list-border                  : $border-base !default;
    $order-summary__list-border-width            : 1px 0 0 0 !default;
    $order-summary__list-style                   : none !default;
    $order-summary__list-item-min-height         : 48px !default;
    $order-summary__label-font-size              : $font-size-medium !default;
    
    // Link
    $order-summary__link-padding                 : 0 !default;
    $order-summary__link-font-weight             : $font-weight-base !default;
    
    // Divider
    $order-summary__divider-margin               : $spacer--medium 0 !default;
    $order-summary__divider-border               : $border-base !default;
    $order-summary__divider-border-width         : 1px 0 0 !default;
    
    // Tab
    $order-summary__tab-title-padding            : $spacer--small 0 !default;
    $order-summary__tab-title-border-top         : $border-base !default;
    $order-summary__tab-title-border-bottom      : $border-base !default;
    $order-summary__tab-text-font-weight         : $font-weight-medium !default;
    $order-summary__tab-icon-width               : 14px !default;
    $order-summary__tab-icon-height              : 14px !default;
    $order-summary__tab-icon-transition          : $transition-base !default;
    
    // Products
    $order-summary__products-display             : block !default;
    $order-summary__product-item-padding         : $spacer--semi-medium 0 !default;
    $order-summary__product-item-border-bottom   : $border-base !default;
    $order-summary__product-image-height         : auto !default;
    $order-summary__product-image-width          : 64px !default;
    $order-summary__product-image-max-width      : 64px !default;
    $order-summary__product-image-margin-right   : $spacer !default;
    $order-summary__product-info-width           : 100% !default;
    $order-summary__product-details-padding-right: $spacer !default;
    $order-summary__product-name-font-size       : $font-size-base !default;
    $order-summary__product-name-font-weight     : $font-weight-base !default;
    $order-summary__product-qty-color            : $gray-dark !default;
    $order-summary__product-price-font-size      : $font-size-base !default;
    $order-summary__product-wrapper-width        : 100% !default;
    
  • URL: /components/raw/order-summary/_order-summary-variables.scss
  • Filesystem Path: build/components/Organisms/order-summary/_order-summary-variables.scss
  • Size: 4 KB
  • Content:
    @import 'order-summary-variables';
    
    .order-summary {
        padding: $order-summary__padding;
        background-color: $order-summary__background;
        margin: $order-summary__margin;
    
        &__title {
            margin: $order-summary__title-margin;
            font-family: $order-summary__title-font-family;
            font-size: $order-summary__title-font-size;
            font-weight: $order-summary__title-font-weight;
            text-transform: $order-summary__title-text-transform;
        }
    
        &__title-total {
            margin: $order-summary__title-total-margin;
            font-family: $order-summary__title-total-font-family;
            font-size: $order-summary__title-total-font-size;
            font-weight: $order-summary__title-total-font-weight;
            text-transform: $order-summary__title-total-text-transform;
        }
    
        &__amount {
            margin: $order-summary__amount-margin;
            font-family: $order-summary__amount-font-family;
            font-size: $order-summary__amount-font-size;
            font-weight: $order-summary__amount-font-weight;
            text-transform: $order-summary__amount-text-transform;
        }
    
        &__subtitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: $order-summary__subtitle-margin;
            font-family: $order-summary__subtitle-font-family;
            font-size: $order-summary__subtitle-font-size;
            font-weight: $order-summary__subtitle-font-weight;
            text-transform: $order-summary__subtitle-text-transform;
            cursor: pointer;
        }
    
        &__list {
            margin: $order-summary__list-margin;
            padding: $order-summary__list-padding;
            border: $order-summary__list-border;
            border-width: $order-summary__list-border-width;
            list-style: $order-summary__list-style;
        }
    
        &__list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: $order-summary__list-item-min-height;
    
            &--secondary {
                justify-content: flex-start;
            }
        }
    
        &__label,
        &__value {
            font-size: $order-summary__label-font-size;
        }
    
        &__link {
            padding: $order-summary__link-padding;
            font-weight: $order-summary__link-font-weight;
        }
    
        &__divider {
            margin: $order-summary__divider-margin;
            border: $order-summary__divider-border;
            border-width: $order-summary__divider-border-width;
        }
    
        &__list-column {
            display: flex;
            flex-direction: column;
        }
    
        .active {
            .shipping-estimation__title-icon {
                transform: rotate(180deg);
            }
        }
    
        &__tab {
            &.active {
                .order-summary__tab-icon {
                    transform: rotate(180deg);
                }
            }
        }
    
        &__tab-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: $order-summary__tab-title-padding;
            border-top: $order-summary__tab-title-border-top;
            border-bottom: $order-summary__tab-title-border-bottom;
            cursor: pointer;
        }
    
        &__tab-text {
            font-weight: $order-summary__tab-text-font-weight;
        }
    
        &__tab-icon {
            width: $order-summary__tab-icon-width;
            height: $order-summary__tab-icon-height;
            transition: $order-summary__tab-icon-transition;
        }
    
        &__products {
            display: $order-summary__products-display;
        }
    
        &__product-item {
            display: flex;
            padding: $order-summary__product-item-padding;
            border-bottom: $order-summary__product-item-border-bottom;
        }
    
        &__product-image {
            height: $order-summary__product-image-height;
            width: $order-summary__product-image-width;
            max-width: $order-summary__product-image-max-width;
            margin-right: $order-summary__product-image-margin-right;
        }
    
        &__product-info {
            display: flex;
            justify-content: space-between;
            width: $order-summary__product-info-width;
        }
    
        &__product-wrapper {
            width: $order-summary__product-wrapper-width;
        }
    
        &__product-details {
            padding-right: $order-summary__product-details-padding-right;
        }
    
        &__product-name {
            font-size: $order-summary__product-name-font-size;
            font-weight: $order-summary__product-name-font-weight;
        }
    
        &__product-qty {
            color: $order-summary__product-qty-color;
        }
    
        &__product-price {
            font-size: $order-summary__product-price-font-size;
        }
    
        &__dropdown-list {
            background-color: $order-summary__background;
    
            .dropdown-list__label {
                background-color: $order-summary__background;
            }
        }
    }
    
  • URL: /components/raw/order-summary/_order-summary.scss
  • Filesystem Path: build/components/Organisms/order-summary/_order-summary.scss
  • Size: 4.7 KB

No notes defined.