138 lines
2.6 KiB
JavaScript
138 lines
2.6 KiB
JavaScript
import { css } from 'lit';
|
|
|
|
export const overlayShadowDomStyle = css`
|
|
.overlays {
|
|
position: fixed;
|
|
z-index: 200;
|
|
}
|
|
|
|
.overlays__overlay-container {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.overlays__overlay-container::backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.overlays__overlay-container--top-left {
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.overlays__overlay-container--top {
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.overlays__overlay-container--top-right {
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.overlays__overlay-container--right {
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.overlays__overlay-container--bottom-left {
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.overlays__overlay-container--bottom {
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.overlays__overlay-container--bottom-right {
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.overlays__overlay-container--left {
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.overlays__overlay-container--center {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.overlays__overlay--bottom-sheet {
|
|
width: 100%;
|
|
}
|
|
|
|
::slotted(.overlays__overlay),
|
|
.overlays__overlay {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.overlays__backdrop {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-color: #333333;
|
|
display: none;
|
|
}
|
|
|
|
.overlays__backdrop--visible {
|
|
display: block;
|
|
}
|
|
|
|
.overlays__backdrop--animation-in {
|
|
animation: overlays-backdrop-fade-in 300ms;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.overlays__backdrop--animation-out {
|
|
animation: overlays-backdrop-fade-out 300ms;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes overlays-backdrop-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes overlays-backdrop-fade-out {
|
|
from {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
|
.overlays .overlays__backdrop--animation-in {
|
|
animation: overlays-backdrop-fade-in 1ms;
|
|
}
|
|
|
|
.overlays .overlays__backdrop--animation-out {
|
|
animation: overlays-backdrop-fade-out 1ms;
|
|
}
|
|
}
|
|
|
|
dialog[data-overlay-outer-wrapper] {
|
|
background-image: none;
|
|
border-style: none;
|
|
padding: 0px;
|
|
}
|
|
|
|
/**
|
|
* We don't want to use pseudo el ::backdrop.
|
|
* We have our own, that creates more flexibility wrt scrolling etc.
|
|
*/
|
|
dialog[data-overlay-outer-wrapper]::backdrop {
|
|
display: none;
|
|
}
|
|
`;
|