@universal-material/web
Version:
Material web components
28 lines • 1.18 kB
JavaScript
import { css } from 'lit';
export const styles = css `
:host {
--_level: var(--u-elevation-level, 0);
--_shadow-color: var(--u-color-shadow, rgb(0, 0, 0));
-webkit-tap-highlight-color: transparent;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
:host::before, :host::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
transition: box-shadow 150ms ease-in-out;
}
:host::before {
box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
opacity: 0.3;
}
:host::after {
box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
opacity: 0.15;
}
`;
//# sourceMappingURL=elevation.styles.js.map