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.