chore: Replaced deprecated Spacing variables with current values
Approved-by: Matilda Landström
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
.form {
|
||||
box-shadow: var(--popup-box-shadow);
|
||||
padding: var(--Spacing-x3) 0;
|
||||
padding: var(--Space-x3) 0;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.form > div:not(.buttons) {
|
||||
padding: 0 var(--Spacing-x3);
|
||||
padding: 0 var(--Space-x3);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@@ -41,8 +41,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
padding: var(--Spacing-x3) var(--Spacing-x3) 0;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Space-x3) var(--Space-x3) 0;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.buttons > button:only-child {
|
||||
@@ -55,5 +55,5 @@
|
||||
|
||||
.footnote {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
justify-content: flex-end;
|
||||
padding: var(--Space-x2) var(--Space-x15) 0 0;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x15);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.modalContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.termsAndConditions {
|
||||
|
||||
@@ -4,19 +4,19 @@
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x3) 0;
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x3) 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
height: 470px;
|
||||
overflow-y: auto;
|
||||
padding-right: var(--Space-x15);
|
||||
margin-top: var(--Spacing-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
}
|
||||
|
||||
.chip {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
padding: var(--Space-x2) var(--Space-x3);
|
||||
background-color: var(--Surface-Primary-OnSurface-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
margin-bottom: var(--Spacing-x1);
|
||||
margin-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.selectTitle {
|
||||
@@ -45,7 +45,7 @@
|
||||
.breakfastPrices {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
background: var(--Surface-Feedback-Information-light);
|
||||
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
margin: var(--Spacing-x2) 0;
|
||||
margin: var(--Space-x2) 0;
|
||||
}
|
||||
|
||||
.pointsDivider {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -9,12 +9,12 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: var(--Space-x15);
|
||||
margin-top: var(--Spacing-x5);
|
||||
margin-top: var(--Space-x5);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
.header {
|
||||
align-items: center;
|
||||
@@ -25,7 +25,7 @@
|
||||
.deliveryTime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.ancillaryMobile {
|
||||
@@ -33,16 +33,16 @@
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.ancillaryDesktop {
|
||||
display: none;
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
background-color: var(--Background-Primary);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -61,40 +61,40 @@
|
||||
|
||||
.paymentMobile {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
}
|
||||
.commentMobile {
|
||||
margin-bottom: var(--Spacing-x3);
|
||||
margin-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.footerMobile {
|
||||
display: flex;
|
||||
margin-top: var(--Spacing-x4);
|
||||
margin-top: var(--Space-x4);
|
||||
}
|
||||
|
||||
.specification {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--Spacing-x1) 0;
|
||||
padding: var(--Space-x1) 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.payment {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--Spacing-x1) 0;
|
||||
padding: var(--Space-x1) 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
@@ -104,5 +104,5 @@
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
margin: 0 auto;
|
||||
width: var(--max-width-content);
|
||||
}
|
||||
@@ -35,6 +35,6 @@
|
||||
.ancillaries {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(251px, 1fr));
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.image {
|
||||
@@ -16,7 +16,7 @@
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.bottomContent {
|
||||
@@ -25,14 +25,14 @@
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.supportingText {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.bookingSummary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
padding: var(--Spacing-x2);
|
||||
gap: var(--Space-x5);
|
||||
padding: var(--Space-x2);
|
||||
}
|
||||
|
||||
.bookingSummaryContent {
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--Main-Brand-PalePeach);
|
||||
padding: var(--Spacing-x3) 0;
|
||||
padding: var(--Space-x3) 0;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.memberLevel {
|
||||
@@ -20,17 +20,17 @@
|
||||
}
|
||||
|
||||
.rowTitle {
|
||||
margin-bottom: var(--Spacing-x1);
|
||||
margin-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.userDetails {
|
||||
width: 80%;
|
||||
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider);
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
align-items: center;
|
||||
}
|
||||
@@ -39,9 +39,9 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
justify-content: space-between;
|
||||
padding-top: var(--Spacing-x3);
|
||||
padding-top: var(--Space-x3);
|
||||
}
|
||||
|
||||
.totalPointsText {
|
||||
@@ -54,7 +54,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.memberNumber {
|
||||
@@ -63,7 +63,7 @@
|
||||
.contactInfoMobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
}
|
||||
.guestDetails {
|
||||
align-items: flex-start;
|
||||
padding: var(--Spacing-x3) var(--Space-x15);
|
||||
padding: var(--Space-x3) var(--Space-x15);
|
||||
}
|
||||
.contactInfoMobile,
|
||||
.userDetailsTitle {
|
||||
@@ -96,7 +96,7 @@
|
||||
.contactInfoDesktop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
.totalPoints {
|
||||
padding: var(--Space-x15) 0;
|
||||
|
||||
@@ -4,8 +4,8 @@ header .title {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--Spacing-x6);
|
||||
margin-top: var(--Spacing-x2);
|
||||
padding-top: var(--Space-x6);
|
||||
margin-top: var(--Space-x2);
|
||||
}
|
||||
|
||||
.title .hotelName {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--Spacing-x3);
|
||||
padding-top: var(--Space-x3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.container {
|
||||
background-color: var(--Background-Primary);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x1) var(--Spacing-x3);
|
||||
padding: var(--Space-x2) var(--Space-x1) var(--Space-x3);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
margin-bottom: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
margin-bottom: var(--Space-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
.container {
|
||||
width: 700px;
|
||||
max-width: 100%;
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
|
||||
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
|
||||
}
|
||||
.gridEqual {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
display: flex;
|
||||
flex: 1 0 100%;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
justify-content: center;
|
||||
padding: var(--Spacing-x4) var(--Spacing-x3);
|
||||
padding: var(--Space-x4) var(--Space-x3);
|
||||
color: var(--UI-Opacity-White-100);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.dl {
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
@@ -12,7 +12,7 @@
|
||||
.dl {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
color: var(--Text-Tertiary);
|
||||
font-weight: var(--Body-Supporting-text-Font-weight-2);
|
||||
font-size: var(--Body-Supporting-text-Size);
|
||||
margin-right: var(--Spacing-x-half);
|
||||
margin-right: var(--Space-x05);
|
||||
}
|
||||
|
||||
.titleSubtext {
|
||||
@@ -16,9 +16,8 @@
|
||||
|
||||
.totalContainer {
|
||||
border: 1px solid var(--Border-Divider-Subtle);
|
||||
border-radius: var(--Spacing-x1);
|
||||
padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2)
|
||||
var(--Spacing-x2);
|
||||
border-radius: var(--Space-x1);
|
||||
padding: var(--Space-x15) var(--Space-x2) var(--Space-x2) var(--Space-x2);
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--Space-x15);
|
||||
@@ -28,7 +27,7 @@
|
||||
.dl {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
.main {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
display: flex;
|
||||
padding: var(--Spacing-x5) var(--Spacing-x4);
|
||||
padding: var(--Space-x5) var(--Space-x4);
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
.addresses {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--Spacing-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
}
|
||||
|
||||
.rightColumn {
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
.addressMargin {
|
||||
margin-top: var(--Spacing-x-half);
|
||||
margin-top: var(--Space-x05);
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
@@ -32,14 +32,14 @@
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--Spacing-x5) 0;
|
||||
padding: var(--Space-x5) 0;
|
||||
}
|
||||
|
||||
.logIn {
|
||||
padding: var(--Spacing-x9) var(--Spacing-x2);
|
||||
padding: var(--Space-x9) var(--Space-x2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
color: var(--Scandic-Grey-100);
|
||||
}
|
||||
|
||||
@@ -5,22 +5,22 @@
|
||||
.modalText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.rooms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.roomContainer {
|
||||
display: flex;
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
background-color: var(--Background-Primary);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.roomInfo {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.dateComparison {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
.container {
|
||||
background-color: var(--Background-Primary);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
|
||||
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.checkInDate,
|
||||
.checkOutDate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.trigger {
|
||||
@@ -26,7 +26,7 @@
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
/* allow shrinkage */
|
||||
padding: var(--Spacing-x1) var(--Spacing-x2);
|
||||
padding: var(--Space-x1) var(--Space-x2);
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.termsAndConditions {
|
||||
color: var(--Text-Secondary);
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.termsAndConditions .checkbox span {
|
||||
@@ -28,9 +28,9 @@
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
justify-content: flex-end;
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
}
|
||||
|
||||
.guaranteeCostText {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.actionArea {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.actionArea {
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding-top: var(--Spacing-x3);
|
||||
padding-top: var(--Space-x3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.priceContainer {
|
||||
display: flex;
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
background-color: var(--Background-Primary);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
align-items: center;
|
||||
@@ -9,14 +9,14 @@
|
||||
|
||||
.info {
|
||||
border-right: 1px solid var(--Base-Border-Subtle);
|
||||
padding-right: var(--Spacing-x2);
|
||||
padding-right: var(--Space-x2);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-left: var(--Spacing-x2);
|
||||
padding-left: var(--Space-x2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
gap: var(--Space-x1);
|
||||
margin: 0 auto;
|
||||
max-width: 588px;
|
||||
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
|
||||
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
|
||||
width: var(--max-width-content);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
.roomsContainer {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -25,14 +25,14 @@
|
||||
.totalContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
gap: var(--Space-x1);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: var(--Spacing-x-half);
|
||||
padding: var(--Space-x05);
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x15) 0;
|
||||
width: calc(100% - var(--Spacing-x4));
|
||||
width: calc(100% - var(--Space-x4));
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
.price {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: var(--Spacing-x2);
|
||||
margin: 0 var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
margin: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.details {
|
||||
max-width: 100%;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.header {
|
||||
display: flex;
|
||||
gap: var(--Space-x15);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -13,12 +13,12 @@
|
||||
background-color: var(--Scandic-Peach-30);
|
||||
color: var(--Scandic-Red-100);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
}
|
||||
|
||||
.reference {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.sidePeek {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.packages {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
@@ -11,7 +11,7 @@
|
||||
.package {
|
||||
background-color: var(--Main-Grey-White);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
.room {
|
||||
background-color: var(--Background-Primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Spacing-x3) 0;
|
||||
gap: var(--Space-x2);
|
||||
padding: var(--Space-x3) 0;
|
||||
}
|
||||
|
||||
.roomName {
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.booking {
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@@ -45,12 +45,12 @@
|
||||
.roomDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
.guestDetailsMobileWrapper {
|
||||
display: block;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.guestDetailsDesktopWrapper {
|
||||
@@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
grid-template-columns: 3fr 2fr;
|
||||
width: var(--max-width-content);
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -41,28 +41,28 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.form {
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--Spacing-x5) 0;
|
||||
padding: var(--Space-x5) 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.logIn {
|
||||
padding: var(--Spacing-x9) var(--Spacing-x2);
|
||||
padding: var(--Space-x9) var(--Space-x2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
color: var(--Scandic-Grey-100);
|
||||
}
|
||||
|
||||
@@ -6,34 +6,34 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.headerSkeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
padding: var(--Spacing-x6) var(--Spacing-x2) 0;
|
||||
padding: var(--Space-x6) var(--Space-x2) 0;
|
||||
}
|
||||
|
||||
.cardSkeleton {
|
||||
max-width: 100%;
|
||||
margin: -30px auto 0;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
padding: 0 var(--Space-x2);
|
||||
}
|
||||
|
||||
.ancillariesSkeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
Reference in New Issue
Block a user