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
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
