UCI

Breadcrumbs: Hipotecas Light 

<ul class="
    breadcrumbs
    breadcrumbs_light
">
    <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="#">
            <div class="breadcrumbs__label">
                <div class="text-label-m">Home</div>
            </div>
        </a>
    </li>
    <li class="breadcrumbs__item">
        <div class="breadcrumbs__label inactive">
            <div class="text-label-m">inmobiliarios</div>
        </div>
    </li>
</ul>
 
<ul class="
    breadcrumbs
    {{#if isLight}}breadcrumbs_light{{/if}}
">
    {{#each breadcrumb}}
        <li class="breadcrumbs__item">
            {{#if this.href}}
                <a class="breadcrumbs__link" href="{{this.href}}">
                    <div class="breadcrumbs__label">
                        {{> @text-label-m this.label }}
                    </div>
                </a>
            {{else}}
                <div class="breadcrumbs__label inactive">
                    {{> @text-label-m this.label }}
                </div>
            {{/if}}
        </li>
    {{/each}}
</ul>
 
{
  "breadcrumb": [
    {
      "href": "#",
      "label": {
        "text": "Home"
      }
    },
    {
      "label": {
        "text": "inmobiliarios"
      }
    }
  ],
  "isLight": true
}
  • Content: 
    .breadcrumbs {
    display: flex;
    flex-wrap: wrap;

    &__item {
        display: flex;

        &::after {
            display: block;
            padding: 0 5px;
            font-family: 'Jornada Sans Medium';
            text-transform: uppercase;
            font-size: 10px;
            font-weight: normal;
            line-height: 20px;
            letter-spacing: 1.2px;
            color: var(--color-accent);
            content: "/";

            @media (--viewport-lg-min) {
                font-size: 12px;
                /*line-height: 22px; Se desalinea con el volver en el ancho completo header (CA)*/
            }
        }

        &:last-child {
            &::after {
                content: none;
            }
            .inactive{ /*la ellipsis se aprecia dentro del componente ancho completo header (CA)*/
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                .text-label-m {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    &__link {
        display: block;
        .text-label-m{
            color: var(--color-accent);
            &.text-label-m_color_light{
                color: var(--color-white);
            }
        }


        &:hover,
        &:focus {
            .breadcrumbs__label {
                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                span,
                div {
                    color: var(--color-accent-dark);
                }
            }
        }
    }

    &__label {
        &.inactive {
            display: block;
            .text-label-m{
                color: var(--color-accent-dark);
            }
        }

        span {
            transition: all 0.3s;
        }
    }

    &_light {
        .breadcrumbs {
            &__item {
                &::after {
                    color: var(--color-text-light);
                }
            }

            &__link {
                &:hover,
                &:focus {
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6,
                    span,
                    div {
                        color: rgba(255, 255, 255, 0.6);
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.css
  • Filesystem Path: src/02-molecules/breadcrumbs/breadcrumbs.css
  • Size: 2.5 KB

No notes defined.