UCI

Prequalifier form steps on top: Active 

<div class="prequalifier-form-steps-on-top">
    <ul class="prequalifier-form-steps-on-top-list">
        <li class="prequalifier-form-steps-on-top-item active">
            <span class="prequalifier-form-steps-on-top-step">
                <span class='always-visible'>01</span> Datos de tu hipoteca
            </span>
        </li>
        <li class="prequalifier-form-steps-on-top-item">
            <span class="prequalifier-form-steps-on-top-step">
                <span class='always-visible'>02</span> Titulares de la hipoteca
            </span>
        </li>
        <li class="prequalifier-form-steps-on-top-item">
            <span class="prequalifier-form-steps-on-top-step">
                <span class='always-visible'>03</span> Datos de contacto
            </span>
        </li>
    </ul>
</div>
 
<div class="prequalifier-form-steps-on-top">
    <ul class="prequalifier-form-steps-on-top-list">
        {{#each step}}
            <li class="prequalifier-form-steps-on-top-item{{#if isActive}} active{{/if}}">
                <span class="prequalifier-form-steps-on-top-step">
                    {{{ this.text }}}
                </span>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "step": [
    {
      "text": "<span class='always-visible'>01</span> Datos de tu hipoteca",
      "isActive": true
    },
    {
      "text": "<span class='always-visible'>02</span> Titulares de la hipoteca"
    },
    {
      "text": "<span class='always-visible'>03</span> Datos de contacto"
    }
  ]
}
  • Content: 
    .prequalifier-form-steps-on-top {
    width: 100%;
    text-align: right;
    margin-bottom: 50px;
    @media (--viewport-xs-max) {
        margin-left:-10px;
        margin-right:0;
        width: calc(100% + 20px);
    }

    &-list {
        display: inline-flex;

        @media (--viewport-xs-max) {
            display: flex;
        }
    }

    &-item {
        display: flex;
        align-items: center;
        padding: 14px 26px;
        background-color: var(--color-accent-dark)B3;

        &.active {
            background-color: var(--color-accent-dark);

            /*@media (--viewport-xs-max) {
                flex-grow: 1;
            }

            .steps-header__steps-step {
                font-family: 'Jornada Sans Regular';
                font-size: 16px;
                line-height: 24px;
                color: var(--color-text);
            }*/
        }

        /*&:first-child {
            @media (--viewport-xs-max) {
                padding-right: 20px;
                padding-left: 20px;
            }
        }*/
    }

    &-step {
        /*font-family: 'Jornada Sans Regular'; Suprimo esta fuente porque no existe en las variables */
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        color: var(--color-text-light);
    }
}


div#step1{
    .prequalifier-form-steps-on-top{
        &-item:first-child{background-color: var(--color-accent-dark);
            @media (--viewport-xs-max) {
                flex-grow: 1;
            }
        }
        &-item:nth-child(2n){background-color: var(--color-accent-dark)CC; 
            span{font-size: 0;
                span{font-size: 16px;line-height: 24px; top:2px; position:relative;}
            }
        }
        &-item:nth-child(3n){background-color: var(--color-accent-dark)B3; 
            span{font-size: 0;
                span{font-size: 16px;line-height: 24px; top:2px; position:relative;}
            }
        }
    }
}
div#step2{
    .prequalifier-form-steps-on-top{
        &-item:first-child, &-item:nth-child(3n){background-color: var(--color-accent-dark)CC; 
            span{font-size: 0;
                span{font-size: 16px;line-height: 24px; top:2px; position:relative;}
            }
        }
        &-item:nth-child(2n){background-color: var(--color-accent-dark);
            @media (--viewport-xs-max) {
                flex-grow: 1;
            }
        }
    }
}
div#step3{
    .prequalifier-form-steps-on-top{
        &-item:first-child{background-color: var(--color-accent-dark)B3; 
            span{font-size: 0;
                span{font-size: 16px;line-height: 24px; top:2px; position:relative;}
            }
        }
        &-item:nth-child(2n){background-color: var(--color-accent-dark)CC; 
            span{font-size: 0;
                span{font-size: 16px;line-height: 24px; top:2px; position:relative;}
            }
        }
        &-item:nth-child(3n){background-color: var(--color-accent-dark);
            @media (--viewport-xs-max) {
                flex-grow: 1;
            }
        }
    }
}
  • URL: /components/raw/prequalifier-form-steps-on-top/prequalifier-form-steps-on-top.css
  • Filesystem Path: src/02-molecules/prequalifier-form-steps-on-top/prequalifier-form-steps-on-top.css
  • Size: 3.1 KB

No notes defined.