Modal (.modal)

Syntax

<div class="modalOverlay">
    <div class="modal">
        <!-- wrap button or any other element in modal-close for positioning -->
        <div class="modal-close">
            <button>Close</button>
        </div>
        ...
    </div>
</div>

Modifiers

Configuration

$modal-overlay-background: rgba(0,0,0,.7);
$modal-overlay-padding: $baseline $gutter;
$modal-overlay-zIndex: 9;

$modal-background: $white;
$modal-padding: $baseline $gutter*2;
$modal-border-radius: $borderRadius;
$modal-shadow: 0 0 30px 5px rgba(0,0,0,.2);
$modal-minHeight: 200px;
$modal-minWidth: 400px;
$modal-maxWidth: 100%;