UCI

Nav arrow: Forward 

<div class="
    nav-arrow
    
    
">

    <svg class="icon icon-arrow-right     ">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
    </svg>

</div>
 
<div class="
    nav-arrow
    {{#if isLight}}nav-arrow_light{{/if}}
    {{#if isSmall}}nav-arrow_small{{/if}}
">
    {{#if isBack}}
        {{ render '@icon--arrow-left' }}
    {{/if}}

    {{#if isForward}}
        {{ render '@icon--arrow-right' }}
    {{/if}}
</div>
 
{
  "isForward": true
}
  • Content: 
    .nav-arrow {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s;

    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 40px;
        height: 40px;
        content: '';
    }

    .icon {
        display: block;
        width: 24px;
        height: 24px;
        fill: var(--color-accent);

        @media (--viewport-ms-min) {
            width: 16px;
            height: 16px;
        }
    }

    &_small {
        .icon {
            width: 16px;
            height: 16px;
        }
    }

    &_light {
        .icon {
            fill: var(--color-text-light);
        }
    }
}
  • URL: /components/raw/nav-arrow/nav-arrow.css
  • Filesystem Path: src/02-molecules/nav-arrow/nav-arrow.css
  • Size: 738 Bytes

No notes defined.