All the available elevation and shadow variables are defined in daemonite-material/assets/scss/variables/_elevation-shadow.scss. This page summarises the default elevation and shadow values used by Material components.
Elevation
Elevation is the relative depth, or distance, between two surfaces along the z-axis.
Several Material components utilise z-index, the CSS property that helps control layout by providing a third axis to arrange content. A default z-index scale in Material has been designed to properly layer dialogs, navdrawers, toolbars, and more.
Component (class) |
Elevation (z-index) |
|---|---|
Dialog (.modal) |
map-get($elevations, 24) (z-index: 240;) |
Picker (.picker) |
map-get($elevations, 24) (z-index: 240;) |
Popover & tooltip (.popover & .tooltip) |
map-get($elevations, 24) (z-index: 240;) |
Navigation drawer (.navdrawer) |
map-get($elevations, 16) (z-index: 160;) |
Menu (.dropdown-menu) |
map-get($elevations, 8) (z-index: 80;) |
Snackbar (.snackbar) |
map-get($elevations, 6) (z-index: 60;) |
Toolbar (.navbar) |
map-get($elevations, 4) (z-index: 40;) |
Shadows
Shadows provide important visual cues about objects’ depth.
Most Material components have default shadows applied:
Component (class) |
Shadow |
|---|---|
Dialog (.modal-content) |
map-get($shadows, 24) |
Picker (.picker-wrap) |
map-get($shadows, 24) |
Popover (.popover) |
map-get($shadows, 24) |
Navigation drawer (.navdrawer-content) |
map-get($shadows, 16) |
Carousel control pressed (.carousel-control-next:active & .carousel-control-prev:active) |
map-get($shadows, 12) |
Floating action button pressed (.btn-float:active) |
map-get($shadows, 12) |
Card pressed (.card:active) |
map-get($shadows, 8) |
Menu (.dropdown-menu) |
map-get($shadows, 8) |
Raised button pressed (.btn:active) |
map-get($shadows, 8) |
Carousel control (.carousel-control-next & .carousel-control-prev) |
map-get($shadows, 6) |
Floating action button (.btn-float) |
map-get($shadows, 6) |
Snackbar (.snackbar) |
map-get($shadows, 6) |
Toolbar (.navbar) |
map-get($shadows, 4) |
Card (.card) |
map-get($shadows, 2) |
Chip hovered (.chip:hover) |
map-get($shadows, 2) |
Jumbotron (.jumbotron) |
map-get($shadows, 2) |
Raised button (.btn) |
map-get($shadows, 2) |
Expansion panel (.expansion-panel) |
map-get($shadows, 1) |
Switch (.custom-switch .custom-control-label::after) |
map-get($shadows, 1) |
Shadow utility classes
Material also provides utility classes to quickly add or remove a shadow for any componenet/element.
0 shadow1 shadow2 shadow4 shadow6 shadow8 shadow12 shadow16 shadow24 shadow<div class="bg-light mb-3 p-3 rounded shadow-none"><code>0</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-1"><code>1</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-2"><code>2</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-4"><code>4</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-6"><code>6</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-8"><code>8</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-12"><code>12</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-16"><code>16</code> shadow</div>
<div class="bg-white p-3 rounded shadow-24"><code>24</code> shadow</div>