Vechtsport Online Components for Magento 2

Shipping 

<div class="queue">
    <div class="queue__progress-bar flex">
        <div class="queue__item ordered justify-center items-center flex flex-col">
            <div class="queue__icon icon size-xxl flex justify-center items-center rounded active">
                <svg class="icon icon size-l" role="img">
                    <title>Bestelling Ontvangen</title>
                    <use xlink:href="/images/icons-sprite.svg#custom-box"></use>
                </svg>

            </div>
            <span class="queue__title">
                Bestelling Ontvangen
            </span>
        </div>
        <div class="queue__item warehouse justify-center items-center flex flex-col">
            <div class="queue__icon icon size-xxl flex justify-center items-center rounded active">
                <svg class="icon icon size-l" role="img">
                    <title>In Magazijn</title>
                    <use xlink:href="/images/icons-sprite.svg#custom-shop"></use>
                </svg>

            </div>
            <span class="queue__title">
                In Magazijn
            </span>
        </div>
        <div class="queue__item shipped justify-center items-center flex flex-col">
            <div class="queue__icon icon size-xxl flex justify-center items-center rounded active">
                <svg class="icon icon size-l" role="img">
                    <title>Verzonden</title>
                    <use xlink:href="/images/icons-sprite.svg#custom-van"></use>
                </svg>

            </div>
            <span class="queue__title">
                Verzonden
            </span>
        </div>
        <div class="queue__item delivered justify-center items-center flex flex-col">
            <div class="queue__icon icon size-xxl flex justify-center items-center rounded">
                <svg class="icon icon size-l" role="img">
                    <title>Bezorgd</title>
                    <use xlink:href="/images/icons-sprite.svg#custom-home"></use>
                </svg>

            </div>
            <span class="queue__title">
                Bezorgd
            </span>
        </div>
    </div>
</div>
 
<div class="queue">
    <div class="queue__progress-bar flex">
        {{#each queueItem}}
        <div class="{{ this.class }}">
            <div class="{{ this.iconClass }}">
                {{ render '@icon' this.icon }}
            </div>
            <span class="queue__title">
               {{ this.icon.title }}
           </span>
        </div>
        {{/each}}
    </div>
</div>
 
{
  "queueItem": [
    {
      "class": "queue__item ordered justify-center items-center flex flex-col",
      "iconClass": "queue__icon icon size-xxl flex justify-center items-center rounded active",
      "icon": {
        "id": "custom-box",
        "title": "Bestelling Ontvangen",
        "class": "icon size-l"
      }
    },
    {
      "class": "queue__item warehouse justify-center items-center flex flex-col",
      "iconClass": "queue__icon icon size-xxl flex justify-center items-center rounded active",
      "icon": {
        "id": "custom-shop",
        "title": "In Magazijn",
        "class": "icon size-l"
      }
    },
    {
      "class": "queue__item shipped justify-center items-center flex flex-col",
      "iconClass": "queue__icon icon size-xxl flex justify-center items-center rounded active",
      "icon": {
        "id": "custom-van",
        "title": "Verzonden",
        "class": "icon size-l"
      }
    },
    {
      "class": "queue__item delivered justify-center items-center flex flex-col",
      "iconClass": "queue__icon icon size-xxl flex justify-center items-center rounded",
      "icon": {
        "id": "custom-home",
        "title": "Bezorgd",
        "class": "icon size-l"
      }
    }
  ]
}
  • Content: 
    .queue {
    &__progress-bar {
        padding: 0 $spacer--xl;
    }
    &__item {
        width: 310px;
        position: relative;
        &:after {
            content: "";
            width: 255px;
            position: absolute;
            height: 5px;
            top: 25%;
            background: $color-primary;
            margin-right: -310px;
        }
        &.delivered {
            &:after {
                display: none;
            }
        }
    }
    &__icon {
        border: 1px solid $color-primary;
        background: $white;
        .icon {
            fill: $color-primary;
        }
        &.active {
            background: $color-primary;
            .icon {
                fill: $white;
            }
        }
    }
    &__title {
        padding-top: $spacer--extra-small;
        display: flex;
        color: $gray;
        font-size: 16px;
        font-family: $font-family-saira;
    }
}
  • URL: /components/raw/shipping/_shipping.scss
  • Filesystem Path: build/components/03-modules/shipping/_shipping.scss
  • Size: 930 Bytes

There are no notes for this item.