hkk Frontend 2017

Bühnen-Einschub (Fortschritt) 

<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-123a" 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-72c6" 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-b21b" 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
  if steps
    ul.stage-insert-progress__list
      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.