Shadow

Usage #

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

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

Custom #

Change

You can change the default shadow settings by overriding the value in $scales.

// =Scales
$scales: map-extend($scales, (
    shadow: (
        300: 0 10px 20px
    )
));

Add shadow

To add your shadow, you need to extend $scales by specifying the shadow level, it can be 50, 175, 400, 900 etc. Any value that matches your shadow. See also how to work with scales for modules.

// =Scales
$scales: map-extend($scales, (
    shadow: (
        400: 0 30px 80px
    )
));

Then, add the color of the new shadow by extending $colors. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    shadow: (
        default: (
            400: palette(black-o, 30)
        )
    )
));

As a result, Superkube will automatically generate the sh-400 class of new shadow.

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

Color #

Change

You can change the default shadow color by overriding its value in $colors.

// =Colors
$colors: map-extend($colors, (
    shadow: (
        default: (
            300: palette(black-o, 20)
        )
    )
));

Add color

Add the color by extending $colors. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    shadow: (
        accent: (
            300: rgba(palette(primary, base), .2)
        )
    )
));

As a result, Superkube will automatically generate a new shadow color with the -accent prefix.

<div class="sh-accent-300">...</div>

Turn off #

Use the sh-off class to turn off the shadow of the element.

<div class="item sh-off">...</div>

Responsive #

Use the sh-off-sm class to turn off the shadow of the element on small screens.

<div class="sh-300 sh-off-sm">...</div>

Use the suffix -sm to change the size of the shadow on small screens.

<div class="sh-300 sh-100-sm">...</div>

This also works with changing the shadow color to another on small screens. In the example below, the neutral shadow will become bluish on small screens.

<div class="sh-300 sh-accent-300-sm">...</div>