UCI

Steps nav__list: One Line 

<div class="steps-nav__list oneLine">
    <ul>
        <li class="steps-nav__list-item oneLine active" data-index="01">
            <div>
                <div>
                    <span class="number-step"><span class="title-M
        
        
        ">1/2</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                    <span class="title-step"><span class="title-M
        
        
        ">Datos de tu hipoteca</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                </div>
                <!-- TODO: Usar referencias a otros componentes -->
                <span class="link link_back">
                    <svg class="icon icon-16_chevron-left">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
                        </use>
                    </svg>
                    <span>Volver atrás</span>
                </span>
            </div>
        </li>
        <li class="steps-nav__list-item oneLine" data-index="02">
            <div>
                <div>
                    <span class="number-step"><span class="title-M
        
        
        ">2/2</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                    <span class="title-step"><span class="title-M
        
        
        ">Datos de contacto</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                </div>
                <!-- TODO: Usar referencias a otros componentes -->
                <span class="link link_back">
                    <svg class="icon icon-16_chevron-left">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
                        </use>
                    </svg>
                    <span>Volver atrás</span>
                </span>
            </div>
        </li>
    </ul>
</div>
 
<div class="steps-nav__list{{#if oneLine}} oneLine{{/if}}{{#if fixed}} sticky{{/if}}{{#if fixed}} sticky{{/if}}{{#if noText}} no-text{{/if}}">
    <ul{{#if isAutoWidth}} class="auto-width" {{/if}}>
        {{#each steps}}
        {{#if oneLine}}
        <li class="steps-nav__list-item oneLine{{#if isActive}} active{{/if}}" data-index="{{data-index}}">
            <div>
                <div>
                    <span class="number-step">{{> @title number-step}}</span>
                    <span class="title-step">{{> @title title-step}}</span>
                </div>
                <!-- TODO: Usar referencias a otros componentes -->
                <span class="link link_back">
                    <svg class="icon icon-16_chevron-left">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
                        </use>
                    </svg>
                    <span>Volver atrás</span>
                </span>
                {{#if link-back}}
                {{> @link link-back}}
                {{/if}}
            </div>
        </li>
        {{else}}
        <li class="steps-nav__list-item {{#if isDisabled}}disabled{{/if}} {{#if isActive}}active{{/if}} {{#if isSuccess}}success{{/if}} {{#if isReject}}reject{{/if}}"
            data-index="{{data-index}}">
            <span class="steps-nav__list-item-step">
                <span class="state">
                    {{#if isReject}}{{render '@icon--16-feedback-error'}}{{/if}}
                    {{#if isSuccess}}{{render '@icon--16-feedback-success'}}{{/if}}
                </span>
                <span class="sequence">{{{ this.sequence }}}</span>
                {{#if text}}<span class="text {{{ this.visibility }}}">{{{ this.text }}}</span>{{/if}}
            </span>
        </li>
        {{/if}}
        {{/each}}
    </ul>
    {{#if oneLine}}
    {{else}}
    {{#if breadcrumb-steps}}<div class="steps-nav__breadcrumb">{{> @bodycopy-l breadcrumb-steps}}</div>{{/if}}
    {{/if}}
</div>
 
{
  "breadcrumb-steps": {
    "colorDark": true,
    "text": "<p><span data-step='1'>1</span>/<span data-total=''>2</span>: <span data-subtitle='' class='subtitle'>Personal information</span></p>"
  },
  "link-back": {
    "href": "#",
    "text": "Volver atrás",
    "icon-before": {
      "name": "16_chevron-left",
      "isBefore": true
    }
  },
  "steps": [
    {
      "oneLine": true,
      "isActive": true,
      "data-index": "01",
      "number-step": {
        "type": "-M",
        "text": "1/2"
      },
      "title-step": {
        "type": "-M",
        "text": "Datos de tu hipoteca"
      }
    },
    {
      "oneLine": true,
      "data-index": "02",
      "number-step": {
        "type": "-M",
        "text": "2/2"
      },
      "title-step": {
        "type": "-M",
        "text": "Datos de contacto"
      }
    }
  ],
  "oneLine": true
}
  • Content: 
    .steps-nav__list {
  ul {
    display: flex;
    flex-flow: nowrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: scroll;
    scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox*/
    -ms-overflow-style: none; /* Hide the scrollbar in IE and Edge*/

    &::-webkit-scrollbar {
      display: none; /* Hide the scrollbar in Chromium */
    }
    &.auto-width {
      .steps-nav__list-item {
        width: auto;
        flex-basis: auto;
      }
    }
    .steps-nav__list-item {
      padding: var(--gutter-vertical) var(--gutter-width-ms-min);
      width: 100%;
      min-width: max-content;
      height: 50px;
      justify-content: center;
      align-items: center;
      color: var(--color-text);
      cursor: pointer;
      background-color: var(--color-background-disabled);
      &.success {
        background-color: var(--color-background-disabled);
        .state {
          display: flex;
          .icon {
            fill: var(--success-100);
          }
        }
      }
      &.reject {
        background-color: var(--color-background-error);
        color: var(--color-text-error);
        .state {
          display: flex;
          .icon {
            fill: var(--color-icon-error);
          }
        }
      }
      &.active {
        background-color: var(--color-background-accent-bolder);
        color: var(--color-white);
        .state {
          background-color: var(--color-white);
          .icon {
            fill: var(--color-accent-dark);
          }
        }
        &.success {
          background-color: var(--color-accent-dark);
          color: var(--color-white);
          .state {
            background-color: var(--color-white);
            display: flex;
            .icon {
              fill: var(--color-accent-dark);
            }
          }
        }
        &.reject {
          background-color: var(--color-danger);
          color: var(--color-white);
          .state {
            background-color: var(--color-white);
            display: flex;
            .icon {
              fill: var(--color-error);
            }
          }
        }
      }
      &.disabled {
        opacity: 0.7;
        &:hover {
          cursor: default;
        }
      }
      &-step {
        display: flex;
        flex-flow: nowrap;
        justify-content: center;
        .state {
          display: none;
        }
        .state {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          transition: border-color 0.3s;
          position: relative;
          flex-flow: wrap;
          justify-content: center;
          align-items: center;
          margin-right: var(--half-gutter-width);

          .icon {
            fill: var(--color-white);
          }
        }
        .sequence + .text {
          margin-left: calc(var(--half-gutter-width) * 0.5);
        }
        @media (--viewport-sm-max) {
          .sequence {
            margin-left: 0;
            display: flex;
          }
          .text {
            display: none;
            &.visibility {
              display: flex;
            }
          }
        }
      }
    }
  }
  .steps-nav__breadcrumb {
    display: flex;
    flex-flow: nowrap;
    justify-content: center;
    align-content: center;
    padding: var(--gutter-md-vertical) var(--gutter-width);
  }

  &.oneLine {
    margin: 66px 0 40px;
    @media (--viewport-sm-max) {
      margin: 32px 0 24px;
    }
    &.sticky {
      @media (--viewport-ms-max) {
        padding: 32px 30px 0;
        margin: 0 -30px 24px;
        width: calc(100% + 60px);

        &.sticking {
          box-shadow: 0 25px 20px 0 rgba(0, 0, 0, 0.1);
          background-color: white;
          z-index: 13;

          .mobile-menu-is-open & {
            z-index: 0;
          }
        }
      }
      @media (--viewport-xs-max) {
        width: calc(100% + 40px);
        padding: 32px 20px 0;
        margin: 0 -20px 24px;

        .menu-tab-content & {
          width: calc(100% + 80px);
          padding: 32px 20px 0;
          margin: 0 -40px 24px;
        }
      }
    }
    .steps-nav__list-item {
      padding: 0 0 16px;
      height: auto;
      justify-content: flex-start;
      background-color: transparent;
      color: var(--color-text-error);
      display: none;

      & > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      &:first-child {
        span.link {
          visibility: hidden;
        }
      }

      .number-step {
        margin-right: 20px;
      }

      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5) {
        background-color: transparent;
      }
      &.active {
        background-color: transparent;
        color: var(--color-text-error);
        display: block;
      }
    }

    @media (--viewport-ms-max) {
      &.sticky {
        position: sticky;
      }
    }
  }
}

.steps-nav__in-step {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 30px;
  width: 100%;

  .btn {
    padding-left: 50px;
    padding-right: 50px;
  }
}
  • URL: /components/raw/steps-nav__list/steps-nav__list.css
  • Filesystem Path: src/02-molecules/steps-nav__list/steps-nav__list.css
  • Size: 5.2 KB

No notes defined.