GDL - Global Design Language

Stepper 

<div class="c-stepper  u-relative u-overflow-x-auto u-mb-large">
    <div class="c-stepper__line u-size-full u-absolute u-left"></div>
    <ul class="u-flex u-row u-justify-between u-p-none u-m-none u-nowrap u-list-none u-z-base">

        <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

            <span class="u-label-11">1</span>

        </li>

        <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

            <span class="u-label-11">2</span>

        </li>

        <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

            <span class="u-label-11">3</span>

        </li>

        <li class="c-stepper__element  o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

            <span class="u-label-11">4</span>

        </li>

    </ul>
</div>
 
{% if steps > '2' %}
<div class="c-stepper {% if numberless %}c-stepper--numberless{% endif %} u-relative u-overflow-x-auto u-mb-large">
  <div class="c-stepper__line u-size-full u-absolute u-left"></div>
  <ul class="u-flex u-row u-justify-between u-p-none u-m-none u-nowrap u-list-none u-z-base">
    {% for i in range(1,steps) %}
      <li class="c-stepper__element {% if i <= active %}c-stepper__element--active{% endif %} o-link-primary u-flex u-items-center u-justify-center u-z-undercover">
        {% if not numberless %}
        <span class="u-label-11">{{i}}</span>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
{% endif %}
 
{
  "steps": 5,
  "active": 3
}
  • Content: 
    // Name:            stepper
// Description:     Navigate throgh list of items
//
// Component:       `c-stepper`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

// Variables
// ========================================================================



// ========================================================================

.c-stepper {
  --stepper-item-size: 2rem;
  --stepper-line: 2px;

  &.c-stepper--numberless ul {
    gap: 2px;
  }

  &__element {
    min-width: var(--stepper-item-size);
    height: var(--stepper-item-size);
    border: var(--stepper-line) solid var(--link-color-primary);
    border-radius: 50%;
    background-color: var(--background-color);

    .c-stepper--numberless & {
      --stepper-item-size: 4px;
      width: 100%;
      border: none;
      border-radius: 0;
      background-color: $ui-04;
    }
    
    &--active {
      background-color: var(--link-color-primary);
      color: $inverse-01;
      
      .c-stepper--numberless & {
        background-color: var(--link-color-primary);
      }
    }

    
  }

  &__line{
    top: 50%;
    height: var(--stepper-line);
    background: $interactive-01;

    .c-stepper--numberless & {
      --stepper-line: 4px;
      top: 0;
      background-color: $ui-01;
    }
  }
}
  • URL: /components/raw/stepper/stepper.scss
  • Filesystem Path: src/lib/components/stepper/stepper.scss
  • Size: 1.4 KB

No notes defined.