quasar-framework/src/themes/core/depth.variables.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$z-marginals      ?= 10
$z-fab            ?= 20
$z-drawer         ?= 30
$z-tooltip        ?= 40
$z-popover        ?= 50
$z-modal          ?= 60
$z-toast          ?= 70

$z-body-dimmed    ?= 100
$z-absolute       ?= 200

$shadow-color ?= black
$shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)

$inset-shadow = 0 7px 9px -7px alpha($shadow-color, .7) inset

$shadow-1 = 0 1px 3px alpha($shadow-color, .12), 0 1px 2px alpha($shadow-color, .24)
$shadow-2 = 0 3px 6px alpha($shadow-color, .16), 0 3px 6px alpha($shadow-color, .23)
$shadow-3 = 0 10px 20px alpha($shadow-color, .19), 0 6px 6px alpha($shadow-color, .23)
$shadow-4 = 0 14px 28px alpha($shadow-color, .25), 0 10px 10px alpha($shadow-color, .22)
$shadow-5 = 0 19px 38px alpha($shadow-color, .30), 0 15px 12px alpha($shadow-color, .22)

$shadow-up-1 = 0 -1px 3px alpha($shadow-color, .12), 0 -1px 2px alpha($shadow-color, .24)
$shadow-up-2 = 0 -3px 6px alpha($shadow-color, .16), 0 -3px 6px alpha($shadow-color, .23)
$shadow-up-3 = 0 -10px 20px alpha($shadow-color, .19), 0 -6px 6px alpha($shadow-color, .23)
$shadow-up-4 = 0 -14px 28px alpha($shadow-color, .25), 0 -10px 10px alpha($shadow-color, .22)
$shadow-up-5 = 0 -19px 38px alpha($shadow-color, .30), 0 -15px 12px alpha($shadow-color, .22)