<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 xlink: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 xlink: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   : none !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: $gray-dark !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

There are no notes for this item.