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

chore: Replaced deprecated Spacing variables with current values

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-11-12 12:56:22 +00:00
parent 8dce04b931
commit 88644597df
229 changed files with 855 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css
View File

@@ -1,11 +1,11 @@
.main {
background-color: var(--Base-Surface-Primary-light-Normal);
display: grid;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
grid-template-areas: "header" "booking";
margin: 0 auto;
min-height: 100dvh;
padding-top: var(--Spacing-x5);
padding-top: var(--Space-x5);
width: var(--max-width-page);
}
@@ -16,6 +16,6 @@
"booking receipt";
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
padding-top: var(--Spacing-x9);
padding-top: var(--Space-x9);
}
}

8
packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
View File

@@ -5,12 +5,12 @@
}
.header {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-area: header;
}
.hgroup {
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.header .confirmTitle {
@@ -34,7 +34,7 @@
@media screen and (min-width: 768px) {
.actions {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
grid-auto-columns: auto;
grid-auto-flow: column;
grid-template-columns: auto;
@@ -43,6 +43,6 @@
@media screen and (min-width: 1367px) {
.header {
padding-bottom: var(--Spacing-x4);
padding-bottom: var(--Space-x4);
}
}

6
packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css
View File

@@ -7,7 +7,7 @@
}
.container {
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.details {
@@ -16,11 +16,11 @@
.contact,
.hotel {
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.list {
padding-left: var(--Spacing-x2);
padding-left: var(--Space-x2);
}
.link {

4
packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css
View File

@@ -10,10 +10,10 @@
}
.payment {
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.details button.btn {
align-self: flex-start;
margin-top: var(--Spacing-x-half);
margin-top: var(--Space-x05);
}

4
packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css
View File

@@ -8,10 +8,10 @@
display: flex;
flex: 1 0 320px;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
height: 320px;
justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x3);
padding: var(--Space-x4) var(--Space-x3);
}
.link:nth-of-type(1) .promo {

4
packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css
View File

@@ -1,8 +1,8 @@
.promos {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x5) 0;
gap: var(--Space-x2);
padding: var(--Space-x5) 0;
}
@media screen and (min-width: 1367px) {

2
packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css
View File

@@ -26,7 +26,7 @@
.entry {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: space-between;
}

2
packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css
View File

@@ -1,5 +1,5 @@
.room {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
flex-direction: column;
}

22
packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css
View File

@@ -1,16 +1,16 @@
.card {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.content {
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-lg);
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
var(--Spacing-x2);
gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
var(--Space-x2);
}
.img {
@@ -20,13 +20,13 @@
.roomDetails {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.roomName {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
grid-column: 1/-1;
justify-content: space-evenly;
}
@@ -34,23 +34,23 @@
.details {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: space-evenly;
}
.guest {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: space-evenly;
}
@media screen and (min-width: 1367px) {
.content {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
grid-template-columns: auto 1fr;
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2)
var(--Spacing-x2);
padding: var(--Space-x2) var(--Space-x3) var(--Space-x2)
var(--Space-x2);
}
.img {

6
packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css
View File

@@ -3,8 +3,8 @@
border-radius: var(--Corner-radius-lg);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
var(--Spacing-x2);
gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
var(--Space-x2);
align-items: center;
}

28
packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
View File

@@ -1,13 +1,13 @@
.room {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.header {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.benefits {
@@ -15,8 +15,8 @@
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Space-x15);
gap: var(--Space-x1);
padding: var(--Space-x1) var(--Space-x15);
width: min(max-content, 100%);
}
@@ -28,9 +28,9 @@
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-lg);
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
var(--Spacing-x2);
gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
var(--Space-x2);
}
.img {
@@ -39,20 +39,20 @@
.roomDetails {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.roomName {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
grid-column: 1/-1;
}
.details {
display: grid;
gap: var(--Spacing-x-half) var(--Spacing-x3);
gap: var(--Space-x05) var(--Space-x3);
list-style: none;
}
@@ -66,7 +66,7 @@
.guest {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.label {
@@ -97,10 +97,10 @@
}
.booking {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
grid-template-columns: auto 1fr;
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2)
var(--Spacing-x2);
padding: var(--Space-x2) var(--Space-x3) var(--Space-x2)
var(--Space-x2);
}
.roomDetails {

2
packages/booking-flow/lib/components/BookingConfirmation/Rooms/rooms.module.css
View File

@@ -1,7 +1,7 @@
.rooms {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.room {

4
packages/booking-flow/lib/components/BookingConfirmation/bookingConfirmation.module.css
View File

@@ -1,9 +1,9 @@
.booking {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
grid-area: booking;
padding-bottom: var(--Spacing-x9);
padding-bottom: var(--Space-x9);
}
.aside {

22
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
View File

@@ -1,20 +1,20 @@
.container {
position: relative;
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.bookingCode {
height: 60px;
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
}
.bookingCodeLabel {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
position: relative;
color: var(--Text-Secondary);
}
@@ -39,7 +39,7 @@
.bookingCodeRemember,
.bookingCodeRememberVisible {
display: none;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.bookingCodeRememberVisible {
@@ -49,7 +49,7 @@
.bookingCodeTooltip {
max-width: 560px;
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
color: var(--Text-Secondary);
}
@@ -94,12 +94,12 @@
background: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Space-x15);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
padding: var(--Spacing-x2);
padding: var(--Space-x2);
width: 320px;
}
.popover {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.overlayTrigger {
position: absolute;
@@ -107,7 +107,7 @@
bottom: 0;
display: block;
left: 0;
right: var(--Spacing-x3);
right: var(--Space-x3);
}
}
@@ -124,10 +124,10 @@
border: 1px solid var(--Border-Interactive-Focus);
}
.bookingCodeRememberVisible {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
position: absolute;
top: calc(100% + var(--Spacing-x3));
left: calc(0% - var(--Spacing-x-half));
top: calc(100% + var(--Space-x3));
left: calc(0% - var(--Space-x05));
width: 360px;
box-shadow: var(--popup-box-shadow);
}

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css
View File

@@ -24,7 +24,7 @@
.rewardNightTooltip {
max-width: 560px;
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
@media screen and (max-width: 767px) {

4
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
View File

@@ -4,9 +4,9 @@
border-radius: var(--Corner-radius-md);
cursor: pointer;
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
outline: none;
padding: var(--Spacing-x1);
padding: var(--Space-x1);
}
.default {

12
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css
View File

@@ -7,7 +7,7 @@
left: 0;
list-style: none;
overflow-y: auto;
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
position: fixed;
top: calc(140px + max(var(--sitewide-alert-sticky-height), 25px));
width: 100%;
@@ -16,15 +16,15 @@
}
.default {
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.error {
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.search {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
@media (min-width: 768px) {
@@ -32,11 +32,11 @@
position: absolute;
width: 360px;
/**
* var(--Spacing-x4) to account for padding inside
* var(--Space-x4) to account for padding inside
* the bookingwidget and to add the padding for the
* box itself
*/
top: calc(100% + var(--Spacing-x4));
top: calc(100% + var(--Space-x4));
z-index: 99;
box-shadow: var(--popup-box-shadow);
max-height: 380px;

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
View File

@@ -1,7 +1,7 @@
.listItem {
border-radius: var(--Corner-radius-md);
cursor: pointer;
padding: var(--Spacing-x1);
padding: var(--Space-x1);
}
.default {

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css
View File

@@ -5,5 +5,5 @@
}
.label {
padding: 0 var(--Spacing-x1);
padding: 0 var(--Space-x1);
}

8
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
View File

@@ -17,19 +17,19 @@
}
.divider {
margin: var(--Spacing-x2) var(--Spacing-x0) var(--Spacing-x1);
margin: var(--Space-x2) 0 var(--Space-x1);
}
.noResultsDivider {
margin: var(--Spacing-x2) 0;
margin: var(--Space-x2) 0;
}
.heading {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.text {
padding: 0 var(--Spacing-x1);
padding: 0 var(--Space-x1);
}

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
View File

@@ -3,7 +3,7 @@
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
position: relative;
height: 60px;

12
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
View File

@@ -7,8 +7,8 @@
.option {
display: flex;
gap: var(--Spacing-x2);
margin-top: var(--Spacing-x2);
gap: var(--Space-x2);
margin-top: var(--Space-x2);
align-items: center;
}
@@ -17,7 +17,7 @@
flex-direction: column;
}
.voucherSkeletonContainer {
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
}
.checkbox {
@@ -32,7 +32,7 @@
@media screen and (min-width: 768px) {
.options {
flex-direction: row;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.option {
margin-top: 0;
@@ -41,7 +41,7 @@
.optionsContainer {
display: grid;
grid-template-columns: auto auto;
column-gap: var(--Spacing-x2);
column-gap: var(--Space-x2);
}
}
@@ -58,7 +58,7 @@
.options {
flex-direction: column;
max-width: 190px;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.option:hover {
cursor: not-allowed;

20
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
View File

@@ -19,7 +19,7 @@
.buttonContainer {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.showOnTablet {
@@ -36,14 +36,14 @@
@media screen and (max-width: 767px) {
.voucherContainer {
padding: var(--Spacing-x2) 0 var(--Spacing-x4);
padding: var(--Space-x2) 0 var(--Space-x4);
}
}
@media screen and (max-width: 1366px) {
.inputContainer {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.rooms,
@@ -55,7 +55,7 @@
.rooms,
.when {
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
}
.button {
@@ -86,7 +86,7 @@
.inputContainer {
display: flex;
flex: 2;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
margin-left: calc(-1 * var(--Space-x15));
}
.voucherContainer {
@@ -106,7 +106,7 @@
.rooms,
.when {
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
border-radius: var(--Corner-radius-md);
}
@@ -147,7 +147,7 @@
flex-wrap: wrap;
}
.inputContainer {
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
padding: var(--Space-x2) var(--Space-x2) var(--Space-x2)
var(--Layout-Tablet-Margin-Margin-min);
flex-basis: 80%;
}
@@ -156,7 +156,7 @@
margin: 0;
}
.input .buttonContainer .button {
padding: var(--Spacing-x1);
padding: var(--Space-x1);
width: 48px;
height: 48px;
}
@@ -171,7 +171,7 @@
display: flex;
background: var(--Base-Surface-Primary-light-Hover);
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
padding: var(--Space-x2) var(--Layout-Tablet-Margin-Margin-min);
}
.showOnTablet {
@@ -184,7 +184,7 @@
@media screen and (min-width: 1367px) {
.input {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.bookingCodeDisabled {

10
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css
View File

@@ -28,12 +28,12 @@
@media screen and (min-width: 1367px) {
.default {
padding: var(--Space-x15) var(--Spacing-x2) var(--Space-x15)
var(--Spacing-x1);
padding: var(--Space-x15) var(--Space-x2) var(--Space-x15)
var(--Space-x1);
}
.full {
padding: var(--Spacing-x1) 0;
padding: var(--Space-x1) 0;
}
.form {
@@ -43,8 +43,8 @@
}
.compact {
padding: var(--Space-x15) var(--Spacing-x2) var(--Space-x15)
var(--Spacing-x1);
padding: var(--Space-x15) var(--Space-x2) var(--Space-x15)
var(--Space-x1);
white-space: nowrap;
}
}

6
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css
View File

@@ -58,7 +58,7 @@ td.day,
td.day[data-today="true"] {
color: var(--UI-Text-High-contrast);
height: 40px;
padding: var(--Spacing-x-half);
padding: var(--Space-x05);
width: 40px;
}
@@ -104,11 +104,11 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
.footer {
display: flex;
justify-content: flex-end;
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.divider {
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.nav {

8
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
View File

@@ -24,7 +24,7 @@
align-self: flex-end;
background-color: var(--Main-Grey-White);
grid-area: header;
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
position: sticky;
top: 0;
z-index: 10;
@@ -61,7 +61,7 @@ div.months {
}
.month:last-of-type {
padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
padding-bottom: calc(var(--sticky-button-height) + var(--Space-x2));
}
.monthCaption {
@@ -82,7 +82,7 @@ div.months {
);
display: flex;
grid-area: content;
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
padding: var(--Space-x1) var(--Space-x2) var(--Space-x7);
position: fixed;
bottom: 0;
right: 0;
@@ -136,7 +136,7 @@ td.day,
td.day[data-today="true"] {
color: var(--UI-Text-High-contrast);
height: 40px;
padding: var(--Spacing-x-half);
padding: var(--Space-x05);
width: 40px;
}

4
packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
View File

@@ -54,13 +54,13 @@
.hideWrapper {
border-radius: var(--Corner-radius-lg);
box-shadow: var(--popup-box-shadow);
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
position: absolute;
/**
BookingWidget padding +
border-width +
wanted space below booking widget
*/
top: calc(100% + var(--Spacing-x1) + 1px + var(--Spacing-x4));
top: calc(100% + var(--Space-x1) + 1px + var(--Space-x4));
}
}

4
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css
View File

@@ -10,12 +10,12 @@
.childInfoContainer {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: 1fr 2fr;
}
.error {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}

28
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -41,17 +41,17 @@
.roomContainer {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.roomDetailsContainer {
display: grid;
gap: var(--Spacing-x2);
padding-bottom: var(--Spacing-x1);
gap: var(--Space-x2);
padding-bottom: var(--Space-x1);
}
.roomHeading {
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.btn {
@@ -78,11 +78,11 @@
.footer {
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.roomContainer {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.roomContainer:last-of-type {
@@ -116,7 +116,7 @@
.header {
display: grid;
grid-area: header;
padding: var(--Spacing-x3) var(--Spacing-x2) 0;
padding: var(--Space-x3) var(--Space-x2) 0;
}
.close {
@@ -134,7 +134,7 @@
rgba(255, 255, 255, 0) 7.5%,
#ffffff 82.5%
);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x7);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x7);
position: sticky;
bottom: 0;
width: 100%;
@@ -155,12 +155,12 @@
}
.addRoomMobileContainer .addRoomMobileDisabledText {
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
background-color: var(--Background-Primary);
margin: 0 var(--Spacing-x2);
margin: 0 var(--Space-x2);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
}
@@ -178,7 +178,7 @@
}
.roomContainer {
padding: var(--Spacing-x2) 0 0 0;
padding: var(--Space-x2) 0 0 0;
}
.roomContainer:first-of-type {
@@ -216,7 +216,7 @@
border-radius: var(--Corner-radius-lg);
box-shadow: var(--popup-box-shadow);
max-width: calc(100vw - 20px);
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
width: 360px;
}
@@ -230,7 +230,7 @@
.footer {
grid-template-columns: auto auto;
padding-top: var(--Spacing-x2);
padding-top: var(--Space-x2);
}
.footer button {

2
packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
View File

@@ -6,7 +6,7 @@
cursor: pointer;
display: grid;
gap: var(--Space-x15);
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
width: 100%;
/* In some cases the lingering pressend event will trigger the */

4
packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
View File

@@ -33,10 +33,10 @@
grid-template-rows: auto 1fr;
background-color: var(--UI-Input-Controls-Surface-Normal);
border-radius: 0;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
width: 100%;
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
padding: var(--Space-x3) var(--Space-x2) var(--Space-x7);
position: fixed;
left: 0;
bottom: -100%;

6
packages/booking-flow/lib/components/Contact/contact.module.css
View File

@@ -2,9 +2,9 @@
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
font-family: var(--typography-Body-Regular-fontFamily);
margin-bottom: var(--Spacing-x3);
margin-bottom: var(--Space-x3);
}
.address,
@@ -50,7 +50,7 @@
grid-row: 4 / 4;
font-size: var(--typography-Footnote-Regular-fontSize);
line-height: ();
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.ecoLabelText {

4
packages/booking-flow/lib/components/EnterDetails/BedType/bedOptions.module.css
View File

@@ -1,12 +1,12 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.form {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
width: min(696px, 100%);
}

4
packages/booking-flow/lib/components/EnterDetails/Breakfast/breakfast.module.css
View File

@@ -1,12 +1,12 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.form {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
width: min(696px, 100%);
}

4
packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
View File

@@ -66,7 +66,7 @@
border-radius: var(--Corner-radius-lg);
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
overflow: hidden;
padding: var(--Spacing-x5) var(--Spacing-x3);
padding: var(--Space-x5) var(--Space-x3);
width: min(90dvw, 560px);
&[data-entering] {
@@ -82,7 +82,7 @@
align-items: center;
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.text {

8
packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
View File

@@ -1,7 +1,7 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.selections {
@@ -9,13 +9,13 @@
border-radius: var(--Corner-radius-Large);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2);
gap: var(--Space-x2);
padding: var(--Space-x2);
}
.checkboxContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
width: min(800px, 100%);
}

6
packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
View File

@@ -1,12 +1,12 @@
.modalContent {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
width: 100%;
}
.innerModalContent {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
justify-items: center;
}
@@ -18,7 +18,7 @@
.newPrice {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-items: center;
}

6
packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/details.module.css
View File

@@ -1,11 +1,11 @@
.form {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
width: min(100%, 696px);
}
@@ -14,7 +14,7 @@
}
.footer {
margin-top: var(--Spacing-x1);
margin-top: var(--Space-x1);
}
@media screen and (min-width: 768px) {

6
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css
View File

@@ -1,17 +1,17 @@
.container {
display: grid;
grid-column: 1/-1;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.additionalFormData {
display: grid;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.dateField {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.required:after {

6
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/details.module.css
View File

@@ -1,11 +1,11 @@
.form {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
width: min(100%, 696px);
}
@@ -14,7 +14,7 @@
}
.footer {
margin-top: var(--Spacing-x1);
margin-top: var(--Space-x1);
}
@media screen and (min-width: 768px) {

2
packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/bookingAlert.module.css
View File

@@ -1,4 +1,4 @@
.wrapper {
margin-top: var(--Spacing-x3);
margin-top: var(--Space-x3);
max-width: min(100%, 620px);
}

6
packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css
View File

@@ -1,8 +1,8 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding-top: var(--Spacing-x2);
gap: var(--Space-x1);
padding-top: var(--Space-x2);
}
.content ol {
@@ -13,7 +13,7 @@
list-style: none;
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.summary::-webkit-details-marker,

4
packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.card {
@@ -27,7 +27,7 @@
.priceItem {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.priceItem > span {

4
packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/timeoutSpinner.module.css
View File

@@ -4,12 +4,12 @@
align-items: center;
justify-content: center;
min-height: 100vh;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
text-align: center;
}
.container .heading {
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.messageContainer {

8
packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css
View File

@@ -1,7 +1,7 @@
.paymentSection {
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.disabled {
@@ -12,14 +12,14 @@
.paymentContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
max-width: 696px;
}
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.paymentOptionContainer {
@@ -46,7 +46,7 @@
.checkboxContainer {
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-Large);
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
@media screen and (min-width: 1367px) {

22
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
View File

@@ -20,16 +20,16 @@
.content {
width: 100%;
height: 100%;
padding: var(--Spacing-x4);
padding: var(--Space-x4);
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.closeButton {
position: absolute;
top: var(--Spacing-x4);
right: var(--Spacing-x4);
top: var(--Space-x4);
right: var(--Space-x4);
}
.roomsSection {
@@ -39,10 +39,10 @@
}
.rowContainer {
padding: var(--Spacing-x2) 0;
padding: var(--Space-x2) 0;
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.roomContainer:first-child {
@@ -61,21 +61,21 @@
.updatedPrice {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.footer {
display: flex;
flex-direction: column-reverse;
justify-content: center;
gap: var(--Spacing-x2);
padding-top: var(--Spacing-x6);
gap: var(--Space-x2);
padding-top: var(--Space-x6);
margin-top: auto;
}
@media screen and (min-width: 1367px) {
.dialog {
padding: var(--Spacing-x6);
padding: var(--Space-x6);
align-items: center;
}
@@ -91,6 +91,6 @@
.footer {
flex-direction: row;
padding: var(--Spacing-x6) 0;
padding: var(--Space-x6) 0;
}
}

16
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
View File

@@ -58,37 +58,37 @@
box-shadow: var(--modal-box-shadow);
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
padding: var(--Spacing-x5) var(--Spacing-x4);
gap: var(--Space-x4);
padding: var(--Space-x5) var(--Space-x4);
width: 100dvw;
}
.header {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.titleContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.footer {
display: flex;
flex-direction: column-reverse;
justify-content: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.modal .prices {
display: flex;
align-items: center;
justify-content: center;
gap: var(--Spacing-x-half);
padding-top: var(--Spacing-x-half);
gap: var(--Space-x05);
padding-top: var(--Space-x05);
}
@media screen and (min-width: 1367px) {
@@ -98,7 +98,7 @@
.dialog {
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x6);
padding: var(--Space-x6);
width: fit-content;
}

2
packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css
View File

@@ -1,3 +1,3 @@
.header {
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}

2
packages/booking-flow/lib/components/EnterDetails/Section/section.module.css
View File

@@ -16,7 +16,7 @@
}
.contentWrapper {
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.content {

2
packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css
View File

@@ -14,7 +14,7 @@
.main {
width: 100%;
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.headerContainer {

2
packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/Breakfast/breakfast.module.css
View File

@@ -1,6 +1,6 @@
.entry {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: space-between;
}

2
packages/booking-flow/lib/components/FnFNotAllowedAlert/FnFNotAllowedAlert.module.css
View File

@@ -2,5 +2,5 @@
max-width: var(--max-width-page);
margin: auto;
min-height: 30dvh;
padding: var(--Spacing-x5) 0;
padding: var(--Space-x5) 0;
}

6
packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css
View File

@@ -1,13 +1,13 @@
.hotelCardDialogListing {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-items: flex-end;
overflow-x: scroll;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
padding-inline: var(--Spacing-x2);
scroll-padding-inline: var(--Spacing-x2);
padding-inline: var(--Space-x2);
scroll-padding-inline: var(--Space-x2);
overscroll-behavior-inline: contain;
scroll-behavior: smooth;

4
packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css
View File

@@ -1,6 +1,6 @@
.hotelCards {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
margin-bottom: var(--Spacing-x2);
gap: var(--Space-x2);
margin-bottom: var(--Space-x2);
}

2
packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css
View File

@@ -1,5 +1,5 @@
.content {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
color: var(--Text-Default);
}

8
packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css
View File

@@ -1,12 +1,12 @@
.tbody {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
flex-direction: column;
width: 100%;
}
.tbody:has(tr > th) {
padding-top: var(--Spacing-x2);
padding-top: var(--Space-x2);
}
.tbody:has(tr > th):not(:first-of-type),
@@ -15,9 +15,9 @@
}
.tbody:not(:last-child) {
padding-bottom: var(--Spacing-x2);
padding-bottom: var(--Space-x2);
}
.border {
padding-top: var(--Spacing-x2);
padding-top: var(--Space-x2);
}

4
packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css
View File

@@ -21,6 +21,6 @@
.priceVariants {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
gap: var(--Space-x1);
padding: var(--Space-x2);
}

14
packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
View File

@@ -1,10 +1,10 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
position: relative;
margin-bottom: calc(
var(--Spacing-x4) * 2 + 80px
var(--Space-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */
}
@@ -33,7 +33,7 @@
.facilityList {
column-count: 2;
column-gap: var(--Spacing-x2);
column-gap: var(--Space-x2);
color: var(--Text-Secondary);
}
.facilityList li > span:nth-child(2) {
@@ -43,8 +43,8 @@
.facilityList li {
display: flex !important; /* Overrides the display none from grids.stackable on Hotel Page */
gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x-half);
gap: var(--Space-x1);
margin-bottom: var(--Space-x05);
}
.bedOptions {
@@ -53,8 +53,8 @@
.bedOptions li {
display: flex;
gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x-half);
gap: var(--Space-x1);
margin-bottom: var(--Space-x05);
}
.facilityList li svg {

34
packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
View File

@@ -64,8 +64,8 @@
}
.sorter {
padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x-half)
var(--Spacing-x2);
padding: var(--Space-x15) var(--Space-x2) var(--Space-x05)
var(--Space-x2);
flex: 0 0 auto;
}
@@ -81,18 +81,18 @@
}
.filters {
padding: var(--Spacing-x2);
padding-top: calc(var(--Spacing-x3) + var(--Spacing-x-half));
padding: var(--Space-x2);
padding-top: calc(var(--Space-x3) + var(--Space-x05));
flex: 1 1 auto;
overflow-y: auto;
}
.filters ul {
margin-top: var(--Spacing-x3);
margin-top: var(--Space-x3);
}
.filters ul li {
padding-bottom: var(--Spacing-x1);
padding-bottom: var(--Space-x1);
}
.header {
@@ -115,8 +115,8 @@
.footer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x3) var(--Spacing-x2);
gap: var(--Space-x1);
padding: var(--Space-x3) var(--Space-x2);
flex: 0 0 auto;
border-top: 1px solid var(--Base-Border-Subtle);
}
@@ -133,7 +133,7 @@
.divider {
display: block;
padding: 0 var(--Spacing-x3);
padding: 0 var(--Space-x3);
}
.header {
@@ -155,7 +155,7 @@
}
.content {
gap: var(--Spacing-x4);
gap: var(--Space-x4);
height: auto;
}
@@ -164,14 +164,14 @@
}
.sorter {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.sorter,
.filters,
.footer,
.divider {
padding: 0 var(--Spacing-x3);
padding: 0 var(--Space-x3);
}
.footer {
@@ -183,21 +183,21 @@
z-index: 1;
border-bottom-left-radius: var(--Corner-radius-lg);
border-bottom-right-radius: var(--Corner-radius-lg);
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
}
.filters aside > form {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.filters aside form > div:last-child {
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.filters aside ul {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: var(--Spacing-x1);
margin-top: var(--Space-x1);
}
.filters ul li:hover {
@@ -206,7 +206,7 @@
outline: none;
}
.filters ul li {
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
}
}
@media screen and (min-width: 1024) {

10
packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css
View File

@@ -5,12 +5,12 @@
.container form {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.facilities {
font-family: var(--typography-Body-Bold-fontFamily);
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.facilities:first-of-type {
@@ -18,7 +18,7 @@
}
.facilities ul {
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.facilities:last-child {
padding-bottom: 0;
@@ -28,12 +28,12 @@
display: grid;
grid-template-columns: repeat(2, minmax(min-content, max-content));
gap: var(--Space-x15);
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
align-items: center;
}
.filter:first-child {
margin-top: var(--Spacing-x1);
margin-top: var(--Space-x1);
}
.filter input[type="checkbox"] {

2
packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
View File

@@ -16,5 +16,5 @@
display: block;
width: 100%;
overflow-y: auto;
padding-top: var(--Spacing-x2);
padding-top: var(--Space-x2);
}

6
packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css
View File

@@ -15,8 +15,8 @@
flex-direction: row;
flex-wrap: wrap;
margin-top: 20px;
gap: var(--Spacing-x2);
padding-top: var(--Spacing-x6);
gap: var(--Space-x2);
padding-top: var(--Space-x6);
height: 100%;
}
@@ -34,7 +34,7 @@
}
.listingContainer {
background-color: var(--Base-Surface-Secondary-light-Normal);
padding: var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Space-x3) var(--Space-x4);
overflow-y: auto;
max-width: 505px;
position: relative;

22
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
View File

@@ -2,8 +2,8 @@
border-radius: var(--Corner-radius-lg);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x3);
gap: var(--Space-x2);
padding: var(--Space-x3);
height: 100%;
}
@@ -31,13 +31,13 @@
.date {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: flex-start;
grid-area: date;
}
.link {
margin-top: var(--Spacing-x1);
margin-top: var(--Space-x1);
}
.addOns {
@@ -50,13 +50,13 @@
.rateDetailsPopover {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
max-width: 360px;
}
.entry {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: space-between;
}
@@ -67,7 +67,7 @@
.total {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.bottomDivider {
@@ -79,15 +79,15 @@
}
.terms {
margin-top: var(--Spacing-x3);
margin-bottom: var(--Spacing-x3);
margin-top: var(--Space-x3);
margin-bottom: var(--Space-x3);
}
.termsText:nth-child(n) {
display: flex;
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.terms .termsIcon {
margin-right: var(--Spacing-x1);
margin-right: var(--Space-x1);
}
@media screen and (min-width: 1367px) {

12
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
View File

@@ -27,8 +27,8 @@
.summaryPriceContainer {
display: flex;
flex-direction: row;
gap: var(--Spacing-x4);
padding-top: var(--Spacing-x2);
gap: var(--Space-x4);
padding-top: var(--Space-x2);
width: 100%;
}
@@ -41,12 +41,12 @@
align-self: center;
display: flex;
width: 100%;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.petInfo {
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding-left: var(--Spacing-x2);
padding-left: var(--Space-x2);
display: none;
}
@@ -77,7 +77,7 @@
@media (min-width: 1367px) {
.summary {
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x3) 0 var(--Spacing-x5);
padding: var(--Space-x3) 0 var(--Space-x5);
}
.content {
@@ -98,7 +98,7 @@
.summaryText {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.summaryPriceTextMobile {

8
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
View File

@@ -24,18 +24,18 @@
}
.modifyButtonContainer {
bottom: var(--Spacing-x1);
bottom: var(--Space-x1);
position: absolute;
right: var(--Spacing-x1);
right: var(--Space-x1);
}
div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Spacing-x1);
padding-bottom: var(--Space-x1);
}
@media screen and (max-width: 767px) {
.selectedRoomPanel {
gap: var(--Spacing-x1);
gap: var(--Space-x1);
grid-template-areas: "image" "content";
grid-template-columns: 1fr;
grid-template-rows: auto auto;

8
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
View File

@@ -4,7 +4,7 @@
border-radius: var(--Corner-radius-lg);
display: flex;
flex-direction: column;
padding: var(--Spacing-x3);
padding: var(--Space-x3);
}
.header {
@@ -30,7 +30,7 @@
}
.roomSelectionPanel {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.roomSelectionPanelContainer.active .roomSelectionPanel,
@@ -41,7 +41,7 @@
}
.roomSelectionPanelContainer.active .roomPanel {
padding-top: var(--Spacing-x1);
padding-top: var(--Space-x1);
}
.roomSelectionPanelContainer.selected .roomSelectionPanel {
@@ -50,6 +50,6 @@
@media (max-width: 767px) {
.roomContainer {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
}

6
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
View File

@@ -1,5 +1,5 @@
.imageContainer {
margin: 0 calc(-1 * var(--Spacing-x2));
margin: 0 calc(-1 * var(--Space-x2));
height: 190px;
position: relative;
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
@@ -12,7 +12,7 @@ div[data-multiroom="true"] .imageContainer {
.chipContainer {
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
left: 12px;
position: absolute;
top: 12px;
@@ -22,7 +22,7 @@ div[data-multiroom="true"] .imageContainer {
.chip {
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);
}
.imageContainer img {

4
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
View File

@@ -2,7 +2,7 @@
background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
margin: 0;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}

4
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
View File

@@ -6,7 +6,7 @@
display: grid;
font-size: 14px;
gap: var(--Space-x15);
padding: 0 var(--Spacing-x2) var(--Spacing-x2);
padding: 0 var(--Space-x2) var(--Space-x2);
position: relative;
}
@@ -21,5 +21,5 @@ div[data-multiroom="true"] .listItem {
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

2
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css
View File

@@ -1,7 +1,7 @@
.roomList {
list-style: none;
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
overflow: hidden;
}

2
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css
View File

@@ -13,5 +13,5 @@
flex-wrap: wrap;
justify-content: space-between;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

4
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/rooms.module.css
View File

@@ -3,6 +3,6 @@
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x5) 0;
gap: var(--Space-x2);
padding: var(--Space-x5) 0;
}

2
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RoomsContainerSkeleton.module.css
View File

@@ -19,5 +19,5 @@
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

10
packages/booking-flow/lib/components/SidePanel/sidePanel.module.css
View File

@@ -11,7 +11,7 @@
}
.summary {
margin-top: calc(0px - var(--Spacing-x9));
margin-top: calc(0px - var(--Space-x9));
}
.hider {
@@ -29,7 +29,7 @@
.summary .hider {
background-color: var(--Scandic-Brand-Warm-White);
height: 40px;
margin-top: var(--Spacing-x4);
margin-top: var(--Space-x4);
top: calc(var(--booking-widget-desktop-height) - 6px);
}
@@ -40,11 +40,11 @@
border-style: solid;
border-width: 1px;
border-bottom: none;
margin-top: calc(0px - var(--Spacing-x9));
margin-top: calc(0px - var(--Space-x9));
position: sticky;
top: calc(
var(--booking-widget-desktop-height) + var(--Spacing-x2) +
var(--Spacing-x-half)
var(--booking-widget-desktop-height) + var(--Space-x2) +
var(--Space-x05)
);
z-index: 9;
}

4
packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
View File

@@ -13,8 +13,8 @@
border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px
var(--Corner-radius-xl);
align-items: center;
padding: var(--Space-x15) var(--Spacing-x2);
gap: var(--Spacing-x2);
padding: var(--Space-x15) var(--Space-x2);
gap: var(--Space-x2);
position: relative;
}

12
packages/booking-flow/lib/pages/EnterDetailsPage.module.css
View File

@@ -1,18 +1,18 @@
.container {
display: grid;
gap: var(--Spacing-x3) var(--Spacing-x9);
gap: var(--Space-x3) var(--Space-x9);
}
.content {
width: var(--max-width-page);
margin: var(--Spacing-x3) auto 0;
margin: var(--Space-x3) auto 0;
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.header {
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.summary {
@@ -28,12 +28,12 @@
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
width: var(--max-width-page);
margin: var(--Spacing-x5) auto 0;
margin: var(--Space-x5) auto 0;
}
.content {
width: 100%;
margin: var(--Spacing-x3) 0 0;
margin: var(--Space-x3) 0 0;
}
.summary {