Shadow

Shadow property is used to layer the components on a screen. It’s used primary for components such as Navigation, Modal and Card, but can be applied to any other component.

Specifications

// Default

$shadow-default-offset-x               : unit(0);
$shadow-default-offset-y               : unit(0);
$shadow-default-blur                   : unit(0.5);
$shadow-default-color                  : palette(cg1);
$shadow-default-alpha                  : 0.24;

// Lifted

$shadow-lifted-offset-x                : 0;
$shadow-lifted-offset-y                : unit(0.25);
$shadow-lifted-blur                    : 1;
$shadow-default-color                  : palette(cg1);
$shadow-lifted-alpha                   : 0.16;

// Elevated

$shadow-elevated-offset-x              : 0;
$shadow-elevated-offset-y              : unit(2);
$shadow-elevated-blur                  : unit(6);
$shadow-default-color                  : palette(cg1);
$shadow-elevated-alpha                 : 0.24;

// Examples
%shadow { ... }
%shadow-lifted { ... }
%shadow-elevated { ... }