Dropdown

Simple implementation of CSS dropdown - doesn't require any JavaScript. Well you can use JavaScript for better compatibility.

<div class="dropdown">
    <button class="button has-dropdown-icon">Dropdown</button>
    <div class="dropdown-body">
        <div class="dropdown-body-text">Dropdown content</div>
    </div>
</div>

<div class="dropdown">
    <button class="button button-primary has-dropdown-icon">Dropdown menu</button>
    <div class="dropdown-body">
        <a class="dropdown-item" href="#">Some action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <span class="dropdown-item-sep"></span>
        <a class="dropdown-item" href="#">CSS dropdown without JS</a>
    </div>
</div>

Add active class to dropdown if you want to open it by default.

<div class="dropdown active"></div>

SASS

Reference from _dropdown.scss

$card-radius: rem(2);
$card-shadow: 0 rem(2) rem(5) 0 rgba(0,0,0, 0.08);
$card-header-footer-border: rem(1) solid lighten(map-get($colors, dark), 83%);
$card-header-footer-color: lighten(map-get($colors, dark), 40%);