UCI

Prequalifier form steps: Hipotecas Example Step 1 Active 

<div class="prequalifier-form-steps">
    <ul>
        <li class="step1 active"></li>
        <li class="step2"></li>
        <li class="step3"></li>
    </ul>
</div>
 
<div class="prequalifier-form-steps">
    <ul>
        <li class="step1{{#if step1isActive}} active{{/if}}"></li>
        <li class="step2{{#if step2isActive}} active{{/if}}"></li>
        <li class="step3{{#if step3isActive}} active{{/if}}"></li>
    </ul>
</div>
 
{
  "step1isActive": true
}
  • Content: 
    .prequalifier-form-steps {margin-bottom: 40px;
    ul{display: flex;flex-direction: row;flex-wrap: nowrap;
        li{background-color:var(--color-quinary);width: 33%; height:5px; margin: 10px 0 10px 20px;
            &.active{background-color:var(--color-accent-dark);}
            &:first-child{margin-left: 0;}
        }
    }
}
div#step1{
    .prequalifier-form-steps {
        ul{
            li:first-child{background-color:var(--color-accent-dark);
            }
        }
    }  
}
div#step2{
    .prequalifier-form-steps {
        ul{
            li:nth-child(2n){background-color:var(--color-accent-dark);
            }
        }
    }  
}
div#step3{
    .prequalifier-form-steps {
        ul{
            li:nth-child(3n){background-color:var(--color-accent-dark);
            }
        }
    }  
}
  • URL: /components/raw/prequalifier-form-steps/prequalifier-form-steps.css
  • Filesystem Path: src/02-molecules/prequalifier-form-steps/prequalifier-form-steps.css
  • Size: 809 Bytes

No notes defined.