Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Stepper 

<!-- Default -->
<ol class="stepper">
    <li class="stepper__item ">
        <a href="#" title="Anwendung">
            Anwendung

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Rohr / Abmessung / Antriebsart">
            Rohr / Abmessung / Antriebsart

        </a>
    </li>
    <li class="stepper__item -active">
        <a href="#" title="Auswahl RAUTOOL">
            Auswahl RAUTOOL

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Ihr RAUTOOL">
            Ihr RAUTOOL

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Basket">
            Basket

        </a>
    </li>
</ol>


<!-- With Badge -->
<ol class="stepper">
    <li class="stepper__item ">
        <a href="#" title="Anwendung">
            Anwendung

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Rohr / Abmessung / Antriebsart">
            Rohr / Abmessung / Antriebsart

        </a>
    </li>
    <li class="stepper__item -active">
        <a href="#" title="Auswahl RAUTOOL">
            Auswahl RAUTOOL

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Ihr RAUTOOL">
            Ihr RAUTOOL

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Basket">
            Basket
            <span class=" badge ">5<i class="icon -basket"></i></span>

        </a>
    </li>
</ol>


<!-- With Active Badge -->
<ol class="stepper">
    <li class="stepper__item ">
        <a href="#" title="Anwendung">
            Anwendung

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Rohr / Abmessung / Antriebsart">
            Rohr / Abmessung / Antriebsart

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Auswahl RAUTOOL">
            Auswahl RAUTOOL

        </a>
    </li>
    <li class="stepper__item ">
        <a href="#" title="Ihr RAUTOOL">
            Ihr RAUTOOL

        </a>
    </li>
    <li class="stepper__item -active">
        <a href="#" title="Basket">
            Basket
            <span class=" badge ">5<i class="icon -basket"></i></span>

        </a>
    </li>
</ol>


<ol class="stepper">
  {{#each steps}}
    <li class="stepper__item {{#active}}-active{{/active}}">
      <a href="#" title="{{label}}">
        {{label}}
        {{#badge}}{{render '@atoms-badge' .}}{{/badge}}
      </a>
    </li>
  {{/each}}
</ol>
 
/* Default */
{
  "modifiers": null,
  "steps": [
    {
      "label": "Anwendung"
    },
    {
      "label": "Rohr / Abmessung / Antriebsart"
    },
    {
      "label": "Auswahl RAUTOOL",
      "active": true
    },
    {
      "label": "Ihr RAUTOOL"
    },
    {
      "label": "Basket"
    }
  ]
}


/* With Badge */
{
  "modifiers": null,
  "steps": [
    {
      "label": "Anwendung"
    },
    {
      "label": "Rohr / Abmessung / Antriebsart"
    },
    {
      "label": "Auswahl RAUTOOL",
      "active": true
    },
    {
      "label": "Ihr RAUTOOL"
    },
    {
      "label": "Basket",
      "badge": {
        "text": "5",
        "icon": "-basket"
      }
    }
  ]
}


/* With Active Badge */
{
  "modifiers": null,
  "steps": [
    {
      "label": "Anwendung"
    },
    {
      "label": "Rohr / Abmessung / Antriebsart"
    },
    {
      "label": "Auswahl RAUTOOL"
    },
    {
      "label": "Ihr RAUTOOL"
    },
    {
      "label": "Basket",
      "active": true,
      "badge": {
        "text": "5",
        "icon": "-basket"
      }
    }
  ]
}
  • Content: 
    .stepper {
  display: flex;
  padding: 0;
  list-style: none;
  color: $white;
  counter-reset: li;

  &__item {
    position: relative;
    flex-grow: 1;
    padding: 1.4rem;
    background-color: $black;

    counter-increment: li;

    .badge {
      margin-top: -1rem;
      margin-bottom: -1rem;
    }

    a {
      margin-left: 3rem;
      color: inherit;
      text-decoration: none;
      white-space: nowrap;
    }

    &:not(:first-child) {
      padding-left: 3.4rem;
    }

    &::before {
      $symbol: map-get($icons, 'tick');
      @include icon-content-extended($symbol);
      display: inline-block;
      width: 3rem;
      margin-right: -3rem;
      vertical-align: center;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 100%;
      z-index: 10;
      width: 0;
      height: 0;
      border-top: 2.6rem solid transparent;
      border-bottom: 2.6rem solid transparent;
      border-left: 1rem solid $black;
    }

    &.-active {
      background-color: $primary;

      &::before {
        content: counter(li);
        vertical-align: baseline;
        font-family: inherit;
      }

      &::after {
        border-left-color: $primary;
      }

      ~ li {
        background-color: $white;
        color: $black;

        &::before {
          content: counter(li);
          vertical-align: baseline;
          font-family: inherit;
        }

        &::after {
          border-left-color: $white;
        }
      }
    }
  }
}
  • URL: /components/raw/molecules-stepper/_stepper.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/20-stepper/_stepper.scss
  • Size: 1.5 KB

There are no notes for this item.