UCI

States: Progress Active 

<div class="states active progress">
    <label class="label-m" for="">En curso</label>
    <h3 class="
        title-m
        
        
        
        
    ">1 Solicitud</h3>
    <div class="
    bodycopy-s
    
    
    
    
">

        Es el primer paso, has elegido tu hipoteca y quieres una financiación a medida. Empieza el camino.

    </div>
    <span class="triangle"></span>
</div>
 
<div class="states{{#if active}} active{{/if}}{{#if progress}} progress{{/if}}{{#if complete}} complete{{/if}}{{#if error}} error{{/if}}">
{{> @label-m label }}
{{> @title-m title }}
{{> @bodycopy-s text }}
{{#if error}}<span class="border-triangle"></span>{{/if}}
{{#if active}}<span class="triangle"></span>{{/if}}
</div>
 
{
  "title": {
    "text": "1 Solicitud"
  },
  "text": {
    "text": "Es el primer paso, has elegido tu hipoteca y quieres una financiación a medida. Empieza el camino."
  },
  "label": {
    "text": "En curso"
  },
  "progress": true,
  "active": true
}
  • Content: 
    .states {
    background-color: var(--color-grey-light);
    position: relative;
    margin-bottom: 24px;
    padding: 45px 24px 24px;

    .title-m,
    .bodycopy-s {
        color: var(--color-grey2);
    }

    .bodycopy-s {
        margin-top: 8px;
    }

    .label-m {
        background-color: var(--color-gray-20);
        padding: 6.5px 10px;
        position: absolute;
        top: 0;
        right: 0;
    }

    &.active {
        background-color: var(--color-secondary-brand);

        .title-m,
        .bodycopy-s {
            color: var(--color-white);
        }

        span.triangle {
            position: absolute;
            bottom: -24px;
            left: 0;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 24px 24px 0 0;
            border-color: var(--color-secondary-brand) transparent transparent transparent;
            transform: rotate(0deg);
        }
    }

    &.progress {
        .label-m {
            background-color: var(--color-background-accent);
            color: var(--color-text-accent);
        }
    }

    &.complete {
        .label-m {
            background-color: var(--color-icon-success);
            color: var(--color-white);
        }
    }

    &.error {
        background-color: var(--color-background-error);
        -webkit-box-shadow: inset 0 0 0 1px var(--color-text-error);
        -moz-box-shadow: inset 0 0 0 1px var(--color-text-error);
        box-shadow: inset 0 0 0 1px var(--color-text-error);
        .title-m,
        .bodycopy-s {
            color: var(--color-text);
        }

        .label-m {
            background-color: var(--color-text-error);
            color: var(--color-white);
        }
    }

    &.active.error {

        span.triangle {
            position: absolute;
            bottom: -23px;
            left: 1px;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 24px 23px 0 0;
            border-color: var(--color-background-error) transparent transparent transparent;
            transform: rotate(0deg);
            z-index: 2;
        }

        span.border-triangle {
            z-index: 1;
            bottom: -24px;
            --b: 1px;
            width: 24px;
            height: 24px;
            aspect-ratio: 1;
            clip-path: polygon(0 0, 100% 0, 0 100%, 0 0, var(--b) var(--b), var(--b) calc(100% - var(--b)/tan(22.5deg)), calc(100% - var(--b)/tan(22.5deg)) var(--b), var(--b) var(--b));
            background:  var(--color-text-error);
            position: absolute;
            left:0;
        }
    }
}
  • URL: /components/raw/states/states.css
  • Filesystem Path: src/06-adhoc/tramitacion/molecules/states/states.css
  • Size: 2.7 KB

No notes defined.