The normal elevation color to use.
$rmd-elevation-color: $rmd-black-base;The opacity to apply to the first box-shadow
$rmd-elevation-shadow-1-opacity: 0.2;The opacity to apply to the second box-shadow
$rmd-elevation-shadow-2-opacity: 0.14;The opacity to apply to the third box-shadow
$rmd-elevation-shadow-3-opacity: 0.12;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',
);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',
);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',
);Create the box shadow based on a z-value.
| Name | Description | Type | Default 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. | Number | 0 |
@use 'react-md' as *;
.my-class {
@include rmd-elevation(8);
background-color: white;
position: fixed;
z-index: 8;
}
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.
| Name | Description | Type | Default 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 | List|String | — |
$before | Boolean the shadow should be placed within the | Boolean | true |
$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. | Number | 0 |
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.
Stringthe box shadow string for the current elevation.
| Name | Description | Type | Default 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. | Number | 0 |
@use 'react-md' as *;
.my-class {
box-shadow: rmd-elevation(2);
}
@use 'react-md' as *;
.my-class {
box-shadow: rmd-elevation(2), inset 0 0 0 1px $rmd-blue-500;
}