Shadows

Shadows are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation.

Elevations

$elevate-1

box-shadow:
0 1px 3px 0 palette(gray, 400),
0 1px 1px 0 palette(gray, 300),
0 2px 1px -1px palette(gray, 200)

$elevate-2

box-shadow:
0 1px 5px 0 palette(gray, 400),
0 2px 2px 0 palette(gray, 300),
0 3px 1px -2px palette(gray, 200);

$elevate-3

box-shadow:
0 1px 8px 0 palette(gray, 400),
0 3px 4px 0 palette(gray, 300),
0 3px 3px -2px palette(gray, 200)

$elevate-4

box-shadow:
0 2px 4px -1px palette(gray, 400),
0 4px 5px 0 palette(gray, 300),
0 1px 10px 0 palette(gray, 200)

$elevate-6

box-shadow:
0 3px 5px -1px palette(gray, 400),
0 6px 10px 0 palette(gray, 300),
0 1px 18px 0 palette(gray, 200)

$elevate-8

box-shadow:
0 5px 5px -3px palette(gray, 400),
0 8px 10px 1px palette(gray, 300),
0 3px 14px 2px palette(gray, 200)

$elevate-9

box-shadow:
0 5px 6px -3px palette(gray, 400),
0 9px 12px 1px palette(gray, 300),
0 3px 16px 2px palette(gray, 200)

$elevate-12

box-shadow:
0 7px 8px -4px palette(gray, 400),
0 12px 17px 2px palette(gray, 300),
0 5px 22px 4px palette(gray, 200)

$elevate-16

box-shadow:
0 8px 10px -5px palette(gray, 400),
0 16px 24px 2px palette(gray, 300),
0 6px 30px 5px palette(gray, 200)

$elevate-24

box-shadow:
0 11px 15px -7px palette(gray, 400),
0 24px 38px 3px palette(gray, 300),
0 9px 46px 8px palette(gray, 200)

Usage

Shadows Usage

Elevations Setting

The following section demonstrates how to set various elevations to elements.

Define the element that you want ot set a shadow on:

...
<div class="wrapper">
    <div class="elevation-sample">
        <p class="variable">
            $elevate-8
        </p>
        <pre class="formatter">
            <code class ="css">
                box-shadow:
                0 5px 5px -3px palette(gray, 400),
                0 8px 10px 1px palette(gray, 300),
                0 3px 14px 2px palette(gray, 200)
            </code>
                These are the default elevation colors            
        </pre>
    </div>
</div>

Then apply the igx-elevation to the scss class of the element:

    // First you have to import the utilities!
@import '~igniteui-angular/lib/core/styles/themes/utilities';

    //Apply the elevation level
.elevation-sample {
    box-shadow: igx-elevation($elevations, 8);
}

The result from the above code snippets is:

Now lets change the shadow color and the elevation level:

...
//Define the 3 elevation colors
$color-1: #99BFAA;
$color-2: #5C868D;
$color-3: #5C3D46; 

//Define the shadow elevations
$shadow-elevations: igx-elevations($color-1, $color-2, $color-3);

//Apply the custom shadow elevations and change the elevation level 
.elevation-sample {
   box-shadow: igx-elevation($shadow-elevations, 24);
}

And you get

API References