Customizing Shadows
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $box-shadow-depth-1 | String | k-elevation(1) | var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for switch. Equivalent to material elevation 1. | |||
| $box-shadow-depth-2 | String | k-elevation(2) | var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for resting state of button, card and other widgets. Equivalent to material elevation 2. | |||
| $box-shadow-depth-3 | String | k-elevation(3) | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for menu, popups and raised state of button and card. Equivalent to material elevation 3. | |||
| $box-shadow-depth-4 | String | k-elevation(4) | var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for drawers and other overlaying elements. Equivalent to material elevation 4. | |||
| $box-shadow-depth-5 | String | k-elevation(5) | var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 6. | |||
| $box-shadow-depth-6 | String | k-elevation(6) | var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 8. | |||
| $box-shadow-depth-7 | String | k-elevation(7) | var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 12. | |||
| $box-shadow-depth-8 | String | k-elevation(8) | var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 16. | |||
| $box-shadow-depth-9 | String | k-elevation(9) | var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for window and dialog. Equivalent to material elevation 24. | |||
| $elevation | Color | k-map-get( $theme, elevation ) | #000000 |
Description
Color of shadows | |||
