Shadow

Base #

Superkube generates shadow classes based on $colors and $shadows maps. Here is how it looks by default:

// Color
$colors: (
    shadow: (
        neutral: (
            100: (
                1: rgba(palette(black), .15),
                2: rgba(palette(black), .06)
            ),
            200: (
                1: rgba(palette(black), .12),
                2: rgba(palette(black), .06)
            ),
            300: rgba(palette(black), .2)
        )
    )
);

// Size and style
$shadows: (
    100: (
        1: 0 1px 3px,
        2: 0 1px 2px
    ),
    200: (
        1: 0 10px 15px -3px,
        2: 0 4px 6px -2px
    ),
    300: 0 20px 50px -12px
);

As a result Superkube will generate such classes for neutral shadows:

• sh-100
• sh-200
• sh-300

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

You can create your own color and shadow size, for example:

// Color
$colors: (
    shadow: (
        neutral: (
            100: (
                1: rgba(palette(black), .15),
                2: rgba(palette(black), .06)
            ),
            200: (
                1: rgba(palette(black), .12),
                2: rgba(palette(black), .06)
            ),
            300: rgba(palette(black), .2),
            400: rgba(palette(black), .15)
        ),
        accent: (
            100: (
                1: rgba(palette(negative, dark), .15),
                2: rgba(palette(negative, dark), .06)
            ),
            200: (
                1: rgba(palette(negative, dark), .12),
                2: rgba(palette(negative, dark), .06)
            ),
            300: rgba(palette(negative, dark), .2),
            400: rgba(palette(negative, dark), .15)
        )
    )
 );

// Size and style
$shadows: (
    ...
    400: 0 24px 60px
    ...
);

Superkube will generate classes with new shadow color and new sizes:

• sh-accent-100
• sh-accent-200
• sh-accent-300
• sh-accent-400

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

Helper #

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

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

Behavior on small screens #

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

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

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

<div class="sh-200 sh-100-sm">...</div>
<div class="sh-accent-100 sh-accent-400-sm">...</div>