Popover

This module helps you create popup layers that can contain different content.

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 #

Popover is a popup layer that appears above the content and can contain different HTML.


<div class="popover hidden">...</div>

Use the popover-dark modifier to show popover with dark appearance.


<div class="popover popover-dark hidden">...</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
--popover-background-color: var(--palette-white);
--popover-box-shadow: var(--shadow-300);

// vars
--popover-font-size: 16px;
--popover-line-height: var(--body-text-line);
--popover-border-radius: var(--radius-base);
--popover-level: var(--level-over-page);
--popover-width: 240px;