Close

Usage #

To show a close icon, you need to place a span tag with the close class in an element.

<span class="close"></span>

Close icon is built-in to the Superkube as a font, so that the icon takes on the color and font-weight of the element.

<span class="label">Label <span class="close"></span></span>
<span class="label label-dark">Label <span class="close"></span></span>

<div class="alert alert-error">
    <span class="close" data-type="close"></span>
    ...
</div>

Variants #

In Superkube you can easily create module modifiers, which will be automatically generated from the variables. See also how to work with variants for modules.

To add a new variant of the module, extend $variants and specify variants with any CSS properties.

// =Variants
$variants: map-extend($variants, (
    close: (
        large: (
            font-size: 32px
        )
    )
));

In this case Superkube will automatically generate the close-large class, with the properties specified in the variables. Now you have a modifier, with which you can quickly add or change the appearance of the module.

<span class="close close-large"></span>