Shadows
Shadows are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation.
Elevations
Level 1
box-shadow:
0 1px 3px 0 palette(gray, 400),
0 1px 1px 0 palette(gray, 300),
0 2px 1px -1px palette(gray, 200)
Level 2
box-shadow:
0 1px 5px 0 palette(gray, 400),
0 2px 2px 0 palette(gray, 300),
0 3px 1px -2px palette(gray, 200);
Level 3
box-shadow:
0 1px 8px 0 palette(gray, 400),
0 3px 4px 0 palette(gray, 300),
0 3px 3px -2px palette(gray, 200)
Level 4
box-shadow:
0 2px 4px -1px palette(gray, 400),
0 4px 5px 0 palette(gray, 300),
0 1px 10px 0 palette(gray, 200)
Level 6
box-shadow:
0 3px 5px -1px palette(gray, 400),
0 6px 10px 0 palette(gray, 300),
0 1px 18px 0 palette(gray, 200)
Level 8
box-shadow:
0 5px 5px -3px palette(gray, 400),
0 8px 10px 1px palette(gray, 300),
0 3px 14px 2px palette(gray, 200)
Level 9
box-shadow:
0 5px 6px -3px palette(gray, 400),
0 9px 12px 1px palette(gray, 300),
0 3px 16px 2px palette(gray, 200)
Level 12
box-shadow:
0 7px 8px -4px palette(gray, 400),
0 12px 17px 2px palette(gray, 300),
0 5px 22px 4px palette(gray, 200)
Level 16
box-shadow:
0 8px 10px -5px palette(gray, 400),
0 16px 24px 2px palette(gray, 300),
0 6px 30px 5px palette(gray, 200)
Level 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
How to add elevations?
The following section demonstrates how to set elevation to a component. In the example, we are using the card component.
Firs apply the igx-elevation to the card by doing the following
$myCard: igx-card-theme(
$resting-shadow: igx-elevation($elevations, 10)
);
@include igx-card($myCard);
// This compiles to
.igx-card {
box-shadow:
0 6px 6px -3px rgba(0, 0, 0, 0.26),
0 10px 14px 1px rgba(0, 0, 0, 0.12),
0 4px 18px 3px rgba(0, 0, 0, 0.08);
}
As you can see the shadow is produced according to the material guidelines.
To change the shadows colors use the igx-elevations function to override the defaults:
...
// Define the 3 elevation colors
$color-1: rgb(153, 191, 170); // Umbra
$color-2: rgb(92, 134, 141); // Penumbra
$color-3: rgb(92, 61, 70); // Ambient
// Use igx-elevations to generate sass maps for all three
// box-shadows with the costume colors
$elevations-color: igx-elevations($color-1, $color-2, $color-3);
// Use the igx-elevation to set the desired elevation level
$mySpecialCard: igx-card-theme(
$resting-shadow: igx-elevation($elevations-color, 10)
);
// If you want you can scope your custom elevation to a specific selector
.special-card {
@include igx-card($mySpecialCard);
}
// This compiles compiled to
.special-card .igx-card {
box-shadow:
0 6px 6px -3px rgb(153, 191, 170),
0 10px 14px 1px rgb(92, 134, 141),
0 4px 18px 3px rgb(92, 61, 70);
}
You can also set box-shadow without taking advantage of the igx-elevation function:
$myboringCard: igx-card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.boring-card{
@include igx-card($myboringCard);
}
// This compiles to
.boring-card .igx-card {
box-shadow: 0 10px 10px 10px #666;
}
Here is The result from the above code snippets:
