Alpaca components for Magento 2

Shipping Information 

<div class="shipping-information">
    <div class="ship-to">
        <div class="shipping-information__title">
            <span class="shipping-information__title-text">
                Ship To:
            </span>

            <button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
                <svg class="icon button__icon" role="img">
                    <title>Arrow left</title>
                    <use href="/images/icons-sprite.svg#edit"></use>
                </svg>

            </button>

        </div>

        <div class="shipping-information__content">
            John Doe<br>
            ul. Mostowa 11<br>
            Poznań, <span>Armed Forces Africa</span> 60-688<br>
            United States<br>
            <a href="tel:887887887">887887887</a><br>
        </div>
    </div>
    <div>
        <div class="shipping-information__title">
            <span class="shipping-information__title-text">
                Shipping Method:
            </span>

            <button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
                <svg class="icon button__icon" role="img">
                    <title>Arrow left</title>
                    <use href="/images/icons-sprite.svg#edit"></use>
                </svg>

            </button>

        </div>
        <div class="shipping-information__content">
            <span class="value">
                Free Shipping - Free
            </span>
        </div>
    </div>
</div>
 
<div class="shipping-information">
    <div class="ship-to">
        <div class="shipping-information__title">
            <span class="shipping-information__title-text">
                Ship To:
            </span>

            {{ render '@button--icon' button }}
        </div>

        <div class="shipping-information__content">
            John Doe<br>
            ul. Mostowa 11<br>
            Poznań, <span>Armed Forces Africa</span> 60-688<br>
            United States<br>
            <a href="tel:887887887">887887887</a><br>
        </div>
    </div>
    <div>
        <div class="shipping-information__title">
            <span class="shipping-information__title-text">
                Shipping Method:
            </span>

            {{ render '@button--icon' button }}
        </div>
        <div class="shipping-information__content">
            <span class="value">
                Free Shipping - Free
            </span>
        </div>
    </div>
</div>
 
{
  "button": {
    "tag": "button",
    "class": "shipping-information__button",
    "text": "",
    "icon": {
      "id": "edit",
      "title": "Arrow left",
      "class": "button__icon"
    },
    "attributes": "type=\"button\" aria-label=\"click to do something\""
  }
}
  • Content: 
    $shipping-information__margin                 : $spacer--large 0 !default;
$shipping-information__padding                : 0 $spacer--medium $spacer--medium !default;
$shipping-information__title-margin           : 0 0 $spacer--large 0 !default;
$shipping-information__title-border           : $border-base !default;
$shipping-information__title-border-width     : 0 0 $border-width-base 0 !default;
$shipping-information__title-text-align-self  : center !default;
$shipping-information__title-text-transform   : uppercase !default;
$shipping-information__title-text-font-size   : $font-size-large !default;
$shipping-information__title-text-font-weight : $font-weight-normal !default;
$shipping-information__content-line-height    : $font-line-height !default;
$shipping-information__content-margin         : 0 0 $spacer--large 0 !default;
$shipping-information__content-font-size      : $font-size-base !default;
$shipping-information__button-icon-fill--hover: $white !default;
$shipping-information__button-icon-fill       : $gray-dark !default;

.shipping-information {
    margin: $shipping-information__margin;
    padding: $shipping-information__padding;

    &__title {
        display: flex;
        justify-content: space-between;
        margin: $shipping-information__title-margin;
        border: $shipping-information__title-border;
        border-width: $shipping-information__title-border-width;
    }

    &__title-text {
        align-self: $shipping-information__title-text-align-self;
        text-transform: $shipping-information__title-text-transform;
        font-size: $shipping-information__title-text-font-size;
        font-weight: $shipping-information__title-text-font-weight;
    }

    &__content {
        line-height: $shipping-information__content-line-height;
        margin: $shipping-information__content-margin;
        font-size: $shipping-information__content-font-size;
    }

    &__button {
        &:focus,
        &:hover {
            .icon {
                fill: $shipping-information__button-icon-fill--hover;
            }
        }

        .icon {
            fill: $shipping-information__button-icon-fill;
        }
    }
}
  • URL: /components/raw/shipping-information/_shipping-information.scss
  • Filesystem Path: build/components/Organisms/checkout/shipping-information/_shipping-information.scss
  • Size: 2.2 KB

No notes defined.