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};
 }
Description

Add elevation shadow from a predefined preset

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$emphasis

elevation emphasis level

String'medium'
Requires

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')
  )
);
Description

Elevation emphasis levels

Type

Map

Used by