Menu

No notes defined.

<nav class=" menu">
    <ul class="menu__list">
        <li class="menu__item">
            <a class="menu__link" href=""><span>Sit a</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Amet voluptas?</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Sit exercitationem?</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Dolor magni</span></a>
        </li>
    </ul>
</nav>
  • Content:
    .menu {
        display: flex;
        flex-flow: column nowrap;
    
        &__list {
            @include no-bullets;
        }
    
        &__item {
            margin-bottom: 0;
        }
    
        &__link {
            margin-bottom: 0;
            display: block;
            padding: $thin-padding;
            transition: color $fade-easing var(--duration-fast), background-color $fade-easing var(--duration-fast);
    
            &:hover {
                background-color: $blue-100;
                color: $blue-600;
            }
        }
    }
    
  • URL: /components/raw/menu/menu.scss
  • Filesystem Path: resources/styles/atoms/menu/menu.scss
  • Size: 472 Bytes