<div class="stage-insert-progress stage-insert-progress--step-2">
    <h1 class="headline stage-insert-progress__headline headline--headline-1">Jetzt Mitglied werden!
    </h1>
    <ul class="stage-insert-progress__list">
        <li class="stage-insert-progress__list-item stage-insert-progress__list-item--passed">
            <div class="stage-insert-progress__marker">
                <svg class="icon stage-insert-progress__marker-icon icon--checkmark" id="icon-8ec2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>
            </div>
            <div class="stage-insert-progress__title">Allgemeine Angaben</div>
        </li>
        <hr class="stage-insert-progress__divider" />
        <li class="stage-insert-progress__list-item stage-insert-progress__list-item--active">
            <div class="stage-insert-progress__marker">
                <svg class="icon stage-insert-progress__marker-icon icon--checkmark" id="icon-67a8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>
            </div>
            <div class="stage-insert-progress__title">Persönliche Daten</div>
        </li>
        <hr class="stage-insert-progress__divider" />
        <li class="stage-insert-progress__list-item">
            <div class="stage-insert-progress__marker">
                <svg class="icon stage-insert-progress__marker-icon icon--checkmark" id="icon-1fb3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark"></use>
</svg>
            </div>
            <div class="stage-insert-progress__title">Prüfen &amp; Abschließen</div>
        </li>
    </ul>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Active step
  attr.class.push(`stage-insert-progress--step-${activeStep}`);

//- Render stage insert
.stage-insert-progress&attributes(attr)
  //- Headline
  if headline
    != include('@headline--headline-1', { attr: { class: 'stage-insert-progress__headline' }, text: headline })

  //- Steps
  ul.stage-insert-progress__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-progress__list-item--passed');
          if (activeStep === stepIndex + 1) listItemAttr.class.push('stage-insert-progress__list-item--active');

        li.stage-insert-progress__list-item&attributes(listItemAttr)
          .stage-insert-progress__marker
            != include('@icon', {icon: 'checkmark', attr: {class: 'stage-insert-progress__marker-icon'}})

          .stage-insert-progress__title #{step.title}

        if stepIndex < steps.length - 1
          hr.stage-insert-progress__divider
{
  "headline": "Jetzt Mitglied werden!",
  "activeStep": 2,
  "steps": [
    {
      "title": "Allgemeine Angaben"
    },
    {
      "title": "Persönliche Daten"
    },
    {
      "title": "Prüfen & Abschließen"
    }
  ]
}
  • Content:
    .stage-insert-progress__headline {
      margin-bottom: $spacer * 2;
      text-align: center;
    
      @include mq($from: m) {
        font-size: 3.2rem;
      }
    }
    
    .stage-insert-progress__list {
      @include list-reset();
    
      display: flex;
      justify-content: space-between;
      user-select: none;
    }
    
    .stage-insert-progress__list-item {
      max-width: 10rem;
      text-align: center;
    }
    
    .stage-insert-progress__title {
      color: $color-steelgrey-dark;
      font-size: 1.3rem;
      font-weight: bold;
      line-height: 1.2;
    
      .stage-insert-progress__list-item--passed &,
      .stage-insert-progress__list-item--active & {
        color: $color-green-xdark;
      }
    }
    
    .stage-insert-progress__marker {
      align-items: center;
      border-radius: 50%;
      display: flex;
      height: 2.4rem;
      justify-content: center;
      margin: 0 auto;
      margin-bottom: 0.5rem;
      position: relative;
      width: 2.4rem;
    
      .stage-insert-progress__list-item--passed &,
      .stage-insert-progress__list-item--active & {
        background-color: $color-green-xdark;
        color: #fff;
      }
    }
    
    .stage-insert-progress__marker::after {
      background-color: $color-steelgrey-dark;
      border-radius: 50%;
      content: '';
      display: block;
      height: 1.2rem;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1.2rem;
    
      .stage-insert-progress__list-item--passed & {
        background-color: transparent;
      }
    
      .stage-insert-progress__list-item--active & {
        background-color: #fff;
      }
    }
    
    .stage-insert-progress__marker-icon {
      display: none;
      font-size: 1.4rem;
      position: relative;
      top: -0.15rem;
    
      .stage-insert-progress__list-item--passed & {
        display: inline-block;
      }
    }
    
    .stage-insert-progress__divider {
      border: 0;
      border-bottom: 2px dotted $color-steelgrey-dark;
      flex: 1;
      margin: 0;
      margin-left: -2rem;
      margin-right: -2rem;
      position: relative;
      top: 1.25rem;
    
      .stage-insert-progress__list-item--passed + & {
        border-bottom: 2px solid $color-green-xdark;
      }
    }
    
  • URL: /components/raw/stage-insert-progress/stage-insert-progress.scss
  • Filesystem Path: src/components/organisms/stage-insert-progress/stage-insert-progress.scss
  • Size: 1.9 KB

There are no notes for this item.