Skip to main content
react-md
react-md - Elevation - SassDoc

Variables

rmd-elevation-color

Color

The normal elevation color to use.

$rmd-elevation-color: $rmd-black-base;

rmd-elevation-shadow-1-opacity

Number

The opacity to apply to the first box-shadow

$rmd-elevation-shadow-1-opacity: 0.2;
See also

rmd-elevation-shadow-2-opacity

Number

The opacity to apply to the second box-shadow

$rmd-elevation-shadow-2-opacity: 0.14;
See also

rmd-elevation-shadow-3-opacity

Number

The opacity to apply to the third box-shadow

$rmd-elevation-shadow-3-opacity: 0.12;
See also

rmd-elevation-shadow-1-map

Map

A Map of the first layer of box-shadows to apply for elevation. This is a map of numbers from 0 -> 24.

$rmd-elevation-shadow-1-map: (
  0: '0px 0px 0px 0px',
  1: '0px 2px 1px -1px',
  2: '0px 3px 1px -2px',
  3: '0px 3px 3px -2px',
  4: '0px 2px 4px -1px',
  5: '0px 3px 5px -1px',
  6: '0px 3px 5px -1px',
  7: '0px 4px 5px -2px',
  8: '0px 5px 5px -3px',
  9: '0px 5px 6px -3px',
  10: '0px 6px 6px -3px',
  11: '0px 6px 7px -4px',
  12: '0px 7px 8px -4px',
  13: '0px 7px 8px -4px',
  14: '0px 7px 9px -4px',
  15: '0px 8px 9px -5px',
  16: '0px 8px 10px -5px',
  17: '0px 8px 11px -5px',
  18: '0px 9px 11px -5px',
  19: '0px 9px 12px -6px',
  20: '0px 10px 13px -6px',
  21: '0px 10px 13px -6px',
  22: '0px 10px 14px -6px',
  23: '0px 11px 14px -7px',
  24: '0px 11px 15px -7px',
);

rmd-elevation-shadow-2-map

Map

A Map of the second layer of box-shadows to apply for elevation. This is a map of numbers from 0 -> 24.

$rmd-elevation-shadow-2-map: (
  0: '0px 0px 0px 0px',
  1: '0px 1px 1px 0px',
  2: '0px 2px 2px 0px',
  3: '0px 3px 4px 0px',
  4: '0px 4px 5px 0px',
  5: '0px 5px 8px 0px',
  6: '0px 6px 10px 0px',
  7: '0px 7px 10px 1px',
  8: '0px 8px 10px 1px',
  9: '0px 9px 12px 1px',
  10: '0px 10px 14px 1px',
  11: '0px 11px 15px 1px',
  12: '0px 12px 17px 2px',
  13: '0px 13px 19px 2px',
  14: '0px 14px 21px 2px',
  15: '0px 15px 22px 2px',
  16: '0px 16px 24px 2px',
  17: '0px 17px 26px 2px',
  18: '0px 18px 28px 2px',
  19: '0px 19px 29px 2px',
  20: '0px 20px 31px 3px',
  21: '0px 21px 33px 3px',
  22: '0px 22px 35px 3px',
  23: '0px 23px 36px 3px',
  24: '0px 24px 38px 3px',
);

rmd-elevation-shadow-3-map

Map

A Map of the third layer of box-shadows to apply for elevation. This is a map of numbers from 0 -> 24.

$rmd-elevation-shadow-3-map: (
  0: '0px 0px 0px 0px',
  1: '0px 1px 3px 0px',
  2: '0px 1px 5px 0px',
  3: '0px 1px 8px 0px',
  4: '0px 1px 10px 0px',
  5: '0px 1px 14px 0px',
  6: '0px 1px 18px 0px',
  7: '0px 2px 16px 1px',
  8: '0px 3px 14px 2px',
  9: '0px 3px 16px 2px',
  10: '0px 4px 18px 3px',
  11: '0px 4px 20px 3px',
  12: '0px 5px 22px 4px',
  13: '0px 5px 24px 4px',
  14: '0px 5px 26px 4px',
  15: '0px 6px 28px 5px',
  16: '0px 6px 30px 5px',
  17: '0px 6px 32px 5px',
  18: '0px 7px 34px 6px',
  19: '0px 7px 36px 6px',
  20: '0px 8px 38px 7px',
  21: '0px 8px 40px 7px',
  22: '0px 8px 42px 7px',
  23: '0px 9px 44px 8px',
  24: '0px 9px 46px 8px',
);

Mixins

rmd-elevation

mixin

Create the box shadow based on a z-value.

Parameters
NameDescriptionTypeDefault Value
$z-value

This should be a number between 0 and 24.

Number
$color

The color to use for the box-shadow.

Color$rmd-elevation-color
$opacity-boost

The amount to boost the default opacity levels for the three box-shadows applied.

Number0

Examples

Example Usage SCSS
.my-class {
  @include rmd-elevation(8);

  background-color: white;
  position: fixed;
  z-index: 8;
}

rmd-elevation-transition

mixin

This mixin is used to create performant box-shadow transitions between different elevations. What this does behind the scenes is update the element to have position: relative along with a pseudo ::before or ::after tag that has the new box shadow with an initial opacity set to 0. When the $active-selectors class or state is applied to the element, the pseudo element's opacity will be updated to 1 and it'll animate in. This is really just because it is more performant to animate opacity instead of box-shadow itself.

Parameters
NameDescriptionTypeDefault Value
$start

This should be the starting shadow z-index. So any number from 0 to 24 (inclusive).

String|Number
$end

This should be the ending shadow z-index. So any number from 0 to 24 (inclusive).

String|Number
$active-selectors

This is normally a class name that should be used or a list of class names for when the box shadow should start animating. This can also be different states such as &:hover or &:focus

List|String
$before

Boolean the shadow should be placed within the ::before pseudo element. When this is set to false, the ::after pseudo element will be used instead.

Booleantrue
$duration

The animation duration to use.

String|Number$rmd-transition-standard-time
$color

The color to use for the box-shadow.

Color$rmd-elevation-color
$opacity-boost

The amount to boost the default opacity levels for the three box-shadows applied.

Number0

Functions

rmd-elevation

function

Returns a box shadow string for the current material design elevation. This is useful if you want to merge material design elevation with custom box shadow values as well.

Returns — String

the box shadow string for the current elevation.

Parameters
NameDescriptionTypeDefault Value
$z-value

This should be a number between 0 and 24.

Number
$color

The color to use for the box-shadow.

Color$rmd-elevation-color
$opacity-boost

The amount to boost the default opacity levels for the three box-shadows applied.

Number0
Throws
  • $z-value must be a unitless number, but received
  • $z-value must be between 0 and 24, but received

Examples

Simple usage
.my-class {
  box-shadow: rmd-elevation(2);
}
Merging Shadows
.my-class {
  box-shadow: rmd-elevation(2), inset 0 0 0 1px $rmd-blue-500;
}