48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import { css, LitElement } from '@lion/core';
|
|
|
|
/**
|
|
* @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
|
|
*/
|
|
class DemoOverlayBackdrop extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background-color: grey;
|
|
opacity: 0.3;
|
|
display: none;
|
|
}
|
|
|
|
:host(.local-overlays__backdrop--visible) {
|
|
display: block;
|
|
}
|
|
|
|
:host(.local-overlays__backdrop--animation-in) {
|
|
animation: local-overlays-backdrop-fade-in 300ms;
|
|
}
|
|
|
|
:host(.local-overlays__backdrop--animation-out) {
|
|
animation: local-overlays-backdrop-fade-out 300ms;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes local-overlays-backdrop-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes local-overlays-backdrop-fade-out {
|
|
from {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('demo-overlay-backdrop', DemoOverlayBackdrop);
|