colette/src/styl/_components/_dropDown.styl

A CSS and JS starter kit for 20 Minutes web projects

// Dowpdown
//
// Dropdown menu
//
// Markup: ./dropDown.twig
//
// Styleguide: Components.Dowpdown
.dropDown
    display inline-block
    position relative

    &-btn
        svg use
            visibility hidden

        &[aria-expanded=false]
            svg use.down
                visibility visible

        &[aria-expanded=true]
            svg use.up
                visibility visible

    &-content
        _m(.25 0)
        min-width 100%
        position absolute
        top 100%
        left 0
        border 1px solid var(--color-borders)
        border-radius _rem(5px)
        background var(--color-bg-primary)
        box-shadow _rem(1px) _rem(4px) _rem(7px) _rem(-4px) rgba($color-black, .5)
        z-index: $zIndex.overlay

        [aria-expanded=false] + &
            display none

        [aria-expanded=true] + &
            display block