colette/src/styl/_components/_navbar.styl

A CSS and JS starter kit for 20 Minutes web projects

// Navbar
//
// Display a navigation bar at the top of the page.
// Colette comes with a [headroom.js](http://wicky.nillia.ms/headroom.js/) dependency to handle navbar show/hide behavior on scroll.
//
// Markup: navbar.twig
//
// Styleguide: Components.navbar
/:root
/[data-theme=light]
/[data-theme] [data-theme=light]
    --navbar-brand-color var(--color-theme-default)

/[data-theme=dark]
/[data-theme] [data-theme=dark]
    --navbar-brand-color $color-white

.navbar
    {clearfix}
    position fixed
    top 0
    z-index: $zIndex.layout
    width 100%
    height _rem(48px)
    box-shadow 0 _rem(2px) _rem(4px) _rem(-2px) rgba($color-black, .5)
    background-color var(--color-bg-primary)

    ul
        height inherit
        list-style none
        margin 0
        padding 0

        a
            _p(0 1.5)
            color var(--color-base)
            display flex
            background-color transparent
            transition background-color .2s

            svg
                width 1.5em
                height @width
                margin auto

            span
                margin auto

            &:hover
                background-color var(--color-bg-secondary)

    li
        float left
        height inherit
        display flex

    &-brand
        _p(0 .5)
        float left
        height inherit
        color var(--navbar-brand-color)
        display flex
        background-color transparent
        transition background-color .2s

        svg
            width 2.2em
            height @width
            margin auto

        &:hover
            background-color var(--color-bg-base)