<div class="form-progress">
    <ul class="no-style">
        <li class="progress progress-previous">
            <a href="javascript:(void);" class="indicator">
          <span class='count'><i class="icon icon-check"></i></span>
          <span class="label">Step 1 title</span>
        </a>
        </li>
        <li class="progress progress-active">
            <a href="javascript:(void);" class="indicator">
          <span class='count'>2</span>
          <span class="label">Step 2 title</span>
        </a>
        </li>
        <li class="progress">
            <span class='count'>3</span>
            <span class="label">Step 3 title</span>
        </li>
        <li class="progress">
            <span class='count'>4</span>
            <span class="label">Step 4 title</span>
        </li>
        <li class="progress">
            <span class='count'>5</span>
            <span class="label">Step 5 title</span>
        </li>
        <li class="progress">
            <span class='count'>6</span>
            <span class="label">Step 6 title</span>
        </li>
        <li class="progress">
            <span class='count'>7</span>
            <span class="label">Step 7 title</span>
        </li>
    </ul>
</div>
<div class="form-progress">
  <ul class="no-style">
    {% if step1_title %}
      <li class="progress progress-previous">
        <a href="javascript:(void);" class="indicator">
          <span class='count'><i class="icon icon-check"></i></span>
          <span class="label">{{ step1_title|default('Step 1 title') }}</span>
        </a>
      </li>
    {% endif %}
    {% if step2_title %}
      <li class="progress progress-active">
        <a href="javascript:(void);" class="indicator">
          <span class='count'>2</span>
          <span class="label">{{ step2_title }}</span>
        </a>
      </li>
    {% endif %}
    {% if step3_title %}
      <li class="progress">
        <span class='count'>3</span>
        <span class="label">{{ step3_title }}</span>
      </li>
    {% endif %}
    {% if step4_title %}
      <li class="progress">
        <span class='count'>4</span>
        <span class="label">{{ step4_title }}</span>
      </li>
    {% endif %}
    {% if step5_title %}
      <li class="progress">
        <span class='count'>5</span>
        <span class="label">{{ step5_title }}</span>
      </li>
    {% endif %}
    {% if step6_title %}
      <li class="progress">
        <span class='count'>6</span>
        <span class="label">{{ step6_title }}</span>
      </li>
    {% endif %}
    {% if step7_title %}
      <li class="progress">
        <span class='count'>7</span>
        <span class="label">{{ step7_title }}</span>
      </li>
    {% endif %}
  </ul>
</div>
{
  "step1_title": "Step 1 title",
  "step2_title": "Step 2 title",
  "step3_title": "Step 3 title",
  "step4_title": "Step 4 title",
  "step5_title": "Step 5 title",
  "step6_title": "Step 6 title",
  "step7_title": "Step 7 title"
}
  • Content:
    .form-progress {
      @include themify {
        ul {
          &::before {
            background: $form-steps-timeline-color;
          }
        }
    
        .progress {
          color: $form-steps-inactive-step-label;
    
          &::before {
            border: 1.5px solid $form-steps-inactive-prefix-background;
            background: $form-steps-inactive-prefix-background;
            color: $form-steps-inactive-prefix-color;
          }
    
          &.progress-previous {
            .count {
              background-color: $form-steps-previous-step-background;
            }
    
            a.indicator {
              color: $form-steps-previous-step-label;
            }
    
            &.progress-active .count {
              border-color: $form-steps-active-prefix-background;
              background: $form-steps-active-prefix-background;
            }
    
            &.progress-active a.indicator {
              color: $form-steps-active-step-label;
            }
          }
        }
    
        .count {
          color: $form-steps-prefix-color;
        }
      }
    
    
      ul {
        display: flex;
        position: relative;
    
        @include tablet {
          display: block;
        }
    
        &::before {
          display: block;
          position: absolute;
          top: .75rem;
          right: 8%;
          left: 8%;
          height: .125rem;
          margin: auto;
          content: '';
    
          @include tablet {
            display: none;
          }
        }
      }
    
      li {
        @include no-link-style;
    
        @include tablet {
          display: block;
        }
    
        display: inline-block;
        position: relative;
        flex: 1;
        margin-bottom: 1em;
        font-size: 1.125rem;
        line-height: 2rem;
      }
    
      .progress {
        width: 1.8rem;
        height: 1.8rem;
        padding-left: 0;
        font-weight: bold;
    
        @include tablet {
          width: 100%;
          height: auto;
          padding-left: 3rem;
        }
    
        .label {
          display: none;
    
          @include tablet {
            display: block;
          }
        }
    
        &::before {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 1.875rem;
          height: 1.875rem;
          margin: auto;
          border-radius: 1.875rem;
          content: '';
    
          @include tablet {
            right: auto;
            margin: 0;
          }
        }
    
        &.progress-previous {
          .count i {
            margin-right: 0;
            font-size: .8rem;
            line-height: 1.6rem;
          }
    
          .count {
            border-radius: 100%;
            text-align: center;
            text-indent: 0;
          }
    
          a.indicator {
            display: block;
          }
        }
      }
    
      .indicator {
        display: block;
        position: relative;
        line-height: 1.8rem;
        text-indent: -9999px;
        z-index: 10;
    
        @include tablet {
          width: auto;
          text-indent: 0;
        }
    
        .count {
          left: 0;
          text-indent: 0;
    
          @include tablet {
            left: -3rem;
          }
        }
    
        .label {
          display: inline-block;
          text-indent: -9999px;
    
          @include tablet {
            display: block;
            text-indent: 0;
          }
        }
      }
    
      .count {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 1.875rem;
        height: 1.875rem;
        margin: auto;
        font-weight: bold;
        line-height: 1.8rem;
        text-align: center;
        z-index: 10;
    
        @include tablet {
          top: 0;
          right: auto;
          left: 0;
        }
      }
    }
    
  • URL: /components/raw/form-steps/_form-steps.scss
  • Filesystem Path: components/31-molecules/building-blocks/form-steps/_form-steps.scss
  • Size: 3.2 KB

There are no notes for this item.