scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2039-move-fullview-caption (pull request #2543)

Browse Source 
feat(SW-2039): move fullview image caption from bottom to the top of image

* feat(SW-2039): move fullview image caption to the top


Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Matilda Landström
2025-07-10 07:42:38 +00:00
parent 233c685e52
commit 5f9af2701e
2 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/Lightbox/FullView/fullView.module.css
+11 -11
View File
@@ -1,7 +1,7 @@
.fullViewContainer {
background-color: var(--UI-Text-High-contrast);
height: 100%;
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
position: relative;
align-items: center;
justify-items: center;
@@ -9,7 +9,7 @@
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
place-content: center;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.closeButton {
@@ -37,7 +37,7 @@
width: 100%;
height: 100%;
max-height: 25rem;
margin-bottom: var(--Spacing-x5);
margin-top: var(--Space-x5);
}
.imageWrapper {
@@ -52,10 +52,10 @@
object-fit: cover;
}
.footer {
.imageCaption {
color: var(--Text-Inverted);
position: absolute;
bottom: calc(-1 * var(--Spacing-x5));
top: calc(-1 * var(--Space-x5));
}
@media screen and (max-width: 767px) {
@@ -66,7 +66,7 @@
@media screen and (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer {
padding: var(--Spacing-x5);
padding: var(--Space-x5);
}
.imageContainer {
@@ -78,13 +78,13 @@
@media screen and (min-width: 768px) {
.closeButton {
position: fixed;
top: var(--Spacing-x-one-and-half);
right: var(--Spacing-x-half);
top: var(--Space-x15);
right: var(--Space-x15);
}
.fullViewContainer {
margin-top: 0;
padding: var(--Spacing-x5);
padding: var(--Space-x5);
grid-template-rows: auto 1fr auto;
width: 100%;
height: 100%;
@@ -117,10 +117,10 @@
}
.fullViewNextButton {
right: var(--Spacing-x5);
right: var(--Space-x5);
}
.fullViewPrevButton {
left: var(--Spacing-x5);
left: var(--Space-x5);
}
}