feat(SW-340): Added HotelCardDialog component

This commit is contained in:
Pontus Dreij
2024-11-07 16:07:54 +01:00
parent 7a49d4a393
commit 2748120890
19 changed files with 309 additions and 41 deletions

View File

@@ -4,10 +4,8 @@
}
.advancedMarker.active {
height: var(--Spacing-x5);
width: var(
--Spacing-x5
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
height: 32px;
min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
.pin {
@@ -23,10 +21,11 @@
background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
gap: var(--Spacing-x1);
width: max-content;
}
.pin.active {
padding-right: var(--Spacing-x-one-and-half);
background-color: var(--Primary-Dark-Surface-Normal);
}
.pinLabel {
@@ -49,3 +48,22 @@
justify-content: center;
background: var(--Primary-Dark-Surface-Normal);
}
.pin.active .pinIcon {
background: var(--Base-Surface-Primary-light-Normal);
}
.card {
display: none;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
width: 402px;
height: 181px;
background-color: var(--Base-Surface-Primary-light-Normal);
}
.card.active {
display: block;
}