feat(SW-96): Ship reusable desktop lightbox

2024-08-20 08:07:21 +02:00
parent 4274bdc220
commit 59615cef94
8 changed files with 937 additions and 17 deletions
@@ -0,0 +1,157 @@
+.content {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1090px;
+  height: 725px;
+  overflow: hidden;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.galleryContainer {
+  padding: var(--Spacing-x5) var(--Spacing-x6);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.closeButton {
+  position: absolute;
+  top: var(--Spacing-x-one-and-half);
+  right: var(--Spacing-x-half);
+}
+
+.backButton {
+  position: absolute;
+  top: var(--Spacing-x-one-and-half);
+  left: var(--Spacing-x-half);
+}
+
+.galleryHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--Spacing-x1);
+}
+
+.imageCaption {
+  background-color: #f0f0f0;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+
+.mainImageContainer {
+  flex: 1;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.mainImageContainer img,
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 125px;
+}
+
+.fullViewContainer {
+  background-color: var(--UI-Text-High-contrast);
+  color: #fff;
+  height: 100%;
+  padding: var(--Spacing-x5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fullViewHeader {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--Spacing-x5);
+  width: 100%;
+}
+
+.fullViewImageContainer {
+  position: relative;
+  width: 100%;
+  max-width: 1054px;
+  height: 700px;
+  margin-bottom: var(--Spacing-x5);
+}
+
+.fullViewImage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.fullViewFooter {
+  width: 100%;
+  max-width: 1054px;
+  text-align: left;
+  padding-left: 116px;
+}
+
+.imagePosition {
+  background-color: var(--UI-Grey-90);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.fullViewImageContainer img {
+  border-radius: var(--Corner-radius-Medium);
+  cursor: pointer;
+}
+
+.navigationButton {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--Base-Button-Inverted-Fill-Normal);
+  border-radius: 50%;
+  padding: var(--Spacing-x1);
+  cursor: pointer;
+  border: none;
+  display: flex;
+}
+
+.navigationButton:hover {
+  background-color: var(--Base-Button-Inverted-Fill-Hover);
+}
+
+.prevButton {
+  left: 10px;
+}
+
+.leftTransformIcon {
+  transform: scaleX(-1);
+}
+
+.nextButton {
+  right: 10px;
+}
+
+.portraitImage {
+  max-width: 548px;
+}