feat: refactor NewDates, clean up legacy code

This reverts commit 0c7836fa59.
This commit is contained in:
Simon Emanuelsson
2025-05-03 19:33:04 +02:00
parent c6a0b4ee30
commit db289b80b1
96 changed files with 1603 additions and 1500 deletions

View File

@@ -1,42 +1,28 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
}
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
}
.room {
background-color: var(--Base-Background-Primary-Normal);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
background-color: var(--Base-Background-Primary-Normal);
padding: var(--Spacing-x3) 0;
}
.trigger {
align-items: center;
background: none;
border: none;
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
cursor: pointer;
display: flex;
gap: var(--Space-x1);
padding: var(--Space-x025) 0;
}
.roomName {
color: var(--Scandic-Brand-Burgundy);
padding: 0 var(--Spacing-x2);
}
.roomHeader {
display: flex;
gap: var(--Spacing-x-one-and-half);
padding: 0 var(--Spacing-x2);
}
.roomHeaderContent {
display: flex;
gap: var(--Spacing-x-one-and-half);
}
.sidePeek {
display: none;
}
.booking {
display: flex;
flex-direction: column;
@@ -56,136 +42,12 @@
opacity: 0.5;
}
.chip {
background-color: var(--Scandic-Peach-30);
color: var(--Scandic-Red-100);
border-radius: var(--Corner-radius-Small);
padding: var(--Spacing-x-half) var(--Spacing-x1);
}
.reference {
display: flex;
gap: var(--Spacing-x-half);
}
.packages {
position: absolute;
top: 180px;
left: 15px;
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
z-index: 1;
}
.package {
background-color: var(--Main-Grey-White);
padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Small);
}
.imageContainer {
height: 220px;
overflow: hidden;
}
.image {
width: 100%;
height: 220px;
aspect-ratio: 16/9;
object-fit: cover;
}
.imagePlaceholder {
height: 100%;
width: 100%;
background-color: #fff;
background-image:
linear-gradient(45deg, #000000 25%, transparent 25%),
linear-gradient(-45deg, #000000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000000 75%),
linear-gradient(-45deg, transparent 75%, #000000 75%);
background-size: 120px 120px;
background-position:
0 0,
0 60px,
60px -60px,
-60px 0;
}
.roomDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
}
.bookingDetails {
max-width: 100%;
padding: 0 var(--Spacing-x2);
}
.row {
display: flex;
flex-direction: column;
padding: var(--Spacing-x-one-and-half) 0;
}
.row:last-child {
border-bottom: none;
}
.rowTitle {
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
}
.rowTitle svg {
width: 24px;
height: 24px;
}
.rowContent {
padding-left: var(--Spacing-x4);
}
.bookingInformation {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: var(--Spacing-x2);
background-color: var(--Scandic-Beige-10);
margin: 0 var(--Spacing-x2);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
}
.priceDetails {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half) 0;
width: calc(100% - var(--Spacing-x4));
justify-content: center;
margin: 0 auto;
}
.price {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
justify-content: space-between;
width: 100%;
}
.userDetails {
width: 100%;
border-bottom: 1px solid var(--Base-Border-Subtle);
margin-bottom: var(--Spacing-x1);
color: var(--Scandic-Brand-Burgundy);
}
.guestDetailsMobileWrapper {
display: block;
padding: 0 var(--Spacing-x2);
@@ -205,17 +67,6 @@
padding: 0;
}
.roomHeader {
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 0;
}
.sidePeek {
display: block;
}
.booking {
border-radius: var(--Corner-radius-Large);
background-color: var(--Base-Background-Primary-Normal);
@@ -227,56 +78,6 @@
width: var(--max-width-content);
}
.packages {
top: 620px;
left: 25px;
}
.imageContainer {
height: 640px;
}
.image {
height: 100%;
border-radius: var(--Corner-radius-Medium);
}
.bookingDetails {
padding: 0;
}
.row {
border-bottom: 1px solid var(--Base-Border-Subtle);
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.rowTitle svg {
width: 20px;
height: 20px;
}
.bookingInformation {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: var(--Spacing-x-one-and-half);
margin: 0;
border-radius: 0;
border: none;
}
.priceDetails {
margin: 0 0 0 auto;
width: auto;
align-items: flex-end;
}
.price {
justify-content: flex-end;
}
.guestDetailsMobileWrapper {
display: none;
}