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

Merged in SW-2064-lightbox-updates (pull request #3347)

Browse Source 
feat(SW-2064): Lightbox updates

* chore(SW-2064): add opacity to not selected images

* chore(SW-2064): set main image as the first image in thumbnail

* chore(SW-2064): disable navigation buttons on first and last image

* fix(SW-2064): use cx

* Revert "chore(SW-2064): disable navigation buttons on first and last image"

This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947.

* refactor(SW-2064): create ImageCounter component

* refactor(SW-2064)

* chore(SW-2064): add enter keu down on main image


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2026-01-08 12:10:03 +00:00
parent 86f9fb13b6
commit fc857ad58f
14 changed files with 358 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
View File

@@ -19,6 +19,13 @@
height: 242px;
}
.thumbnail {
grid-column: 2 / span 5;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--Space-x15);
}
.fullWidthImage {
grid-column: 1 / -1;
height: 240px;
@@ -34,9 +41,11 @@
cursor: pointer;
overflow: hidden;
z-index: 0;
border-radius: var(--Corner-radius-sm);
&:focus-visible {
outline-offset: -2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
}
}
@@ -44,7 +53,21 @@
transition: opacity 0.3s ease-in-out;
object-fit: cover;
z-index: -1;
border-radius: var(--Corner-radius-md);
}
.notActiveImage {
opacity: 0.5;
}
.activeImage {
border: 2px solid var(--Border-Interactive-Active);
}
.imageCounter {
position: absolute;
bottom: var(--Space-x1);
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
@@ -81,7 +104,7 @@
.desktopGallery {
display: grid;
grid-template-rows: 28px 1fr 125px;
grid-template-rows: 28px 1fr 130px;
row-gap: var(--Space-x15);
background-color: var(--Background-Primary);
height: 100%;
@@ -117,7 +140,7 @@
.mainImage {
object-fit: contain;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-sm);
/* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
width: auto !important;
height: auto !important;
@@ -129,10 +152,9 @@
.desktopThumbnailGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--Space-x1);
grid-template-columns: 0.2fr repeat(5, 1fr) 0.2fr;
gap: var(--Space-x15);
max-height: 7.8125rem;
overflow: hidden;
}
.thumbnailContainer {