Update the materialize mixins to accept a base colour (allows preventing transparency for things like nav-bars; closes #160)

This commit is contained in:
Oliver-Akins 2024-04-28 17:19:31 -06:00
parent 11d2a2a10f
commit 194068c22c
2 changed files with 24 additions and 5 deletions

View file

@ -5,7 +5,7 @@
--gap: 8px; --gap: 8px;
.nav-bar { .nav-bar {
@include material.elevate(8); @include material.elevate(8, $base: var(--surface));
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;

View file

@ -1,12 +1,31 @@
@mixin elevate($height) { @use "sass:map";
background-color: var(--elevation-#{$height}dp-bg);
$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); -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); -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); box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
} }
@mixin undo { @mixin undo($base: transparent) {
background-color: transparent; background-color: #{$base};
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;