Alpaca components for Magento 2

Order Summary: Checkout 

<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>

    <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">
                1 Item in Cart
            </span>

            <svg class="icon order-summary__tab-icon" role="img">
                <use href="/images/icons-sprite.svg#angle-down"></use>
            </svg>

        </div>

        <div class="content order-summary__products" data-role="content" role="tabpanel" aria-hidden="false" style="display: block;">
            <div class="order-summary__product-item">
                <div class="lazyload-wrapper order-summary__product-image">
                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                </div>

                <div class="order-summary__product-info">
                    <div class="order-summary__product-details">
                        <div class="order-summary__product-name">
                            Simple product oh this is such a loooong name 1
                        </div>
                        <div class="order-summary__product-qty">
                            <span>Quantity</span>:
                            <span>1</span>
                        </div>
                    </div>
                    <span class="price order-summary__product-price">
                        $100
                    </span>
                </div>
            </div>
            <div class="order-summary__product-item">
                <div class="lazyload-wrapper order-summary__product-image">
                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                </div>

                <div class="order-summary__product-info">
                    <div class="order-summary__product-details">
                        <div class="order-summary__product-name">
                            Simple product oh this is such a loooong name 1
                        </div>
                        <div class="order-summary__product-qty">
                            <span>Quantity</span>:
                            <span>3</span>
                        </div>
                    </div>
                    <span class="price order-summary__product-price">
                        $100000
                    </span>
                </div>
            </div>
        </div>
    </div>

</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": false,
  "link": false,
  "class": "order-summary--checkout",
  "tab": {
    "label": "1 Item in Cart",
    "icon": {
      "id": "angle-down",
      "class": "order-summary__tab-icon"
    },
    "products": [
      {
        "label": "Simple product oh this is such a loooong name 1",
        "price": "$100",
        "quantity": {
          "label": "Quantity",
          "value": 1
        },
        "img": {
          "src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
          "dataSrc": "/images/banner/banner-480_480.png",
          "alt": "Simple product oh this is such a loooong name 1",
          "wrapperClass": "order-summary__product-image",
          "attributes": "width=\"78\" height=\"78\""
        }
      },
      {
        "label": "Simple product oh this is such a loooong name 1",
        "price": "$100000",
        "quantity": {
          "label": "Quantity",
          "value": 3
        },
        "img": {
          "src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
          "dataSrc": "/images/banner/banner-480_480.png",
          "alt": "Simple product oh this is such a loooong name 1",
          "wrapperClass": "order-summary__product-image",
          "attributes": "width=\"78\" height=\"78\""
        }
      }
    ]
  }
}
  • 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.