32 lines
605 B
SCSS
32 lines
605 B
SCSS
@use "sass:map";
|
|
|
|
$elevations: (
|
|
0: 0%,
|
|
1: 5%,
|
|
2: 7%,
|
|
3: 8%,
|
|
4: 9%,
|
|
6: 11%,
|
|
8: 12%,
|
|
12: 14%,
|
|
16: 15%,
|
|
24: 16%,
|
|
);
|
|
|
|
@mixin elevate($height, $base: transparent) {
|
|
background-color: color-mix(
|
|
in lab,
|
|
#{$base},
|
|
white map.get($elevations, $height)
|
|
);
|
|
-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
|
-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
|
box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
|
}
|
|
|
|
@mixin undo($base: transparent) {
|
|
background-color: #{$base};
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|