<!-- Step 1 -->
<div class="stage-insert-steps">
    <ul class="stage-insert-steps__list">
        <li class="stage-insert-steps__list-item stage-insert-steps__list-item--active">
            <h3 class="stage-insert-steps__headline">1</h3>
            <div class="stage-insert-steps__title">Allgemeine Angaben</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">2</h3>
            <div class="stage-insert-steps__title">Wechselinfos</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">3</h3>
            <div class="stage-insert-steps__title">Persönliche Daten</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">4</h3>
            <div class="stage-insert-steps__title">Prüfen &amp; Abschließen</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
    </ul>
</div>

<!-- Step 2 -->
<div class="stage-insert-steps">
    <ul class="stage-insert-steps__list">
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">1</h3>
            <div class="stage-insert-steps__title">Allgemeine Angaben</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item stage-insert-steps__list-item--active">
            <h3 class="stage-insert-steps__headline">2</h3>
            <div class="stage-insert-steps__title">Wechselinfos</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">3</h3>
            <div class="stage-insert-steps__title">Persönliche Daten</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">4</h3>
            <div class="stage-insert-steps__title">Prüfen &amp; Abschließen</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
    </ul>
</div>

<!-- Step 3 -->
<div class="stage-insert-steps">
    <ul class="stage-insert-steps__list">
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">1</h3>
            <div class="stage-insert-steps__title">Allgemeine Angaben</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">2</h3>
            <div class="stage-insert-steps__title">Wechselinfos</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item stage-insert-steps__list-item--active">
            <h3 class="stage-insert-steps__headline">3</h3>
            <div class="stage-insert-steps__title">Persönliche Daten</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">4</h3>
            <div class="stage-insert-steps__title">Prüfen &amp; Abschließen</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
    </ul>
</div>

<!-- Step 4 -->
<div class="stage-insert-steps">
    <ul class="stage-insert-steps__list">
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">1</h3>
            <div class="stage-insert-steps__title">Allgemeine Angaben</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">2</h3>
            <div class="stage-insert-steps__title">Wechselinfos</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item">
            <h3 class="stage-insert-steps__headline">3</h3>
            <div class="stage-insert-steps__title">Persönliche Daten</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
        <li class="stage-insert-steps__list-item stage-insert-steps__list-item--active">
            <h3 class="stage-insert-steps__headline">4</h3>
            <div class="stage-insert-steps__title">Prüfen &amp; Abschließen</div>
            <div class="stage-insert-steps__marker">
                <div class="stage-insert-steps__marker-inner"></div>
            </div>
        </li>
    </ul>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-steps&attributes(attr)
  //- Steps
  ul.stage-insert-steps__list
    if steps
      each step, stepIndex in steps
        -
          //- List item attributes
          listItemAttr = {};
          listItemAttr.class = classList(listItemAttr.class);

          //- Active state
          if (activeStep === stepIndex + 1) listItemAttr.class.push('stage-insert-steps__list-item--active');

        li.stage-insert-steps__list-item&attributes(listItemAttr)
          h3.stage-insert-steps__headline #{step.label}
          .stage-insert-steps__title #{step.title}
          .stage-insert-steps__marker: .stage-insert-steps__marker-inner
/* Step 1 */
{
  "steps": [
    {
      "label": 1,
      "title": "Allgemeine Angaben"
    },
    {
      "label": 2,
      "title": "Wechselinfos"
    },
    {
      "label": 3,
      "title": "Persönliche Daten"
    },
    {
      "label": 4,
      "title": "Prüfen & Abschließen"
    }
  ],
  "activeStep": 1
}

/* Step 2 */
{
  "steps": [
    {
      "label": 1,
      "title": "Allgemeine Angaben"
    },
    {
      "label": 2,
      "title": "Wechselinfos"
    },
    {
      "label": 3,
      "title": "Persönliche Daten"
    },
    {
      "label": 4,
      "title": "Prüfen & Abschließen"
    }
  ],
  "activeStep": 2
}

/* Step 3 */
{
  "steps": [
    {
      "label": 1,
      "title": "Allgemeine Angaben"
    },
    {
      "label": 2,
      "title": "Wechselinfos"
    },
    {
      "label": 3,
      "title": "Persönliche Daten"
    },
    {
      "label": 4,
      "title": "Prüfen & Abschließen"
    }
  ],
  "activeStep": 3
}

/* Step 4 */
{
  "steps": [
    {
      "label": 1,
      "title": "Allgemeine Angaben"
    },
    {
      "label": 2,
      "title": "Wechselinfos"
    },
    {
      "label": 3,
      "title": "Persönliche Daten"
    },
    {
      "label": 4,
      "title": "Prüfen & Abschließen"
    }
  ],
  "activeStep": 4
}

  • Content:
    $stage-insert-steps-marker-size: 20px;
    
    .stage-insert-steps {
      background-color: #fff;
      padding: 2rem 1rem;
    
      @include mq($from: m) {
        padding: 3rem 1rem;
      }
    }
    
    .stage-insert-steps__list {
      @include list-reset();
    
      border-bottom: 1px solid $color-steelgrey-light;
      display: flex;
      padding-bottom: 2.5rem;
      user-select: none;
    }
    
    .stage-insert-steps__list-item {
      color: $color-steelgrey-dark;
      flex-grow: 1;
      padding: 0 1rem;
      position: relative;
      text-align: center;
      transition: color $default-transition-duration;
    
      &:not(:last-child) {
        border-right: 1px solid $color-steelgrey-light;
      }
    
      @include mq($from: m) {
        padding-bottom: 1rem;
      }
    }
    
    .stage-insert-steps__list-item--active {
      color: $color-blue;
    }
    
    .stage-insert-steps__headline {
      font-size: 2.3rem;
      margin-bottom: 0.5rem;
      margin-top: -0.5rem;
    
      @include mq($from: m) {
        font-size: 5rem;
        margin-bottom: 0;
      }
    }
    
    .stage-insert-steps__title {
      font-size: 1.1rem;
    
      @include mq($from: m) {
        font-size: 1.5rem;
      }
    }
    
    .stage-insert-steps__marker {
      border-bottom: $stage-insert-steps-marker-size solid transparent;
      border-left: $stage-insert-steps-marker-size solid $color-steelgrey-light;
      border-top: $stage-insert-steps-marker-size solid transparent;
      bottom: -5.5rem;
      height: 0;
      left: calc(50% - #{$stage-insert-steps-marker-size} / 2);
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      position: absolute;
      transform: rotate(90deg);
      transition: opacity $default-transition-duration;
      width: 0;
    
      .stage-insert-steps__list-item--active & {
        opacity: 1;
      }
    }
    
    .stage-insert-steps__marker-inner {
      border-bottom: ($stage-insert-steps-marker-size - 1) solid transparent;
      border-left: ($stage-insert-steps-marker-size - 1) solid #fff;
      border-top: ($stage-insert-steps-marker-size - 1) solid transparent;
      left: -$stage-insert-steps-marker-size;
      position: relative;
      top: -($stage-insert-steps-marker-size - 1);
      width: 0;
    }
    
  • URL: /components/raw/stage-insert-steps/stage-insert-steps.scss
  • Filesystem Path: src/components/organisms/stage-insert-steps/stage-insert-steps.scss
  • Size: 2 KB

There are no notes for this item.