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

Merged in feat/SW-337-hotel-page-ui (pull request #848)

Browse Source 
Feat(SW-337): Update lightbox UI

* chore(SW-337): hotelPage UI fixes

* refactor(SW-337): move width and height as props

* xhore(SW-337): update lightbox UI

* fix(SW-337): move margin

* fix(SW-337): update mobile fullview

* fix(SW-337): remove test border

* fix(SW-337): remove radius on fullview


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2024-11-08 08:26:37 +00:00
parent de5d80ec92
commit 5fa0c192db
6 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/Lightbox/Lightbox.module.css
View File

@@ -32,6 +32,11 @@
z-index: 1;
}
.fullViewCloseButton:hover .fullViewCloseIcon {
background-color: var(--UI-Text-Medium-contrast);
border-radius: 50%;
}
.leftTransformIcon {
transform: scaleX(-1);
}
@@ -137,8 +142,10 @@
padding: var(--Spacing-x2);
position: relative;
align-items: center;
justify-items: center;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
place-content: center;
gap: var(--Spacing-x5);
}
@@ -151,8 +158,9 @@
.fullViewImageContainer {
position: relative;
width: 358px;
height: 240px;
width: 100%;
height: 100%;
max-height: 25rem;
margin-bottom: var(--Spacing-x5);
}
@@ -187,17 +195,12 @@
.image {
object-fit: cover;
}
@media (min-width: 768px) and (max-width: 1367px) {
.fullViewContainer {
grid-template-columns: 1fr;
justify-items: center;
padding: var(--Spacing-x5);
}
.fullViewImageContainer {
position: relative;
width: 100%;
height: 100%;
max-height: 35rem;
}
@@ -210,13 +213,16 @@
}
.content {
border-radius: var(--Corner-radius-Large);
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
}
.content:not(.fullViewContent) {
border-radius: var(--Corner-radius-Large);
}
.galleryContent {
width: 1090px;
height: 725px;
@@ -246,6 +252,12 @@
position: absolute;
top: var(--Spacing-x-one-and-half);
right: var(--Spacing-x-half);
z-index: 1;
}
.desktopGalleryCloseButton:hover .desktopGalleryCloseIcon {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-radius: 50%;
}
.desktopThumbnailGrid {
@@ -279,17 +291,13 @@
margin-top: 0;
padding: var(--Spacing-x5);
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
justify-items: center;
width: 100%;
height: 100%;
}
.fullViewImageContainer {
position: relative;
width: 90%;
width: 70%;
max-width: 90.875rem;
height: 100%;
max-height: 43.75rem;
}