Alpaca components for Magento 2

Steps 

<div class="steps">
    <div class="steps__line">
        <div class="steps__status steps__status--4">
        </div>
    </div>
    <ul class="steps__list">
        <li class="
                    steps__item
                    steps__item--completed
                " data-number="1" data-label="1. Processing">
            <span class="steps__circle">
                <span class="steps__icon">
                </span>
            </span>
        </li>
        <li class="
                    steps__item
                    steps__item--failed
                " data-number="2" data-label="2. Approved">
            <span class="steps__circle">
                <span class="steps__icon">
                </span>
            </span>
        </li>
        <li class="
                    steps__item
                    steps__item--failed
                " data-number="3" data-label="3. Delivered">
            <span class="steps__circle">
                <span class="steps__icon">
                </span>
            </span>
        </li>
        <li class="
                    steps__item
                    steps__item--completed
                " data-number="4" data-label="4. Completed">
            <span class="steps__circle">
                <span class="steps__icon">
                </span>
            </span>
        </li>
    </ul>
</div>
 
<div class="steps">
    <div class="steps__line">
        <div class="steps__status {{ statusClass }}">
        </div>
    </div>
    <ul class="steps__list">
        {{#each steps }}
            <li
                class="
                    steps__item
                    {{ class }}
                "
                {{{ attributes }}}
            >
                <span class="steps__circle">
                    <span class="steps__icon">
                    </span>
                </span>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "statusClass": "steps__status--4",
  "steps": [
    {
      "class": "steps__item--completed",
      "attributes": "data-number=\"1\" data-label=\"1. Processing\""
    },
    {
      "class": "steps__item--failed",
      "attributes": "data-number=\"2\" data-label=\"2. Approved\""
    },
    {
      "class": "steps__item--failed",
      "attributes": "data-number=\"3\" data-label=\"3. Delivered\""
    },
    {
      "class": "steps__item--completed",
      "attributes": "data-number=\"4\" data-label=\"4. Completed\""
    }
  ]
}
  • Content: 
    $steps__margin                      : $spacer--semi-large $spacer--semi-large $spacer--extra-large !default;

$steps__line-width                  : 100% !default;
$steps__line-border                 : 2px $border-style-base $border-color-base !default;

$steps__status-border               : 2px $border-style-base $blue !default;
$steps__status-width--1             : 33% !default;
$steps__status-width--2             : 66% !default;
$steps__status-width--3             : 100% !default;

$steps__circle-size                 : 20px !default;
$steps__circle-bg                   : $gray !default;

$steps__list-width                  : 100% !default;
$steps__list-padding                : 0 !default;

$steps__item-after-content          : attr(data-label) !default;
$steps__item-after-top              : 32px !default;
$steps__item-after-white-space      : nowrap !default;

$steps__circle-bg--failed           : $color-error !default;
$steps__circle-bg--completed        : $blue !default;

$steps__icon-size--failed           : 12px !default;
$steps__icon-after-height--failed   : 12px !default;
$steps__icon-after-width--failed    : 2px !default;
$steps__icon-bg--failed             : $white !default;

$steps__item-before-content--checked: attr(data-number) !default;
$steps__item-before-z-index--checked: 1 !default;
$steps__item-before-color--checked  : $white !default;

$steps__circle-size--checked        : 30px !default;

%check-icon {
    top: -1px;
    transform: rotate(45deg);
    height: 10px;
    width: 7px;
    border-bottom: 2px $border-style-base $white;
    border-right: 2px $border-style-base $white;
}
  • URL: /components/raw/steps/_steps-variables.scss
  • Filesystem Path: build/components/Organisms/steps/_steps-variables.scss
  • Size: 1.6 KB
  • Content: 
    @import 'steps-variables';

.steps {
    position: relative;
    display: flex;
    align-items: center;
    margin: $steps__margin;

    &__line {
        position: absolute;
        width: $steps__line-width;
        border-bottom: $steps__line-border;
    }

    &__status {
        position: absolute;
        border-bottom: $steps__status-border;

        &--1 {
            width: $steps__status-width--1;
        }

        &--2 {
            width: $steps__status-width--2;
        }

        &--3,
        &--4 {
            width: $steps__status-width--3;
        }
    }

    &__circle {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: $steps__circle-size;
        height: $steps__circle-size;
        border-radius: $steps__circle-size;
        background: $steps__circle-bg;
    }

    &__icon {
        position: relative;
    }

    &__list {
        display: flex;
        justify-content: space-between;
        width: $steps__list-width;
        padding: $steps__list-padding;
        list-style: none;
    }

    &__item {
        display: flex;
        justify-content: center;
        align-items: center;

        &:after {
            position: absolute;
            content: $steps__item-after-content;
            top: $steps__item-after-top;
            white-space: $steps__item-after-white-space;
        }

        &--completed {
            .steps__icon {
                @extend %check-icon;
            }
        }

        &--failed {
            .steps__circle {
                background: $steps__circle-bg--failed;
            }

            .steps__icon {
                width: $steps__icon-size--failed;
                height: $steps__icon-size--failed;

                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    height: $steps__icon-after-height--failed;
                    width: $steps__icon-after-width--failed;
                    background: $steps__icon-bg--failed;
                }

                &:before {
                    transform: rotate(45deg);
                }

                &:after {
                    transform: rotate(-45deg);
                }
            }
        }

        &--checked {
            &:before {
                position: absolute;
                content: $steps__item-before-content--checked;
                z-index: $steps__item-before-z-index--checked;
                color: $steps__item-before-color--checked;
            }

            .steps__circle {
                width: $steps__circle-size--checked;
                height: $steps__circle-size--checked;
            }
        }

        &--checked,
        &--completed {
            .steps__circle {
                background: $steps__circle-bg--completed;
            }
        }
    }
}
  • URL: /components/raw/steps/_steps.scss
  • Filesystem Path: build/components/Organisms/steps/_steps.scss
  • Size: 3.1 KB

No notes defined.