Shadow

Usage #

Superkube has several levels of shadows by default. Use the shadow-{size} class to set the element's shadow.

<div class="shadow-100"></div>
<div class="shadow-150"></div>
<div class="shadow-200"></div>
<div class="shadow-250"></div>
<div class="shadow-300"></div>
<div class="shadow-350"></div>

Variables #

Superkube automatically generates shadow variants as global css variables that you can use in your custom CSS/SCSS. The shadow variants are generated based on the values specified in $colors map. See more about Colors.

All shadow variables begin with the --shadow prefix.

--shadow-100
--shadow-150
--shadow-200
--shadow-250
--shadow-300
--shadow-350

You can use variables in your CSS/SCSS code like this:

.my-module {
    box-shadow: var(---shadow-200);
}

Extend #

You can add your own shadow or change existing one. To do this, extend $colors map with a new shadow variant or modify an existing one. See more about how to extend the colors of the framework.

// =Colors
$colors: map-extend($colors, (
    shadow: (
        300: 0 10px 20px -4px var(--palette-black-40),
        400: 0 30px 80px -15px var(--palette-black-30)
    )
));

As a result, the default shadow 300 will get a new value, and the new shadow-400 modifier can be used in HTML:

<div class="shadow-400">...</div>

The framework will also automatically create a new global shadow variable that you can use in your CSS/SCSS:

.my-module {
    box-shadow: var(--shadow-400);
}