feat: use mask-image instead of box-shadow for header background

This will allow header fade background blending with color-surface-0, regardless of what color it is set to
This commit is contained in:
alistair3149 2021-08-25 23:56:53 -04:00
parent e53ca7839b
commit 2285670e08
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C

View file

@ -30,10 +30,14 @@
&:before {
position: absolute;
top: 0;
right: 0;
bottom: ~'calc( var( --height-header ) / -2 )';
left: 0;
box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --color-surface-0 );
background: var( --color-surface-0 );
content: '';
mask-image: linear-gradient( 180deg, #000, transparent );
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
}
&-button {