Elevation

11 named M2 elevation levels as ready-to-use multi-layer box-shadow values.

@use '@presencelearning/styles/elevation' as e;

.card {
  box-shadow: e.$elevation-01dp;
}
.fab {
  box-shadow: e.$elevation-06dp;
}
.dialog {
  box-shadow: e.$elevation-24dp;
}

$elevation-00dp Flat surface, no shadow

$elevation-01dp Cards (default)

$elevation-02dp Raised buttons

$elevation-03dp Refresh indicator

$elevation-04dp App bar (top)

$elevation-06dp FAB (default)

$elevation-08dp Bottom navigation, menus

$elevation-09dp Side nav

$elevation-12dp FAB (pressed)

$elevation-16dp Nav drawer, modal side sheet

$elevation-24dp Dialog, picker