29292fd157
feat(SW-3231): Move Lightbox to design-system * Move Lightbox to design-system * Fix self-referencing imports * Fix broken import Approved-by: Matilda Landström
58 lines
941 B
CSS
58 lines
941 B
CSS
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: var(--lightbox-z-index);
|
|
|
|
&[data-entering] {
|
|
animation: darken-background 0.2s;
|
|
}
|
|
|
|
&[data-exiting] {
|
|
animation: darken-background 0.2s reverse;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: var(--lightbox-z-index);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.content {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
|
|
&:not(.fullViewContent) {
|
|
border-radius: var(--Corner-radius-lg);
|
|
}
|
|
|
|
&.fullViewContent {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
&.galleryContent {
|
|
width: min(var(--max-width-page), 1090px);
|
|
height: min(725px, 85dvh);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes darken-background {
|
|
from {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|