hkk Frontend 2017

Bühnen-Einschub (Schritte) 

<!-- 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-blue;
  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__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;

  .stage-insert-steps__list-item--active & {
    text-decoration: underline;
  }

  @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.