Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product. Objects with deeper shadows must be positioned above objects with smaller shadows in the z-index.
Trimble uses three levels of elevation specified by different depths of drop shadows:
Level 1
box-shadow:
0 0 2px rgba(37,42,46,.3);
Used for: dropdowns, tooltips, default cards
Level 2
box-shadow:
0 0 4px rgba(37,42,46,.3);
Used for: sticky elements, cards active
Level 3
box-shadow:
0 0 8px rgba(37,42,46,.3);
Used for: dialogs, modals, cards hover
Never use drop shadows on text, buttons, chips, sliders, or any other elements that do not include shadows in their guidelines.
Standard drop shadow color is gray. Always adjust color opacity to retain a maximum contrast ratio of 1.5:1. Avoid dark shadows.
Z-Index
Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
| Z-index | Use |
|---|---|
| 1000 | Dropdowns |
| 1020 | Sticky Elements |
| 1030 | Fixed Elements |
| 1040 | Modal Backdrops |
| 1050 | Modal Dialogs |
| 1060 | Popovers |
| 1070 | Tooltips |
| 1080 | Toasts ! |