Modal

This module helps to create modal windows.

Superkube contains only CSS/SCSS and does not contain Javascript. Because Superkube is independent of the implementation, you build the environment you need.

All the javascript is just for example and to show how the modules work.

Usage #

Here is an example of a modal and how it works.


<div class="modal hidden">
    <div class="modal-box">
        <div class="modal-head">
            ...
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-foot">
            <button class="button button-primary">Save</button>
            <button data-type="close" class="button">Close</button>
        </div>
    </div>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--modal-body-background-color: var(--palette-white);
--modal-box-shadow: var(--shadow-350);

// vars
--modal-level: var(--level-over-content);
--modal-border-radius: var(--radius-base);
--modal-close-size: 20px;