Elevation
Installation
yarn add @chewy/kib-foundations
Import
@use '~@chewy/kib-foundations/src/elevation';
Mixins
elevation
@mixin elevation($emphasis: 'medium') { ... }
@mixin elevation($emphasis: 'medium') { $blur-radius: map.get(settings.$levels, $emphasis, 'blur-radius'); $color: map.get(settings.$levels, $emphasis, 'color'); box-shadow: 0 0 $blur-radius #{$color}; }
Variables
levels
$levels: (...);
$levels: ( minimal: ( opacity: 0.08, blur-radius: kib-core.dimensions-get('tiny'), color: color.get('shadow', 'low-emphasis') ), medium: ( opacity: 0.08, blur-radius: kib-core.dimensions-get('small'), color: color.get('shadow', 'medium-emphasis') ), high: ( opacity: 0.16, blur-radius: kib-core.dimensions-get('default'), color: color.get('shadow', 'high-emphasis') ) );