From 88644597df492775acea2fbd7e745ea9bbb6465d Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 12 Nov 2025 12:56:22 +0000 Subject: [PATCH] chore: Replaced deprecated Spacing variables with current values MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../(protected)/my-pages/layout.module.css | 2 +- .../my-pages/profile/edit/page.module.css | 6 +-- .../get-booking/page.module.css | 2 +- .../linkEmploymentError.module.css | 2 +- .../components/SASModal.module.css | 8 ++-- .../sas-x-scandic/layout.module.css | 6 +-- .../sas-x-scandic/link/link-sas.module.css | 20 ++++----- .../otp/OneTimePasswordForm.module.css | 12 ++--- .../success/transferSuccess.module.css | 20 ++++----- .../campaignHotelListing.module.css | 6 +-- .../Blocks/CardGallery/cardGallery.module.css | 2 +- .../JobList/Filter/filter.module.css | 2 +- .../JobylonFeed/JobList/jobList.module.css | 4 +- .../JobylonCard/jobylonCard.module.css | 6 +-- .../LoyaltyLevels/loyaltyLevels.module.css | 6 +-- .../DesktopHeader/desktopHeader.module.css | 6 +-- .../LargeTable/largeTable.module.css | 8 ++-- .../LevelSummary/levelSummary.module.css | 8 ++-- .../RewardList/Card/rewardCard.module.css | 2 +- .../RewardList/rewardList.module.css | 2 +- .../RewardValue/rewardValue.module.css | 4 +- .../YourLevelScript/yourLevel.module.css | 4 +- .../OverviewTable/overviewTable.module.css | 24 +++++----- .../AwardPoints/awardPoints.module.css | 4 +- .../ExpiringPoints/expiringPoints.module.css | 4 +- .../Points/Overview/overview.module.css | 2 +- .../Rewards/CurrentRewards/current.module.css | 8 ++-- .../Rewards/NextLevel/next.module.css | 6 +-- .../Rewards/Redeem/redeem.module.css | 22 +++++----- .../LinkedAccounts/linkedAccounts.module.css | 28 ++++++------ .../TransferPoints/transferPoints.module.css | 44 +++++++++---------- .../Stays/ListContainer/container.module.css | 2 +- .../fullWidthCampaign.module.css | 8 ++-- .../ShortcutsList/shortcutsList.module.css | 2 +- .../Blocks/TextCols/textcols.module.css | 6 +-- .../Blocks/UspGrid/uspgrid.module.css | 4 +- .../components/Carousel/carousel.module.css | 10 ++--- .../CountryMap/CityList/cityList.module.css | 2 +- .../hotelListingItem.module.css | 18 ++++---- .../destinationListing.module.css | 2 +- .../Destination/destination.module.css | 4 +- .../destinationsList.module.css | 2 +- .../Sidepeek/sidepeek.module.css | 2 +- .../TopImages/topImages.module.css | 12 ++--- .../LoyaltyPage/loyaltyPage.module.css | 12 ++--- .../StartPage/InfoCard/infoCard.module.css | 4 +- .../StartPage/startPage.module.css | 16 +++---- .../StaticPages/staticPage.module.css | 26 +++++------ .../DatePicker/Single/desktop.module.css | 6 +-- .../DatePicker/Single/mobile.module.css | 8 ++-- .../Filter/Checkbox/checkbox.module.css | 2 +- .../Filter/filter.module.css | 8 ++-- .../destinationFilterAndSort.module.css | 20 ++++----- .../components/Dialog/dialog.module.css | 10 ++--- .../CallToActions/callToActions.module.css | 2 +- .../FormContent/formContent.module.css | 4 +- .../Forms/Edit/Profile/form.module.css | 8 ++-- .../MainMenuButton/menuButton.module.css | 4 +- .../MainMenu/MobileMenu/mobileMenu.module.css | 4 +- .../myPagesMenuContent.module.css | 10 ++--- .../MegaMenu/megaMenu.module.css | 30 ++++++------- .../navigationMenuItem.module.css | 2 +- .../navigationMenuList.module.css | 4 +- .../Header/MainMenu/mainMenu.module.css | 10 ++--- .../Header/TopMenu/topMenu.module.css | 6 +-- .../components/Hero/hero.module.css | 2 +- .../FindMyBooking/findMyBooking.module.css | 14 +++--- .../ActionButtons/actionButtons.module.css | 2 +- .../PriceDetails/priceDetails.module.css | 2 +- .../confirmationStep.module.css | 2 +- .../selectAncillaryStep.module.css | 8 ++-- .../selectQuantityStep.module.css | 6 +-- .../addAncillaryFlowModal.module.css | 4 +- .../addedAncillaries.module.css | 30 ++++++------- .../MyStay/Ancillaries/ancillaries.module.css | 4 +- .../SummaryCard/summaryCard.module.css | 8 ++-- .../BookingSummary/bookingSummary.module.css | 4 +- .../GuestDetails/guestDetails.module.css | 22 +++++----- .../MyStay/Header/header.module.css | 4 +- .../Modal/ModalContent/Body/body.module.css | 2 +- .../ModalContent/Footer/footer.module.css | 2 +- .../ModifyContact/modifyContact.module.css | 8 ++-- .../MyStay/Promo/promo.module.css | 4 +- .../MyStay/Receipt/Footer/footer.module.css | 2 +- .../Specification/specification.module.css | 6 +-- .../MyStay/Receipt/Total/total.module.css | 9 ++-- .../MyStay/Receipt/receipt.module.css | 14 +++--- .../Actions/CancelStay/cancelStay.module.css | 8 ++-- .../Confirmation/confirmation.module.css | 4 +- .../Steps/Form/NewDates/newDates.module.css | 8 ++-- .../GuaranteeLateArrival/Form/form.module.css | 8 ++-- .../ReferenceCard/Actions/actions.module.css | 6 +-- .../PriceContainer/priceContainer.module.css | 6 +-- .../ReferenceCard/referenceCard.module.css | 2 +- .../Rooms/MultiRoom/multiRoom.module.css | 14 +++--- .../Rooms/MultiRoom/sidePeek.module.css | 2 +- .../PriceDetails/details.module.css | 6 +-- .../BookingInformation/information.module.css | 4 +- .../SingleRoom/Details/details.module.css | 2 +- .../Rooms/SingleRoom/Header/header.module.css | 6 +-- .../SingleRoom/Packages/packages.module.css | 4 +- .../MyStay/Rooms/SingleRoom/room.module.css | 18 ++++---- .../HotelReservation/MyStay/index.module.css | 14 +++--- .../HotelReservation/MyStay/myStay.module.css | 14 +++--- .../languageSwitcherContainer.module.css | 12 ++--- .../languageSwitcherContent.module.css | 10 ++--- .../languageSwitcher.module.css | 4 +- .../Skeleton/skeleton.module.css | 4 +- .../MyPages/Pagination/pagination.module.css | 4 +- .../CreditCardList/CreditCardList.module.css | 2 +- .../CreditCardRow/creditCardRow.module.css | 4 +- .../Profile/Header/header.module.css | 2 +- .../ExpirationDate/expirationDate.module.css | 4 +- .../sasTierComparison.module.css | 26 +++++------ .../components/Section/Link/link.module.css | 2 +- .../bookedRoomSidePeekContent.module.css | 40 ++++++++--------- .../Contact/ContactRow/contactRow.module.css | 4 +- .../JoinLoyalty/Contact/contact.module.css | 6 +-- .../JoinLoyalty/ReadMore/readMore.module.css | 2 +- .../JoinLoyalty/joinLoyalty.module.css | 8 ++-- .../components/Sidebar/sidebar.module.css | 8 ++-- .../AncillaryCard/ancillaryCard.module.css | 4 +- .../PasswordInput/passwordInput.module.css | 2 +- .../Grids/Dynamic/dynamic.module.css | 2 +- .../Grids/Stackable/stackable.module.css | 2 +- .../LoyaltyCard/loyaltyCard.module.css | 8 ++-- .../TeaserCard/Sidepeek/sidepeek.module.css | 2 +- .../TeaserCard/teaserCard.module.css | 4 +- .../AccountPage/accountPage.module.css | 4 +- .../LoyaltyPage/loyaltyPage.module.css | 6 +-- .../Confirmation/confirmation.module.css | 6 +-- .../Header/header.module.css | 8 ++-- .../HotelDetails/hotelDetails.module.css | 6 +-- .../PaymentDetails/paymentDetails.module.css | 4 +- .../Promos/Promo/promo.module.css | 4 +- .../Promos/promos.module.css | 4 +- .../Receipt/Room/room.module.css | 2 +- .../Room/roomSkeletonLoader.module.css | 2 +- .../linkedReservationCardSkeleton.module.css | 22 +++++----- .../Rooms/LinkedReservation/retry.module.css | 6 +-- .../Rooms/Room/room.module.css | 28 ++++++------ .../Rooms/rooms.module.css | 2 +- .../bookingConfirmation.module.css | 4 +- .../BookingCode/booking-code.module.css | 22 +++++----- .../RewardNight/reward-night.module.css | 2 +- .../ClearSearchButton/button.module.css | 4 +- .../SearchList/Dialog/dialog.module.css | 12 ++--- .../List/ListItem/listItem.module.css | 2 +- .../Search/SearchList/List/list.module.css | 2 +- .../Search/SearchList/searchList.module.css | 8 ++-- .../FormContent/Search/search.module.css | 2 +- .../FormContent/Voucher/voucher.module.css | 12 ++--- .../FormContent/formContent.module.css | 20 ++++----- .../BookingWidgetForm/form.module.css | 10 ++--- .../DatePicker/Range/desktop.module.css | 6 +-- .../DatePicker/Range/mobile.module.css | 8 ++-- .../DatePicker/date-picker.module.css | 4 +- .../ChildSelector/child-selector.module.css | 4 +- .../guests-rooms-picker.module.css | 28 ++++++------ .../MobileToggleButton/button.module.css | 2 +- .../BookingWidget/bookingWidget.module.css | 4 +- .../lib/components/Contact/contact.module.css | 6 +-- .../BedType/bedOptions.module.css | 4 +- .../Breakfast/breakfast.module.css | 4 +- .../Confirm/Guarantee/guarantee.module.css | 4 +- .../EnterDetails/Confirm/confirm.module.css | 8 ++-- .../Details/MemberPriceModal/modal.module.css | 6 +-- .../Details/Multiroom/details.module.css | 6 +-- .../Details/RoomOne/Signup/signup.module.css | 6 +-- .../Details/RoomOne/details.module.css | 6 +-- .../BookingAlert/bookingAlert.module.css | 2 +- .../guaranteeDetails.module.css | 6 +-- .../mixedRatePaymentBreakdown.module.css | 4 +- .../TimeoutSpinner/timeoutSpinner.module.css | 4 +- .../EnterDetails/Payment/payment.module.css | 8 ++-- .../priceChangeSummary.module.css | 22 +++++----- .../priceChangeDialog.module.css | 16 +++---- .../Room/Header/header.module.css | 2 +- .../EnterDetails/Section/section.module.css | 2 +- .../SelectedRoom/selectedRoom.module.css | 2 +- .../UI/Room/Breakfast/breakfast.module.css | 2 +- .../FnFNotAllowedAlert.module.css | 2 +- .../hotelCardDialogListing.module.css | 6 +-- .../hotelCardListing.module.css | 4 +- .../hotelSidePeek.module.css | 2 +- .../PriceDetailsTable/Tbody/tbody.module.css | 8 ++-- .../RoomCardSkeleton.module.css | 4 +- .../roomSidePeekContent.module.css | 14 +++--- .../filterAndSortModal.module.css | 34 +++++++------- .../HotelFilter/hotelFilter.module.css | 10 ++--- .../HotelListing/hotelListing.module.css | 2 +- .../SelectHotelMapSkeleton.module.css | 6 +-- .../MobileSummary/summary.module.css | 22 +++++----- .../RateSummary/rateSummary.module.css | 12 ++--- .../selectedRoomPanel.module.css | 8 ++-- .../multiRoomWrapper.module.css | 8 ++-- .../RoomListItem/RoomImage/image.module.css | 6 +-- .../RoomNotAvailable/notAvailable.module.css | 4 +- .../RoomListItem/roomListItem.module.css | 4 +- .../Rooms/RoomsList/rooms.module.css | 2 +- .../RoomsList/roomsListSkeleton.module.css | 2 +- .../RoomsContainer/Rooms/rooms.module.css | 4 +- .../RoomsContainerSkeleton.module.css | 2 +- .../components/SidePanel/sidePanel.module.css | 10 ++--- .../SignupPromo/signupPromo.module.css | 4 +- .../lib/pages/EnterDetailsPage.module.css | 12 ++--- .../lib/components/Chip/chip.module.css | 6 +-- .../DeprecatedSelect/select.module.css | 20 ++++----- .../lib/components/Form/Date/date.module.css | 2 +- .../PaymentOption/paymentOption.module.css | 4 +- .../selectPaymentMethod.module.css | 2 +- .../Form/TextArea/textarea.module.css | 8 ++-- .../HotelCard/HotelCardSkeleton.module.css | 10 ++--- .../HotelPriceCard/hotelPriceCard.module.css | 6 +-- .../hotelVoucherCard.module.css | 2 +- .../noPriceAvailable.module.css | 2 +- .../components/IconChip/iconChip.module.css | 4 +- .../ImageContainer/imageContainer.module.css | 4 +- .../HotelPin/hotelPin.module.css | 5 +-- .../modalContent.module.css | 9 ++-- .../lib/components/Modal/modal.module.css | 8 ++-- .../components/OldDSButton/button.module.css | 24 +++++----- .../ParkingPrices/parkingPrices.module.css | 4 +- .../sidePeekSelfControlled.module.css | 4 +- .../components/SidePeek/sidePeek.module.css | 4 +- .../components/Subtitle/subtitle.module.css | 4 +- .../lib/components/Toasts/toasts.module.css | 6 +-- .../lib/components/Tooltip/tooltip.module.css | 2 +- .../lib/design-system-new-deprecated.css | 11 ----- 229 files changed, 855 insertions(+), 869 deletions(-) diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css index 661e8544d..cf31d6d3b 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css @@ -14,7 +14,7 @@ .content { display: grid; - padding-bottom: var(--Spacing-x9); + padding-bottom: var(--Space-x9); position: relative; max-width: var(--max-width-content); margin: 0 auto; diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css index 8d68a3bea..2981f6f46 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css @@ -2,11 +2,11 @@ background-color: var(--Main-Grey-White); border-radius: var(--Corner-radius-lg); display: grid; - gap: var(--Spacing-x3); - padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4); + gap: var(--Space-x3); + padding: var(--Space-x2) var(--Space-x2) var(--Space-x4); } @media screen and (min-width: 768px) { .container { - padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4); + padding: var(--Space-x3) var(--Space-x3) var(--Space-x4); } } diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css index 509c07684..9526ae8c5 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css @@ -1,6 +1,6 @@ .main { width: var(--max-width-content); - padding: var(--Spacing-x5) var(--Spacing-x1); + padding: var(--Space-x5) var(--Space-x1); margin-left: auto; margin-right: auto; } diff --git a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css index 5b6c33bc2..70f54d5d6 100644 --- a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css +++ b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css @@ -59,7 +59,7 @@ margin-left: auto; margin-right: auto; background: var(--Background-Primary); - padding: var(--Spacing-x5); + padding: var(--Space-x5); border-radius: var(--Corner-radius-lg); display: grid; gap: var(--Space-x3); diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css index 9db965494..b87859a52 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css @@ -2,10 +2,10 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x3); + gap: var(--Space-x3); background-color: white; width: 100%; - padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4); + padding: var(--Space-x3) var(--Space-x3) var(--Space-x4); text-align: center; border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; margin-top: auto; @@ -25,7 +25,7 @@ & > span { position: relative; - padding: 0 var(--Spacing-x2); + padding: 0 var(--Space-x2); background-color: white; color: var(--UI-Text-Placeholder); } @@ -42,5 +42,5 @@ } .contactBlockTitle { - margin-bottom: var(--Spacing-x1); + margin-bottom: var(--Space-x1); } diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css index 9fcb465aa..4400fba92 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css @@ -13,7 +13,7 @@ grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: center; - padding: 0 var(--Spacing-x2); + padding: 0 var(--Space-x2); } .content { @@ -32,8 +32,8 @@ align-items: center; color: var(--Scandic-Brand-Burgundy); display: flex; - font-size: var(--Spacing-x2); - gap: var(--Spacing-x1); + font-size: var(--Space-x2); + gap: var(--Space-x1); .long { display: none; diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css index 485e6625c..e3c37d8d9 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css @@ -2,23 +2,23 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x2); - margin-top: var(--Spacing-x3); + gap: var(--Space-x2); + margin-top: var(--Space-x3); } .dateOfBirth { display: flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); width: 100%; background-color: var(--Main-Brand-WarmWhite); - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); } .dateOfBirthLink { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .dateOfBirthDescription { @@ -28,18 +28,18 @@ .termsAndConditions { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .termsDescription { - margin-left: calc(var(--Spacing-x4) + var(--Spacing-x-half)); + margin-left: calc(var(--Space-x4) + var(--Space-x05)); } .ctaContainer { display: flex; justify-content: center; - padding: var(--Spacing-x3) var(--Spacing-x3) 0; - width: calc(100% + var(--Spacing-x3) + var(--Spacing-x3)); + padding: var(--Space-x3) var(--Space-x3) 0; + width: calc(100% + var(--Space-x3) + var(--Space-x3)); border-top: 1px solid var(--Base-Border-Subtle); } @@ -51,6 +51,6 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x3); + gap: var(--Space-x3); text-align: left; } diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css index 6438d17c9..6574077d9 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css @@ -2,10 +2,10 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x3); + gap: var(--Space-x3); background-color: white; width: 100%; - padding: var(--Spacing-x3); + padding: var(--Space-x3); text-align: center; border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; margin-top: auto; @@ -22,10 +22,10 @@ .otp-container { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); @media screen and (min-width: 768px) { & { - gap: var(--Spacing-x2); + gap: var(--Space-x2); } } &.error .slot { @@ -41,7 +41,7 @@ box-sizing: content-box; width: 34px; height: 0px; - padding: var(--Spacing-x3) 0; + padding: var(--Space-x3) 0; font-family: var(--typography-Body-Regular-fontFamily); border: 1px solid var(--Base-Border-Normal); border-radius: var(--Corner-radius-md); @@ -78,7 +78,7 @@ .error-message { display: flex; align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } @keyframes blink { diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css index 5e78c79a5..05fdce174 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css @@ -6,17 +6,17 @@ .container { display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); align-items: center; width: 100%; } .transactionBox { box-shadow: 0px 0px 14px 6px #0000001a; - padding: var(--Spacing-x4) var(--Spacing-x3); + padding: var(--Space-x4) var(--Space-x3); display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); border-radius: var(--Corner-radius-md); align-items: center; width: 100%; @@ -25,7 +25,7 @@ .transactionDetails { display: flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); width: 100%; } @@ -38,21 +38,21 @@ .bonusNight { border-top: 1px solid var(--Border-Divider-Default); - padding-top: var(--Spacing-x3); + padding-top: var(--Space-x3); display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); align-items: center; } .bonusNightDetails { display: flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .divider { - --divider-spacing: var(--Spacing-x3); + --divider-spacing: var(--Space-x3); background: var(--Border-Divider-Subtle); width: calc(100% + var(--divider-spacing) + var(--divider-spacing)); @@ -62,11 +62,11 @@ @media screen and (min-width: 768px) { .container { - padding-inline: var(--Spacing-x3); + padding-inline: var(--Space-x3); } .divider { - --divider-spacing: var(--Spacing-x6); + --divider-spacing: var(--Space-x6); } .bookButton { diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css b/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css index 84ad8a4a7..c27349ec9 100644 --- a/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css +++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css @@ -1,6 +1,6 @@ .hotelListingSection { --scroll-margin-top: calc( - var(--booking-widget-mobile-height) + var(--Spacing-x2) + var(--booking-widget-mobile-height) + var(--Space-x2) ); display: grid; @@ -35,7 +35,7 @@ @media screen and (min-width: 768px) { .hotelListingSection { --scroll-margin-top: calc( - var(--booking-widget-tablet-height) + var(--Spacing-x2) + var(--booking-widget-tablet-height) + var(--Space-x2) ); &.isMainBlock { @@ -63,7 +63,7 @@ @media screen and (min-width: 1367px) { .hotelListingSection { --scroll-margin-top: calc( - var(--booking-widget-desktop-height) + var(--Spacing-x2) + var(--booking-widget-desktop-height) + var(--Space-x2) ); } } diff --git a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css index f5841f244..5d4557eac 100644 --- a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css +++ b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css @@ -1,7 +1,7 @@ .cardsList { list-style: none; display: none; - gap: var(--Spacing-x4) var(--Spacing-x1); + gap: var(--Space-x4) var(--Space-x1); } .carousel .navigationButton { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css index 86014b9a7..384aa4017 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css @@ -1,4 +1,4 @@ .filterForm { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css index 86b4fd4e2..009cc6210 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css @@ -1,10 +1,10 @@ .jobList { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .list { list-style: none; display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css index 07e79f96a..777553764 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css @@ -1,7 +1,7 @@ .jobylonCard { display: grid; width: 100%; - padding: var(--Spacing-x2); + padding: var(--Space-x2); background-color: var(--Base-Surface-Primary-light-Normal); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-md); @@ -9,13 +9,13 @@ .contentWrapper { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } @media screen and (min-width: 768px) { .contentWrapper { grid-template-columns: 1fr auto; - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: end; } } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css index 3b961cb60..2d4673b3a 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css @@ -1,6 +1,6 @@ .cardContainer { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .link { @@ -11,10 +11,10 @@ background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-xl); display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); min-height: 280px; justify-items: center; - padding: var(--Spacing-x5) var(--Spacing-x1); + padding: var(--Space-x5) var(--Space-x1); grid-template-rows: auto auto 1fr; } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css index ca3b9765e..a97a4ed7b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css @@ -15,7 +15,7 @@ } .iconTh { - padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x2); + padding: var(--Space-x5) var(--Space-x2) var(--Space-x2); font-weight: var(--typography-Caption-Regular-fontWeight); vertical-align: bottom; } @@ -23,11 +23,11 @@ .summaryTh { font-size: var(--typography-Caption-Regular-fontSize); font-weight: var(--typography-Caption-Regular-fontWeight); - padding: 0 var(--Spacing-x2) var(--Spacing-x2); + padding: 0 var(--Space-x2) var(--Space-x2); vertical-align: top; } .select { font-weight: var(--typography-Caption-Regular-fontWeight); - padding: 0 var(--Spacing-x2) var(--Spacing-x2); + padding: 0 var(--Space-x2) var(--Space-x2); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css index d43c14d84..333f71bf8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css @@ -20,7 +20,7 @@ } .rewardTh { - padding: var(--Spacing-x3) var(--Spacing-x2); + padding: var(--Space-x3) var(--Space-x2); font-size: var(--typography-Caption-Regular-fontSize); font-weight: var(--typography-Caption-Regular-fontWeight); } @@ -31,16 +31,16 @@ .rewardHeader { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); grid-template-columns: 1fr auto; text-align: start; } .rewardDescription { margin: 0; - padding-top: var(--Spacing-x1); + padding-top: var(--Space-x1); text-align: start; - padding-right: calc(var(--Spacing-x3) + var(--Spacing-x1)); + padding-right: calc(var(--Space-x3) + var(--Space-x1)); } .chevron { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css index 85cad7daf..399dff102 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css @@ -2,15 +2,15 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x3); - padding-bottom: var(--Spacing-x1); + gap: var(--Space-x3); + padding-bottom: var(--Space-x1); } .levelRequirements { border-radius: var(--Corner-radius-md); background-color: var(--Scandic-Brand-Pale-Peach); color: var(--Scandic-Peach-80); - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); text-align: center; width: 100%; } @@ -23,7 +23,7 @@ @media screen and (min-width: 950px) { .levelRequirements { - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); } } @media screen and (min-width: 1367px) { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css index 0b20dc29f..e6c1e1c1e 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css @@ -11,7 +11,7 @@ .rewardCardDescription { font-size: var(--typography-Caption-Regular-fontSize); line-height: 150%; - padding-right: var(--Spacing-x4); + padding-right: var(--Space-x4); } .rewardInfo { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css index 3407e1599..e9980c391 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css @@ -5,7 +5,7 @@ grid-template-columns: 1fr 1fr; grid-column: 1/3; padding-top: 0; - margin: var(--Spacing-x1) var(--Spacing-x2); + margin: var(--Space-x1) var(--Space-x2); } .rewardCardWrapper:last-child { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css index de9108cf1..077fdb095 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css @@ -2,8 +2,8 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x-half); - padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4); + gap: var(--Space-x05); + padding: 0 var(--Space-x4) 0 var(--Space-x4); text-wrap: balance; } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css index bd7c93973..9572ab79d 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css @@ -1,10 +1,10 @@ .script { transform: rotate(-4deg); - padding-bottom: var(--Spacing-x-half); + padding-bottom: var(--Space-x05); } @media screen and (min-width: 950px) { .script { - padding-bottom: var(--Spacing-x1); + padding-bottom: var(--Space-x1); } } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index 0dcc92cc1..ad92a04cc 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -1,6 +1,6 @@ .intro { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .largeTableContainer { @@ -18,23 +18,23 @@ background-color: var(--UI-Opacity-White-100); display: grid; grid-template-columns: 1fr 1fr; - margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9)) - calc(0px - var(--Spacing-x2)); - padding-bottom: var(--Spacing-x9); + margin: 0 calc(0px - var(--Space-x2)) calc(0px - var(--Space-x9)) + calc(0px - var(--Space-x2)); + padding-bottom: var(--Space-x9); position: relative; } .columnHeaderContainer { display: contents; grid-template-columns: 1fr 1fr; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .columnHeader { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: var(--Spacing-x4) var(--Spacing-x2); + gap: var(--Space-x2); + padding: var(--Space-x4) var(--Space-x2); justify-content: flex-end; } @@ -43,21 +43,21 @@ } .columnHeader:nth-child(1) { - padding-right: var(--Spacing-x1); + padding-right: var(--Space-x1); } .columnHeader:nth-child(2) { - padding-left: var(--Spacing-x1); + padding-left: var(--Space-x1); border-top-left-radius: var(--Corner-radius-md); } .columnHeader:nth-child(2):has(+ .columnHeader) { - padding-left: var(--Spacing-x1); - padding-right: var(--Spacing-x1); + padding-left: var(--Space-x1); + padding-right: var(--Space-x1); } .columnHeader:nth-child(3) { - padding-left: var(--Spacing-x1); + padding-left: var(--Space-x1); } @media screen and (min-width: 768px) { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css index b0cc58b66..efe38fefb 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css @@ -9,7 +9,7 @@ .addition::before { color: var(--Secondary-Light-On-Surface-Accent); content: "+"; - margin-right: var(--Spacing-x-half); + margin-right: var(--Space-x05); } .negation { @@ -19,5 +19,5 @@ .negation::before { color: var(--Base-Text-Accent); content: "-"; - margin-right: var(--Spacing-x-half); + margin-right: var(--Space-x05); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css index d1acbec8a..0580e7934 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css @@ -16,10 +16,10 @@ .th { text-align: left; - padding: var(--Spacing-x2) var(--Spacing-x4); + padding: var(--Space-x2) var(--Space-x4); } .td { text-align: left; - padding: var(--Spacing-x2) var(--Spacing-x4); + padding: var(--Space-x2) var(--Space-x4); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css index beede3a70..dd6b19236 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css @@ -1,5 +1,5 @@ .divider { - margin-top: var(--Spacing-x2); + margin-top: var(--Space-x2); } .membershipCardsContainer { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css index 2463a5b65..954f448af 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css @@ -1,7 +1,7 @@ .container { display: flex; flex-direction: column; - gap: var(--Spacing-x4); + gap: var(--Space-x4); position: relative; scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2); } @@ -18,10 +18,10 @@ .content { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: center; justify-content: center; - padding: var(--Spacing-x3); + padding: var(--Space-x3); } .title { @@ -30,5 +30,5 @@ } .btnContainer { - padding: 0 var(--Spacing-x3) var(--Spacing-x3); + padding: 0 var(--Space-x3) var(--Space-x3); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css index d6e7202dd..b725b78e8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css @@ -4,12 +4,12 @@ border-radius: var(--Corner-radius-sm); display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); justify-content: center; - padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7); + padding: var(--Space-x3) var(--Space-x3) var(--Space-x7); } .textContainer { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css index df42b5b7c..8b80a0af5 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css @@ -2,7 +2,7 @@ border-radius: var(--Small, 4px); border: 1px solid var(--Base-Border-Subtle); display: flex; - padding: var(--Spacing-x1) var(--Spacing-x2); + padding: var(--Space-x1) var(--Space-x2); flex-direction: column; justify-content: center; align-items: center; @@ -12,7 +12,7 @@ display: flex; justify-content: center; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); align-self: stretch; } @@ -60,7 +60,7 @@ .dialog { display: flex; flex-direction: column; - padding-bottom: var(--Spacing-x3); + padding-bottom: var(--Space-x3); overflow: hidden; height: 100%; } @@ -73,7 +73,7 @@ height: var(--button-height); position: relative; justify-content: center; - padding: var(--Spacing-x3) var(--Spacing-x2) 0; + padding: var(--Space-x3) var(--Space-x2) 0; flex-shrink: 0; } @@ -81,8 +81,8 @@ display: grid; grid-template-columns: 1fr; place-items: center; - gap: var(--Spacing-x2); - padding: 0 var(--Spacing-x3) var(--Spacing-x3); + gap: var(--Space-x2); + padding: 0 var(--Space-x3) var(--Space-x3); overflow-y: auto; flex-grow: 1; } @@ -90,7 +90,7 @@ .modalFooter { display: flex; flex-direction: column; - padding: 0 var(--Spacing-x3) var(--Spacing-x1); + padding: 0 var(--Space-x3) var(--Space-x1); gap: var(--Space-x15); flex-shrink: 0; } @@ -104,7 +104,7 @@ border: none; cursor: pointer; position: absolute; - right: var(--Spacing-x2); + right: var(--Space-x2); width: 32px; height: var(--button-height); display: flex; @@ -114,16 +114,16 @@ .active { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); color: var(--UI-Semantic-Success); } .rewardBadge { border-radius: var(--Corner-radius-sm); - padding: var(--Spacing-x1) var(--Space-x15); + padding: var(--Space-x1) var(--Space-x15); background: var(--Base-Surface-Secondary-light-Normal); display: grid; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .redeemButton { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css index 9b286a379..3fcb41d78 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css @@ -1,11 +1,11 @@ .container { display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .divider { - margin-top: var(--Spacing-x2); + margin-top: var(--Space-x2); @media screen and (min-width: 768px) { display: none; @@ -16,7 +16,7 @@ display: flex; flex-direction: column; justify-content: space-between; - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: flex-end; @media screen and (min-width: 768px) { @@ -28,8 +28,8 @@ .matchedAccountSection { display: flex; flex-direction: column; - gap: var(--Spacing-x3); - padding: var(--Spacing-x4) var(--Space-x15); + gap: var(--Space-x3); + padding: var(--Space-x4) var(--Space-x15); width: 100%; background-color: var(--Surface-Primary-On-Surface-Default); border: 1px solid var(--Border-Default); @@ -39,7 +39,7 @@ 0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset; @media screen and (min-width: 768px) { - padding: var(--Spacing-x4) var(--Spacing-x3); + padding: var(--Space-x4) var(--Space-x3); } } @@ -47,10 +47,10 @@ display: flex; width: 100%; justify-content: space-between; - gap: var(--Spacing-x1); + gap: var(--Space-x1); @media screen and (min-width: 768px) { - gap: var(--Spacing-x7); + gap: var(--Space-x7); } } @@ -63,12 +63,12 @@ .tierMatchStatus { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); width: 100%; justify-content: space-between; border: 1px solid var(--Border-Divider-Accent); border-radius: var(--Corner-radius-sm); - padding: var(--Spacing-x2); + padding: var(--Space-x2); background: linear-gradient( 0deg, @@ -83,7 +83,7 @@ @media screen and (min-width: 768px) { flex-direction: row; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } } @@ -94,13 +94,13 @@ .stack { display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .caption { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); color: var(--Text-Tertiary); align-self: flex-start; } @@ -116,7 +116,7 @@ .tierMatchText { display: flex; align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .label { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css index 83fcd6229..7c66f8d84 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .card { @@ -10,12 +10,12 @@ width: 100%; display: flex; flex-direction: column; - gap: var(--Spacing-x3); - padding: var(--Spacing-x3) var(--Spacing-x9); + gap: var(--Space-x3); + padding: var(--Space-x3) var(--Space-x9); background-color: var(--Background-Secondary); border-radius: var(--Corner-radius-lg); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); - margin-top: var(--Spacing-x9); + margin-top: var(--Space-x9); } .highFive { @@ -37,9 +37,9 @@ .labelWithIcon { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); color: var(--Text-Tertiary); - margin-bottom: var(--Spacing-x-half); + margin-bottom: var(--Space-x05); } .transferContainer { @@ -69,15 +69,15 @@ .balanceLabel { color: var(--Text-Tertiary); - margin-top: var(--Spacing-x3); + margin-top: var(--Space-x3); } .formWrapper { display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); width: 100%; - padding: var(--Spacing-x4); + padding: var(--Space-x4); padding-bottom: 0; } @@ -122,7 +122,7 @@ transform: translateX(-50%) translateY(4px); background-color: var(--Surface-Brand-Primary-1-OnSurface-Default); color: var(--Text-Brand-OnPrimary-2-Accent); - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); border-radius: var(--Corner-radius-sm); opacity: 0; transition: @@ -204,8 +204,8 @@ flex-direction: column; align-items: center; text-align: center; - gap: var(--Spacing-x3); - padding-inline: var(--Spacing-x3); + gap: var(--Space-x3); + padding-inline: var(--Space-x3); } .expiryText { @@ -214,15 +214,15 @@ .divider { background-color: var(--Border-Divider-Subtle); - width: calc(100% + var(--Spacing-x6) + var(--Spacing-x6)); + width: calc(100% + var(--Space-x6) + var(--Space-x6)); height: 1px; - margin-inline: calc(var(--Spacing-x6) * -1); + margin-inline: calc(var(--Space-x6) * -1); } .buttonContainer { display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .pointsOutput { @@ -230,16 +230,16 @@ background-color: var(--Surface-Primary-Disabled); height: 100%; color: var(--Text-Tertiary); - padding: var(--Spacing-x1) var(--Spacing-x2); + padding: var(--Space-x1) var(--Space-x2); display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } @media screen and (max-width: 767px) { .card { - padding: var(--Spacing-x3); - padding-top: var(--Spacing-x6); + padding: var(--Space-x3); + padding-top: var(--Space-x6); } .highFive { @@ -249,7 +249,7 @@ .transferContainer { grid-template-columns: 1fr; - gap: var(--Spacing-x4); + gap: var(--Space-x4); } .transferFrom { flex-direction: row; @@ -278,7 +278,7 @@ .inputsWrapper { grid-template-columns: 1fr 1fr; - column-gap: var(--Spacing-x1); + column-gap: var(--Space-x1); } .conversionRate { @@ -292,6 +292,6 @@ } .modalContainer { - padding-inline: var(--Spacing-x2); + padding-inline: var(--Space-x2); } } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css index 6824802b6..a9161167c 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css @@ -1,4 +1,4 @@ .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css b/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css index 7b332ad59..622b3c5e8 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css @@ -33,8 +33,8 @@ justify-content: center; max-width: 800px; margin: 0 auto; - gap: var(--Spacing-x1); - padding: var(--Spacing-x4) var(--Spacing-x3); + gap: var(--Space-x1); + padding: var(--Space-x4) var(--Space-x3); z-index: 2; } @@ -42,12 +42,12 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .buttons { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .buttonWrapper { diff --git a/apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css b/apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css index 3afcdecbe..7251e980b 100644 --- a/apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css +++ b/apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css @@ -19,6 +19,6 @@ .section:has(.column:nth-child(2)) { display: grid; grid-template-columns: repeat(2, 1fr); - gap: var(--Spacing-x2); + gap: var(--Space-x2); } } diff --git a/apps/scandic-web/components/Blocks/TextCols/textcols.module.css b/apps/scandic-web/components/Blocks/TextCols/textcols.module.css index 4c69c878b..a9295ff07 100644 --- a/apps/scandic-web/components/Blocks/TextCols/textcols.module.css +++ b/apps/scandic-web/components/Blocks/TextCols/textcols.module.css @@ -1,13 +1,13 @@ .columns { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .column { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); align-content: start; - padding-bottom: var(--Spacing-x2); + padding-bottom: var(--Space-x2); border-bottom: 1px solid var(--Base-Border-Subtle); } diff --git a/apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css b/apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css index 5ac39146c..7eeb99e19 100644 --- a/apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css +++ b/apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css @@ -1,11 +1,11 @@ .grid { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .usp { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); align-content: start; } diff --git a/apps/scandic-web/components/Carousel/carousel.module.css b/apps/scandic-web/components/Carousel/carousel.module.css index ae5915a5a..06a92d393 100644 --- a/apps/scandic-web/components/Carousel/carousel.module.css +++ b/apps/scandic-web/components/Carousel/carousel.module.css @@ -10,7 +10,7 @@ display: grid; grid-auto-flow: column; grid-auto-columns: 85%; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .item { @@ -40,8 +40,8 @@ .dots { display: flex; justify-content: center; - gap: var(--Spacing-x1); - margin-top: var(--Spacing-x3); + gap: var(--Space-x1); + margin-top: var(--Space-x3); } .dot { @@ -65,12 +65,12 @@ @media screen and (min-width: 768px) { .container { - grid-auto-columns: calc(50% - var(--Spacing-x2) / 2); + grid-auto-columns: calc(50% - var(--Space-x2) / 2); } } @media screen and (min-width: 1024px) { .container { - grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3); + grid-auto-columns: calc(33.33% - var(--Space-x2) * 2 / 3); } } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css index 126e42d47..3858ead81 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css @@ -7,7 +7,7 @@ display: flex; justify-content: space-between; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .cityList { diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css index 90d793350..cfc8eb2b7 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css @@ -7,8 +7,8 @@ .content { display: grid; - gap: var(--Spacing-x2); - padding: var(--Spacing-x2) var(--Spacing-x3); + gap: var(--Space-x2); + padding: var(--Space-x2) var(--Space-x3); align-content: start; justify-items: start; } @@ -20,13 +20,13 @@ .tripAdvisor { position: absolute; - top: var(--Spacing-x2); - left: var(--Spacing-x2); + top: var(--Space-x2); + left: var(--Space-x2); display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); background-color: var(--Base-Surface-Primary-light-Normal); - padding: var(--Spacing-x-quarter) var(--Spacing-x1); + padding: var(--Space-x025) var(--Space-x1); border-radius: var(--Corner-radius-sm); color: var(--Text-Interactive-Default); } @@ -37,12 +37,12 @@ .intro { display: grid; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .captions { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); color: var(--Text-Tertiary); } @@ -63,7 +63,7 @@ .amenityItem { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); align-items: center; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css index 68cff03db..5d09d6be1 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css @@ -22,7 +22,7 @@ @media screen and (min-width: 768px) { .container { --scroll-margin-top: calc( - var(--booking-widget-desktop-height) + var(--Spacing-x2) + var(--booking-widget-desktop-height) + var(--Space-x2) ); } } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css index 8443ab989..2e7e24497 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css @@ -1,12 +1,12 @@ .container { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .citiesList { column-count: 2; list-style-type: none; - margin-bottom: var(--Spacing-x-half); + margin-bottom: var(--Space-x05); } .citiesList li { margin-bottom: var(--Space-x15); diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css index 84df1ddfc..cd87bcd7e 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css @@ -12,7 +12,7 @@ @media screen and (min-width: 768px) { .listContainer { - gap: var(--Spacing-x3); + gap: var(--Space-x3); background-color: transparent; flex-direction: row; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css b/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css index e40062540..b3c887f87 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css @@ -1,4 +1,4 @@ .ctaContainer { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css index f956d3186..92943887c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css @@ -20,8 +20,8 @@ .seeAllButton { position: absolute; - bottom: var(--Spacing-x2); - right: var(--Spacing-x4); + bottom: var(--Space-x2); + right: var(--Space-x4); } @media screen and (max-width: 767px) { @@ -35,7 +35,7 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .imageWrapper > .image:first-child { @@ -58,8 +58,8 @@ .imageWrapper > .image:nth-child(3) { grid-column: span 1; grid-row: span 1; - height: calc(150px - var(--Spacing-x-half)); - max-height: calc(20dvh - var(--Spacing-x-half)); + height: calc(150px - var(--Space-x05)); + max-height: calc(20dvh - var(--Space-x05)); } } @@ -71,6 +71,6 @@ .imageWrapper > .image:nth-child(2):nth-last-child(2), .imageWrapper > .image:nth-child(3) { - height: calc(200px - var(--Spacing-x-half)); + height: calc(200px - var(--Space-x05)); } } diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css index 121b0360f..dd7619340 100644 --- a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css +++ b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css @@ -2,8 +2,8 @@ display: grid; grid-template-areas: "main"; grid-template-columns: 1fr; - gap: var(--Spacing-x5); - padding-bottom: var(--Spacing-x9); + gap: var(--Space-x5); + padding-bottom: var(--Space-x9); max-width: var(--max-width-page); margin: 0 auto; width: 100%; @@ -18,12 +18,12 @@ .blocks { grid-area: main; display: grid; - gap: var(--Spacing-x7); + gap: var(--Space-x7); } .header { display: grid; - gap: var(--Spacing-x4); + gap: var(--Space-x4); } .title { @@ -41,10 +41,10 @@ } .blocks { - gap: var(--Spacing-x9); + gap: var(--Space-x9); } .blocks > section:first-of-type > header { - gap: var(--Spacing-x2); + gap: var(--Space-x2); } } diff --git a/apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css b/apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css index db6ea567a..be8f03183 100644 --- a/apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css +++ b/apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css @@ -1,6 +1,6 @@ .container { display: grid; - gap: var(--Spacing-x-quarter); + gap: var(--Space-x025); } .image { @@ -17,7 +17,7 @@ @media (min-width: 768px) { .container:has(.imageContainer) { - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: center; } diff --git a/apps/scandic-web/components/ContentType/StartPage/startPage.module.css b/apps/scandic-web/components/ContentType/StartPage/startPage.module.css index 846fc6222..810206a0d 100644 --- a/apps/scandic-web/components/ContentType/StartPage/startPage.module.css +++ b/apps/scandic-web/components/ContentType/StartPage/startPage.module.css @@ -22,13 +22,13 @@ align-items: center; justify-content: center; flex-direction: column; - grid-gap: var(--Spacing-x2); - padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4); + grid-gap: var(--Space-x2); + padding: var(--Space-x2) var(--Space-x2) var(--Space-x4); } @media screen and (min-width: 768px) { .headerContent { - grid-gap: var(--Spacing-x4); + grid-gap: var(--Space-x4); } } @@ -38,8 +38,8 @@ .main { display: grid; - gap: var(--Spacing-x6); - padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4); + gap: var(--Space-x6); + padding: calc(var(--Space-x5) * 2) 0 calc(var(--Space-x5) * 4); } .section:empty { @@ -55,10 +55,10 @@ @media screen and (min-width: 768px) { .main { - gap: calc(var(--Spacing-x5) + var(--Spacing-x4)); + gap: calc(var(--Space-x5) + var(--Space-x4)); } .section { - padding-left: var(--Spacing-x5); - padding-right: var(--Spacing-x5); + padding-left: var(--Space-x5); + padding-right: var(--Space-x5); } } diff --git a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css b/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css index 63fc0219a..5e2710d49 100644 --- a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css +++ b/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css @@ -1,15 +1,15 @@ .page { - padding-bottom: var(--Spacing-x9); + padding-bottom: var(--Space-x9); } .header { background-color: var(--Base-Surface-Subtle-Normal); - padding-bottom: var(--Spacing-x4); + padding-bottom: var(--Space-x4); } .headerContent { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); max-width: var(--max-width-content); margin: 0 auto; } @@ -17,7 +17,7 @@ .headerIntro { display: grid; max-width: var(--max-width-text-block); - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .heading { @@ -28,7 +28,7 @@ .heroContainer { width: 100%; - padding: var(--Spacing-x4) var(--Spacing-x2); + padding: var(--Space-x4) var(--Space-x2); } .heroContainer img { @@ -39,7 +39,7 @@ .contentContainer { width: 100%; - padding: var(--Spacing-x4) var(--Spacing-x2) 0; + padding: var(--Space-x4) var(--Space-x2) 0; } .content .contentContainer { @@ -47,14 +47,14 @@ grid-template-areas: "main" "sidebar"; - gap: var(--Spacing-x4); + gap: var(--Space-x4); align-items: start; } .mainContent { display: grid; width: 100%; - gap: var(--Spacing-x6); + gap: var(--Space-x6); margin: 0 auto; max-width: var(--max-width-content); } @@ -74,17 +74,17 @@ @media (min-width: 768px) { .contentContainer { - padding: var(--Spacing-x4) 0; + padding: var(--Space-x4) 0; max-width: var(--max-width-content); margin: 0 auto; } .heroContainer { - padding: var(--Spacing-x4) 0; + padding: var(--Space-x4) 0; } .headerIntro { - gap: var(--Spacing-x3); + gap: var(--Space-x3); } } @@ -100,11 +100,11 @@ .content .contentContainer { grid-template-areas: "main sidebar"; grid-template-columns: var(--max-width-text-block) 1fr; - gap: var(--Spacing-x9); + gap: var(--Space-x9); } .mainContent { - gap: var(--Spacing-x9); + gap: var(--Space-x9); padding: 0; max-width: none; margin: 0; diff --git a/apps/scandic-web/components/DatePicker/Single/desktop.module.css b/apps/scandic-web/components/DatePicker/Single/desktop.module.css index 9ef0a4ccd..c410e4541 100644 --- a/apps/scandic-web/components/DatePicker/Single/desktop.module.css +++ b/apps/scandic-web/components/DatePicker/Single/desktop.module.css @@ -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; } @@ -103,11 +103,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 { diff --git a/apps/scandic-web/components/DatePicker/Single/mobile.module.css b/apps/scandic-web/components/DatePicker/Single/mobile.module.css index cad1fa8a9..ef6c6309b 100644 --- a/apps/scandic-web/components/DatePicker/Single/mobile.module.css +++ b/apps/scandic-web/components/DatePicker/Single/mobile.module.css @@ -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; @@ -58,7 +58,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 { @@ -78,7 +78,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; left: 0; @@ -132,7 +132,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; } diff --git a/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css b/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css index 16014b7e4..1ee40afdd 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css +++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css @@ -2,7 +2,7 @@ display: flex; align-items: center; gap: var(--Space-x15); - padding: var(--Spacing-x1) var(--Space-x15); + padding: var(--Space-x1) var(--Space-x15); cursor: pointer; border-radius: var(--Corner-radius-md); transition: background-color 0.3s; diff --git a/apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css b/apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css index 596c01983..8c5f5e62d 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css +++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css @@ -1,11 +1,11 @@ .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .form { display: grid; - gap: var(--Spacing-x4); + gap: var(--Space-x4); } .fieldset { @@ -22,8 +22,8 @@ display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; - gap: var(--Spacing-x1) var(--Spacing-x2); - margin: var(--Spacing-x3) 0; + gap: var(--Space-x1) var(--Space-x2); + margin: var(--Space-x3) 0; } @media screen and (max-width: 767px) { diff --git a/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css b/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css index d198606b7..94015814f 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css +++ b/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css @@ -21,21 +21,21 @@ display: grid; grid-template-columns: 1fr auto; align-items: center; - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); border-bottom: 1px solid var(--Base-Border-Subtle); } .content { display: grid; - gap: var(--Spacing-x4); + gap: var(--Space-x4); align-content: start; - padding: var(--Spacing-x4) var(--Spacing-x3); + padding: var(--Space-x4) var(--Space-x3); overflow-y: auto; height: min(calc(80dvh - 180px), 500px); } .alertWrapper:not(:empty) { - padding: var(--Spacing-x2) var(--Spacing-x4) 0; + padding: var(--Space-x2) var(--Space-x4) 0; border-top: 1px solid var(--Base-Border-Subtle); } @@ -46,7 +46,7 @@ .footer { display: flex; justify-content: space-between; - padding: var(--Spacing-x2) var(--Spacing-x4); + padding: var(--Space-x2) var(--Space-x4); border-top: 1px solid var(--Base-Border-Subtle); } @@ -74,7 +74,7 @@ display: flex; justify-content: flex-end; border-bottom: none; - padding: var(--Spacing-x3) var(--Spacing-x2); + padding: var(--Space-x3) var(--Space-x2); } .title, @@ -84,18 +84,18 @@ .content { height: 100%; - padding: 0 var(--Spacing-x2) var(--Spacing-x3); + padding: 0 var(--Space-x2) var(--Space-x3); overflow-y: scroll; } .alertWrapper:not(:empty) { - padding: var(--Spacing-x3) var(--Spacing-x2) 0; + padding: var(--Space-x3) var(--Space-x2) 0; } .footer { flex-direction: column-reverse; - gap: var(--Spacing-x3); - padding: var(--Spacing-x3) var(--Spacing-x2); + gap: var(--Space-x3); + padding: var(--Space-x3) var(--Space-x2); margin-top: auto; } } diff --git a/apps/scandic-web/components/Dialog/dialog.module.css b/apps/scandic-web/components/Dialog/dialog.module.css index 8b6a120f9..76ed0c9e9 100644 --- a/apps/scandic-web/components/Dialog/dialog.module.css +++ b/apps/scandic-web/components/Dialog/dialog.module.css @@ -39,28 +39,28 @@ box-shadow: var(--modal-box-shadow); display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); max-width: 560px; - padding: var(--Spacing-x5) var(--Spacing-x4); + padding: var(--Space-x5) var(--Space-x4); } .header { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .footer { display: flex; flex-direction: column-reverse; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } @media screen and (min-width: 768px) { .footer { align-items: center; flex-direction: row; - gap: var(--Spacing-x2); + gap: var(--Space-x2); & > button { flex: 1; diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css b/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css index 7e57477f3..b31497c07 100644 --- a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css +++ b/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css @@ -3,5 +3,5 @@ flex-direction: column; align-items: flex-start; gap: var(--Space-x15); - padding-bottom: var(--Spacing-x3); + padding-bottom: var(--Space-x3); } diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css index aec012aa6..dbff73546 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css +++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css @@ -2,14 +2,14 @@ .user { align-self: flex-start; display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); container-name: addressContainer; container-type: inline-size; } .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); grid-template-columns: minmax(100px, 164px) 1fr; } diff --git a/apps/scandic-web/components/Forms/Edit/Profile/form.module.css b/apps/scandic-web/components/Forms/Edit/Profile/form.module.css index 506e245c8..d4365edc9 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/form.module.css +++ b/apps/scandic-web/components/Forms/Edit/Profile/form.module.css @@ -1,6 +1,6 @@ .container { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); grid-template-areas: "title" "form" @@ -13,14 +13,14 @@ .form { display: grid; - gap: var(--Spacing-x5); + gap: var(--Space-x5); grid-area: form; } .btnContainer { display: flex; flex-direction: column-reverse; - gap: var(--Spacing-x1); + gap: var(--Space-x1); grid-area: buttons; } @@ -38,7 +38,7 @@ .btnContainer { align-self: center; flex-direction: row; - gap: var(--Spacing-x2); + gap: var(--Space-x2); justify-self: flex-end; } } diff --git a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css index f0b6d0130..dbcccbc04 100644 --- a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css +++ b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css @@ -1,12 +1,12 @@ .menuButton { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); align-items: center; width: 100%; background-color: transparent; color: var(--Base-Text-High-contrast); border-width: 0; - padding: var(--Spacing-x-half) 0; + padding: var(--Space-x05) 0; cursor: pointer; font-family: var(--typography-Body-Bold-fontFamily); font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */ diff --git a/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css b/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css index 3577f6353..0f42cabba 100644 --- a/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css +++ b/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css @@ -91,9 +91,9 @@ .footer { background-color: var(--Base-Surface-Subtle-Normal); - padding: var(--Spacing-x4) var(--Spacing-x2); + padding: var(--Space-x4) var(--Space-x2); display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } @media screen and (min-width: 768px) { diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css index 4d4a1faf8..3b7f11d5c 100644 --- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css +++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css @@ -1,9 +1,9 @@ .myPagesMenuContent { - padding: var(--Spacing-x3) var(--Spacing-x2); + padding: var(--Space-x3) var(--Space-x2); } .intro { - padding: 0 var(--Spacing-x1); + padding: 0 var(--Space-x1); } .myPagesMenuContent .friendTypeWrapper { @@ -11,7 +11,7 @@ } .divider { - margin: var(--Spacing-x2) 0; + margin: var(--Space-x2) 0; } .friendType { @@ -24,7 +24,7 @@ .friendType::after { content: " · "; display: inline; - padding: 0 var(--Spacing-x-half); + padding: 0 var(--Space-x05); } .groups, @@ -42,7 +42,7 @@ @media screen and (min-width: 768px) { .myPagesMenuContent { - padding: var(--Spacing-x2) var(--Spacing-x4); + padding: var(--Space-x2) var(--Space-x4); } .intro.noMembership, .userName { diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css index f6b6814a8..b78a1a4c9 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css +++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css @@ -8,9 +8,9 @@ .seeAllLink { display: flex; - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); background-color: var(--Base-Surface-Secondary-light-Normal); } @@ -20,7 +20,7 @@ } .submenuTitle { - padding-left: var(--Spacing-x1); + padding-left: var(--Space-x1); color: var(--Text-Tertiary); text-transform: uppercase; } @@ -35,7 +35,7 @@ .submenusItem { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); align-content: start; } @@ -52,7 +52,7 @@ } .backWrapper { - padding: var(--Spacing-x2); + padding: var(--Space-x2); } .text { @@ -66,7 +66,7 @@ cursor: pointer; display: flex; align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); width: 100%; } @@ -79,7 +79,7 @@ .megaMenuContent { flex-grow: 1; grid-template-rows: max-content 1fr; - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: start; } .megaMenuContent:has(.cardWrapper) { @@ -87,20 +87,20 @@ } .submenus { - padding: var(--Spacing-x2); + padding: var(--Space-x2); } .submenusItem:first-child { - padding-bottom: var(--Spacing-x2); + padding-bottom: var(--Space-x2); border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); } .submenusItem:last-child { - padding-top: var(--Spacing-x3); + padding-top: var(--Space-x3); } .cardWrapper { background-color: var(--Base-Surface-Secondary-light-Normal); - padding: var(--Spacing-x4) var(--Spacing-x2); + padding: var(--Space-x4) var(--Space-x2); } } @@ -111,7 +111,7 @@ "seeAllLink" "submenus"; width: 600px; - max-width: calc(100vw - var(--Spacing-x4)); + max-width: calc(100vw - var(--Space-x4)); } .megaMenuContent:has(.cardWrapper) { @@ -129,15 +129,15 @@ .submenus { grid-area: submenus; grid-template-columns: repeat(2, 1fr); - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); } .submenusItem:first-child { - padding-right: var(--Spacing-x5); + padding-right: var(--Space-x5); border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); } .submenusItem:last-child { - padding-left: var(--Spacing-x5); + padding-left: var(--Space-x5); } .cardWrapper { diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css index 7bf741d95..6d164a88c 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css +++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css @@ -5,7 +5,7 @@ .navigationMenuItem.mobile { display: flex; justify-content: space-between; - padding: var(--Spacing-x2) 0; + padding: var(--Space-x2) 0; font-size: var(--typography-Subtitle-1-Mobile-fontSize); } diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css index f9ac59c11..acb95aecd 100644 --- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css +++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css @@ -3,7 +3,7 @@ margin: 0; justify-content: space-between; align-items: center; - gap: var(--Spacing-x3); + gap: var(--Space-x3); display: none; } @@ -12,7 +12,7 @@ width: 100%; gap: 0; justify-content: stretch; - padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2); + padding: var(--Space-x15) var(--Space-x2) var(--Space-x2); } .navigationMenu.mobile .item { diff --git a/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css b/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css index 2b4b4384f..75a2886f3 100644 --- a/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css +++ b/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css @@ -1,6 +1,6 @@ .mainMenu { background-color: var(--Base-Surface-Primary-light-Normal); - padding: var(--Spacing-x2) 0; + padding: var(--Space-x2) 0; border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); } @@ -11,7 +11,7 @@ display: grid; grid-template-columns: max-content 1fr; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); max-width: var(--max-width-page); margin: 0 auto; } @@ -20,17 +20,17 @@ display: flex; justify-self: end; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } @media screen and (min-width: 768px) { .mainMenu { - padding: var(--Spacing-x2) 0; + padding: var(--Space-x2) 0; } .nav { display: flex; justify-content: space-between; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .menus { display: contents; diff --git a/apps/scandic-web/components/Header/TopMenu/topMenu.module.css b/apps/scandic-web/components/Header/TopMenu/topMenu.module.css index c87c126ad..cfcc7c2b0 100644 --- a/apps/scandic-web/components/Header/TopMenu/topMenu.module.css +++ b/apps/scandic-web/components/Header/TopMenu/topMenu.module.css @@ -1,7 +1,7 @@ .topMenu { display: none; background-color: var(--Base-Surface-Subtle-Normal); - padding: var(--Spacing-x2) 0; + padding: var(--Space-x2) 0; } .content { @@ -11,7 +11,7 @@ .options { display: flex; - gap: var(--Spacing-x2); + gap: var(--Space-x2); align-items: center; } @@ -23,7 +23,7 @@ display: grid; grid-template-areas: "topLink options"; justify-content: space-between; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .topLink { diff --git a/apps/scandic-web/components/Hero/hero.module.css b/apps/scandic-web/components/Hero/hero.module.css index c468f9d57..8c0f97aaf 100644 --- a/apps/scandic-web/components/Hero/hero.module.css +++ b/apps/scandic-web/components/Hero/hero.module.css @@ -1,6 +1,6 @@ .hero { height: 400px; - margin-bottom: var(--Spacing-x2); + margin-bottom: var(--Space-x2); width: 100%; object-fit: cover; border-radius: var(--Corner-radius-xl); diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css index d0f4af76f..e3eb29d07 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css index f5822f169..aeeb2fbce 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css index 39f27ba5e..6dc81950d 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css @@ -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); diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css index 483d8d1a1..53f4a83d5 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css @@ -1,7 +1,7 @@ .modalContent { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .termsAndConditions { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css index b25f0da7d..58a31ddd4 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css index c55a90705..89eb594c5 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css index 11f519f7b..d64842494 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css index b04bb140d..fea7a30de 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css index e8cc4fa06..62856de56 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css @@ -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); } } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css index 8261575f2..7bda204cc 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css index f9a7504c8..e27b327eb 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css index f8140dd30..06d437a2e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css @@ -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; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css index 714befb01..9f14e75c7 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css index 125e21d86..4b706b440 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css @@ -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%; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css index a4a66ca3c..72cc4250f 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css @@ -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%; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css index bdc6918f7..37c9bda2e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css @@ -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; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css index ab17a03fe..dcc5b1948 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css index dd58cf4f3..75dd3095f 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css @@ -1,5 +1,5 @@ .dl { - padding: 0 var(--Spacing-x2); + padding: 0 var(--Space-x2); display: flex; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css index 8811e4fef..cca272ad6 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css index 047efafb7..c1bc1f247 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css index 72c7a2c93..b6f5a7069 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css index 97bfa0cee..e2d06cf7e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css index 053bf66a8..8a13a1314 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css index bcbe7a451..2c9b3c8eb 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css index 6bf8c76ec..f1009d584 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css index 96af8da99..fdc0f7264 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css @@ -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); } } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css index 507e8fda5..56d3218e3 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css @@ -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; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css index 55c4b1d7d..d2e7fe997 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css index 760dce0b6..7580644e1 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css @@ -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) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css index b33d88382..5baf7f679 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css @@ -4,5 +4,5 @@ border-radius: var(--Corner-radius-sm); cursor: pointer; display: flex; - padding: var(--Spacing-x-half); + padding: var(--Space-x05); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css index afe4812e6..3a5131fad 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css @@ -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%; } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css index cf1fe6ad7..f781abcd7 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css @@ -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) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css index 0fa25f1d6..746a12cb4 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css @@ -1,6 +1,6 @@ .details { max-width: 100%; - padding: 0 var(--Spacing-x2); + padding: 0 var(--Space-x2); } @media (min-width: 768px) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css index 3d6991f7b..6a593c01a 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css @@ -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 { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css index 9c942ad72..7b378ceac 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css @@ -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) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css index 41df3a2e8..c155dd0f6 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/index.module.css b/apps/scandic-web/components/HotelReservation/MyStay/index.module.css index 774114c7d..8c18392ce 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/index.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/index.module.css @@ -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); } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css b/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css index 9ac3f70e9..ed3099cb0 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css @@ -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) { diff --git a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css index e683a5e26..bba660ecb 100644 --- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css +++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css @@ -1,6 +1,6 @@ .backWrapper { background-color: var(--Base-Surface-Secondary-light-Normal); - padding: var(--Spacing-x2); + padding: var(--Space-x2); } .backButton { @@ -10,13 +10,13 @@ cursor: pointer; display: flex; align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .closeWrapper { display: flex; justify-content: flex-end; - padding: var(--Spacing-x2); + padding: var(--Space-x2); border-bottom: 1px solid var(--Base-Border-Subtle); } @@ -25,7 +25,7 @@ border: none; cursor: pointer; justify-self: flex-start; - padding: 11px var(--Spacing-x1) var(--Spacing-x2); + padding: 11px var(--Space-x1) var(--Space-x2); user-select: none; } @@ -38,7 +38,7 @@ height: 3px; position: relative; transition: all 0.3s; - width: var(--Spacing-x4); + width: var(--Space-x4); } .bar::after, @@ -48,7 +48,7 @@ position: absolute; top: 0; transform-origin: 50% 50%; - width: var(--Spacing-x4); + width: var(--Space-x4); } .bar { diff --git a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css index 01d86d4fc..635820b29 100644 --- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css +++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css @@ -1,7 +1,7 @@ .languageWrapper { display: grid; - gap: var(--Spacing-x3); - padding: var(--Spacing-x3) var(--Spacing-x2); + gap: var(--Space-x3); + padding: var(--Space-x3) var(--Space-x2); } .subtitle { @@ -16,10 +16,10 @@ } .link { - padding: var(--Spacing-x1); + padding: var(--Space-x1); border-radius: var(--Corner-radius-md); display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: space-between; align-items: center; text-decoration: none; @@ -33,7 +33,7 @@ } .languageWrapper { - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); } .subtitle { diff --git a/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css b/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css index beea3dc52..9b44619cf 100644 --- a/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css +++ b/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css @@ -27,8 +27,8 @@ .buttonText { color: inherit !important; - margin-left: var(--Spacing-x1); - margin-right: var(--Spacing-x-quarter); + margin-left: var(--Space-x1); + margin-right: var(--Space-x025); } .footer .button { diff --git a/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css b/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css index a202785c7..b205a6e60 100644 --- a/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css +++ b/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css @@ -1,6 +1,6 @@ .mobile, .desktop { - padding: var(--Spacing-x2) var(--Spacing-x2); + padding: var(--Space-x2) var(--Space-x2); background-color: var(--Base-Surface-Primary-light-Normal); } @@ -18,6 +18,6 @@ } .desktop { display: flex; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } } diff --git a/apps/scandic-web/components/MyPages/Pagination/pagination.module.css b/apps/scandic-web/components/MyPages/Pagination/pagination.module.css index 18cdbf947..150b1e691 100644 --- a/apps/scandic-web/components/MyPages/Pagination/pagination.module.css +++ b/apps/scandic-web/components/MyPages/Pagination/pagination.module.css @@ -1,11 +1,11 @@ .pagination { display: flex; justify-content: left; - padding: var(--Spacing-x2); + padding: var(--Space-x2); background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-rounded); margin: auto; - gap: var(--Spacing-x5); + gap: var(--Space-x5); max-width: 100%; overflow-x: auto; } diff --git a/apps/scandic-web/components/Profile/CreditCardList/CreditCardList.module.css b/apps/scandic-web/components/Profile/CreditCardList/CreditCardList.module.css index 86929755c..e783e6fe2 100644 --- a/apps/scandic-web/components/Profile/CreditCardList/CreditCardList.module.css +++ b/apps/scandic-web/components/Profile/CreditCardList/CreditCardList.module.css @@ -1,4 +1,4 @@ .cardContainer { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css b/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css index 574ac794a..a1e7a5917 100644 --- a/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css +++ b/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css @@ -1,10 +1,10 @@ .card { display: grid; align-items: center; - column-gap: var(--Spacing-x1); + column-gap: var(--Space-x1); grid-template-columns: auto auto auto 1fr; justify-items: flex-end; - padding: var(--Spacing-x1) var(--Space-x15); + padding: var(--Space-x1) var(--Space-x15); border-radius: var(--Corner-radius-sm); background-color: var(--Background-Primary); } diff --git a/apps/scandic-web/components/Profile/Header/header.module.css b/apps/scandic-web/components/Profile/Header/header.module.css index ea008fc93..3dfeb667b 100644 --- a/apps/scandic-web/components/Profile/Header/header.module.css +++ b/apps/scandic-web/components/Profile/Header/header.module.css @@ -1,6 +1,6 @@ .header { align-items: center; display: flex; - gap: var(--Spacing-x2); + gap: var(--Space-x2); justify-content: space-between; } diff --git a/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css b/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css index a926fe651..54821155d 100644 --- a/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css +++ b/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css @@ -1,9 +1,9 @@ .badge { - padding: var(--Spacing-x1) var(--Space-x15); + padding: var(--Space-x1) var(--Space-x15); display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); background-color: var(--Base-Surface-Secondary-light-Normal); border-radius: var(--Corner-radius-sm); } diff --git a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css index aa9cc6454..7818143b3 100644 --- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css +++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css @@ -1,15 +1,15 @@ .comparisonSection { width: 100%; - gap: var(--Spacing-x6); + gap: var(--Space-x6); background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-lg); - padding: var(--Spacing-x6) var(--Spacing-x2); + padding: var(--Space-x6) var(--Space-x2); } .header { display: flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); margin: 0 auto; align-items: center; text-align: center; @@ -23,7 +23,7 @@ .link { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .tierMatchList { @@ -67,7 +67,7 @@ .iconWrapper { position: absolute; - right: var(--Spacing-x1); + right: var(--Space-x1); } .chevron { transition: transform 200ms; @@ -87,8 +87,8 @@ display: grid; grid-template-columns: 1fr 1fr; align-items: center; - row-gap: var(--Spacing-x2); - margin-bottom: var(--Spacing-x2); + row-gap: var(--Space-x2); + margin-bottom: var(--Space-x2); place-items: center; } @@ -107,7 +107,7 @@ .tierTitles { cursor: pointer; - padding: var(--Spacing-x-half); + padding: var(--Space-x05); position: relative; width: 100%; height: 64px; @@ -136,15 +136,15 @@ } .tierContent { - padding: var(--Spacing-x3); + padding: var(--Space-x3); display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .tierInfo { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .htmlContent { @@ -162,7 +162,7 @@ & > span { position: relative; - padding: 0 var(--Spacing-x1); + padding: 0 var(--Space-x1); background-color: white; white-space: nowrap; } @@ -190,6 +190,6 @@ } .columnHeaders { - column-gap: var(--Spacing-x3); + column-gap: var(--Space-x3); } } diff --git a/apps/scandic-web/components/Section/Link/link.module.css b/apps/scandic-web/components/Section/Link/link.module.css index 0c23f34be..46b11b8c2 100644 --- a/apps/scandic-web/components/Section/Link/link.module.css +++ b/apps/scandic-web/components/Section/Link/link.module.css @@ -1,6 +1,6 @@ .linkWrapper { align-items: baseline; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); z-index: 1; } diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css index ee47d0a34..3d3afd5b4 100644 --- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css +++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css @@ -1,20 +1,20 @@ .button { margin-left: auto; - padding: 0 0 0 var(--Spacing-x-half); + padding: 0 0 0 var(--Space-x05); text-decoration: none; } .wrapper { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); position: relative; } .mainContent { display: flex; flex-direction: column; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .listContainer { @@ -33,13 +33,13 @@ 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); height: fit-content; } .reference { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .imageContainer { @@ -72,7 +72,7 @@ .rowTitle { display: flex; flex-direction: row; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .rowTitle svg { @@ -81,14 +81,14 @@ } .rowContent { - padding-left: var(--Spacing-x4); + padding-left: var(--Space-x4); } .bookingInformation { display: flex; flex-direction: column-reverse; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); background-color: var(--Scandic-Beige-10); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-md); @@ -98,16 +98,16 @@ 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; } .price { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: space-between; align-items: center; width: 100%; @@ -119,19 +119,19 @@ .facilityList { column-count: 2; - column-gap: var(--Spacing-x2); + column-gap: var(--Space-x2); } .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 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 { @@ -139,13 +139,13 @@ } .noIcon { - margin-left: var(--Spacing-x4); + margin-left: var(--Space-x4); } .buttonContainer { background-color: var(--Background-Primary); border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); + padding: var(--Space-x4) var(--Space-x2); width: 100%; position: absolute; left: 0; @@ -163,8 +163,8 @@ .descriptionContainer { display: flex; flex-direction: column; - padding: var(--Spacing-x3); - gap: var(--Spacing-x3); + padding: var(--Space-x3); + gap: var(--Space-x3); background-color: var(--Main-Grey-White); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-sm); diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css index a0ab5b992..ef99084be 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css @@ -1,11 +1,11 @@ .wrapper { display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .link { display: flex; align-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css index f69707779..f583bc9ac 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css @@ -2,10 +2,10 @@ border-top: 1px solid var(--UI-Grey-30); display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); justify-content: center; align-items: center; - padding-top: var(--Spacing-x5); + padding-top: var(--Space-x5); } .contact { @@ -21,7 +21,7 @@ @media screen and (min-width: 1367px) { .contactContainer { align-items: start; - padding-top: var(--Spacing-x2); + padding-top: var(--Space-x2); } .contact > div { diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css b/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css index 8dfb44299..a198726bc 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .links { diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css b/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css index 0d926e919..8a6420239 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -1,12 +1,12 @@ .joinLoyaltyContainer { display: flex; flex-direction: column; - gap: var(--Spacing-x5); + gap: var(--Space-x5); } .wrapper { display: grid; - gap: var(--Spacing-x3); - padding-top: var(--Spacing-x4); + gap: var(--Space-x3); + padding-top: var(--Space-x4); justify-items: center; } @@ -16,7 +16,7 @@ article.wrapper .preamble { .loginContainer { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); justify-items: start; } diff --git a/apps/scandic-web/components/Sidebar/sidebar.module.css b/apps/scandic-web/components/Sidebar/sidebar.module.css index 2995e59a8..e57b49794 100644 --- a/apps/scandic-web/components/Sidebar/sidebar.module.css +++ b/apps/scandic-web/components/Sidebar/sidebar.module.css @@ -1,19 +1,19 @@ .aside { grid-area: sidebar; display: grid; - gap: var(--Spacing-x4); + gap: var(--Space-x4); container-name: sidebar; container-type: inline-size; - gap: var(--Spacing-x3); + gap: var(--Space-x3); border-top: 1px solid var(--Base-Border-Subtle); - padding-top: var(--Spacing-x4); + padding-top: var(--Space-x4); } @media screen and (min-width: 1367px) { .aside { align-content: flex-start; - gap: var(--Spacing-x4); + gap: var(--Space-x4); border-top: 0; padding-top: 0; } diff --git a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css index 3b8c3eb98..de5c9bc1d 100644 --- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css +++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css @@ -17,12 +17,12 @@ .price { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .contentContainer { padding: var(--Space-x15) 0 0 0; display: flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css index 72945fac8..626c38efa 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css @@ -25,7 +25,7 @@ .toggleButton { position: absolute; - right: var(--Spacing-x2); + right: var(--Space-x2); top: 50%; transform: translateY(-50%); } diff --git a/apps/scandic-web/components/TempDesignSystem/Grids/Dynamic/dynamic.module.css b/apps/scandic-web/components/TempDesignSystem/Grids/Dynamic/dynamic.module.css index 7e26bafc2..b6f9eb432 100644 --- a/apps/scandic-web/components/TempDesignSystem/Grids/Dynamic/dynamic.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Grids/Dynamic/dynamic.module.css @@ -1,6 +1,6 @@ .grid { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); } diff --git a/apps/scandic-web/components/TempDesignSystem/Grids/Stackable/stackable.module.css b/apps/scandic-web/components/TempDesignSystem/Grids/Stackable/stackable.module.css index c7eb1af94..26abd2c9a 100644 --- a/apps/scandic-web/components/TempDesignSystem/Grids/Stackable/stackable.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Grids/Stackable/stackable.module.css @@ -1,6 +1,6 @@ .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } /* Hide Scrollbar Chrome, Safari and Opera */ diff --git a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css index 053464bf1..27106031c 100644 --- a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css +++ b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css @@ -2,11 +2,11 @@ align-items: center; display: grid; border-radius: var(--Corner-radius-xl); - gap: var(--Spacing-x2); + gap: var(--Space-x2); min-height: 480px; justify-content: space-between; - margin-right: var(--Spacing-x2); - padding: var(--Spacing-x4) var(--Spacing-x3); + margin-right: var(--Space-x2); + padding: var(--Space-x4) var(--Space-x3); text-align: center; width: 100%; } @@ -24,7 +24,7 @@ .buttonContainer { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: center; } diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css index 9d946571f..90b27f276 100644 --- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css +++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css @@ -4,5 +4,5 @@ .ctaContainer { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css index f18a9b925..29672d799 100644 --- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css +++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css @@ -32,7 +32,7 @@ .content { display: grid; gap: var(--Space-x15); - padding: var(--Spacing-x2) var(--Spacing-x3); + padding: var(--Space-x2) var(--Space-x3); grid-template-rows: auto 1fr auto; flex-grow: 1; } @@ -44,7 +44,7 @@ .ctaContainer { display: grid; grid-template-columns: 1fr; - gap: var(--Spacing-x1); + gap: var(--Space-x1); width: 100%; } diff --git a/apps/scandic-web/components/Webviews/AccountPage/accountPage.module.css b/apps/scandic-web/components/Webviews/AccountPage/accountPage.module.css index 1144d0dc1..11c35c634 100644 --- a/apps/scandic-web/components/Webviews/AccountPage/accountPage.module.css +++ b/apps/scandic-web/components/Webviews/AccountPage/accountPage.module.css @@ -1,5 +1,5 @@ .blocks { display: grid; - gap: var(--Spacing-x5); - padding: var(--Spacing-x2); + gap: var(--Space-x5); + padding: var(--Space-x2); } diff --git a/apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css b/apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css index 452e9ec57..3266c6644 100644 --- a/apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css +++ b/apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css @@ -1,10 +1,10 @@ .content { display: grid; - padding: var(--Spacing-x2); - gap: var(--Spacing-x5); + padding: var(--Space-x2); + gap: var(--Space-x5); } .blocks { display: grid; - gap: var(--Spacing-x5); + gap: var(--Space-x5); } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css index e3d91663e..257aa6fbb 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css @@ -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); } } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css index 7ff864599..023040c44 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css @@ -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); } } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css b/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css index bf479286a..f472e0eaa 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css b/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css index 8b09b890b..d146d471c 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/PaymentDetails/paymentDetails.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css index dfe42022b..6523fe5eb 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css index 0092c6af1..96dda2a7a 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Promos/promos.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css index 9ba8c0c24..d00c5c945 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css @@ -26,7 +26,7 @@ .entry { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css index c51e5f4da..7902925ce 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/roomSkeletonLoader.module.css @@ -1,5 +1,5 @@ .room { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); flex-direction: column; } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css index be8760911..bd74f1b93 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css index 9a4a8ba8f..00575a86f 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css index 42fa6a685..358763793 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/rooms.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/rooms.module.css index 6f643ba1f..74de463ab 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/rooms.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/rooms.module.css @@ -1,7 +1,7 @@ .rooms { display: flex; flex-direction: column; - gap: var(--Spacing-x5); + gap: var(--Space-x5); } .room { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/bookingConfirmation.module.css b/packages/booking-flow/lib/components/BookingConfirmation/bookingConfirmation.module.css index f7555e753..132b65313 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/bookingConfirmation.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/bookingConfirmation.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css index f22b90496..da41597e4 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css index 25b86ac5e..c1da92c90 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css @@ -24,7 +24,7 @@ .rewardNightTooltip { max-width: 560px; - margin-top: var(--Spacing-x2); + margin-top: var(--Space-x2); } @media screen and (max-width: 767px) { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css index 76025b0c5..c235ef703 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css index 1c8aa72f3..d5ab7efad 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css index 167f470ae..23239f22a 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css @@ -1,7 +1,7 @@ .listItem { border-radius: var(--Corner-radius-md); cursor: pointer; - padding: var(--Spacing-x1); + padding: var(--Space-x1); } .default { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css index 5278ef667..04a267032 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css @@ -5,5 +5,5 @@ } .label { - padding: 0 var(--Spacing-x1); + padding: 0 var(--Space-x1); } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css index 9aeeecba2..85b96e40e 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css index 3d6c74dc7..15498f806 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css index 81bc95dbf..9b851a779 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css index f1bb9c566..7af7029c8 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css index 5fc8567e6..006af3b29 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css @@ -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; } } diff --git a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css index b9c6b3920..ce9876ea4 100644 --- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css index 4cecc5e20..02863d9fe 100644 --- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css b/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css index ee858839f..80a85c665 100644 --- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css @@ -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)); } } diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css index 530babb64..f4ba9d1b2 100644 --- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css index f9e12fa23..e65aa60bd 100644 --- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css index 69666a67b..61aaa2011 100644 --- a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css @@ -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 */ diff --git a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css index 41bcc10ad..824bc5ff9 100644 --- a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css @@ -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%; diff --git a/packages/booking-flow/lib/components/Contact/contact.module.css b/packages/booking-flow/lib/components/Contact/contact.module.css index 4124889a0..c1de3ddb1 100644 --- a/packages/booking-flow/lib/components/Contact/contact.module.css +++ b/packages/booking-flow/lib/components/Contact/contact.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/BedType/bedOptions.module.css b/packages/booking-flow/lib/components/EnterDetails/BedType/bedOptions.module.css index 3f938b24f..fc04219c9 100644 --- a/packages/booking-flow/lib/components/EnterDetails/BedType/bedOptions.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/BedType/bedOptions.module.css @@ -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%); } diff --git a/packages/booking-flow/lib/components/EnterDetails/Breakfast/breakfast.module.css b/packages/booking-flow/lib/components/EnterDetails/Breakfast/breakfast.module.css index ed8762e97..f16577b0e 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Breakfast/breakfast.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Breakfast/breakfast.module.css @@ -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%); } diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css index 428b4f32f..4a25818ef 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css index 642295320..f65888f59 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css @@ -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%); } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css index 1feb7670c..fe90247f3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/details.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/details.module.css index f4b9191e1..f556cef52 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/details.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/details.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css index de1020941..e8ec25e23 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/signup.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/details.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/details.module.css index f4b9191e1..f556cef52 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/details.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/details.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/bookingAlert.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/bookingAlert.module.css index df4d7a180..26d27f1b3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/bookingAlert.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/bookingAlert.module.css @@ -1,4 +1,4 @@ .wrapper { - margin-top: var(--Spacing-x3); + margin-top: var(--Space-x3); max-width: min(100%, 620px); } diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css index 32e678fbe..4e8e6c7fe 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css @@ -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, diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css index df2185d0c..45f7b7c56 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/timeoutSpinner.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/timeoutSpinner.module.css index acce4b75b..4f328fdbc 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/timeoutSpinner.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/timeoutSpinner.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css index 78e9f0950..a32535341 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css index 52d8ddd32..e77f8bd8a 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css @@ -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; } } diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css index e235f1d66..70cb424b8 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css b/packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css index 4d69b606e..25be6fe95 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css @@ -1,3 +1,3 @@ .header { - padding-bottom: var(--Spacing-x3); + padding-bottom: var(--Space-x3); } diff --git a/packages/booking-flow/lib/components/EnterDetails/Section/section.module.css b/packages/booking-flow/lib/components/EnterDetails/Section/section.module.css index a884d4c5e..75e7aba3b 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Section/section.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Section/section.module.css @@ -16,7 +16,7 @@ } .contentWrapper { - padding-bottom: var(--Spacing-x3); + padding-bottom: var(--Space-x3); } .content { diff --git a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css index b1a8a0297..9beb77189 100644 --- a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/selectedRoom.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/Breakfast/breakfast.module.css b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/Breakfast/breakfast.module.css index 3ed078736..4be0ceba3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/Breakfast/breakfast.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/Breakfast/breakfast.module.css @@ -1,6 +1,6 @@ .entry { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; } diff --git a/packages/booking-flow/lib/components/FnFNotAllowedAlert/FnFNotAllowedAlert.module.css b/packages/booking-flow/lib/components/FnFNotAllowedAlert/FnFNotAllowedAlert.module.css index 1df3eb7da..eb48c1c18 100644 --- a/packages/booking-flow/lib/components/FnFNotAllowedAlert/FnFNotAllowedAlert.module.css +++ b/packages/booking-flow/lib/components/FnFNotAllowedAlert/FnFNotAllowedAlert.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css b/packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css index f81aab94f..e0d2af723 100644 --- a/packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css +++ b/packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css b/packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css index 00bd7ec84..05dc0d2e6 100644 --- a/packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css +++ b/packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css index b58a25689..cbcce98f4 100644 --- a/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css +++ b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css @@ -1,5 +1,5 @@ .content { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); color: var(--Text-Default); } diff --git a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css index f28542dda..3185c53f3 100644 --- a/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css +++ b/packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Tbody/tbody.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css b/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css index 570bfbff0..09655a3ed 100644 --- a/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css +++ b/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css b/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css index 25591021a..86730ad01 100644 --- a/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css +++ b/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css index 76bec5dd5..6551a7eeb 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css +++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css b/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css index 0eb31bbd8..e5e2be7fa 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css +++ b/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css @@ -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"] { diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css index 0f29f2859..0be7d374b 100644 --- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css +++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css @@ -16,5 +16,5 @@ display: block; width: 100%; overflow-y: auto; - padding-top: var(--Spacing-x2); + padding-top: var(--Space-x2); } diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css index ebff63b26..48d7af73d 100644 --- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css +++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css index 46c20f794..20d8d5415 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css @@ -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) { diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css index 01f617030..c019a54a4 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css index 2ff7fc9b8..6c5326e04 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css @@ -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; diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css index f8bffab8f..b04ebc350 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css @@ -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); } } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css index b00546904..5e532af61 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css @@ -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 { diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css index 0625564e2..e4dc06928 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css index a27bbf9ff..08ace1910 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css @@ -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); } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css index fab1703c8..a5b1f935d 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css index 23ccc3f2c..fe38ec8cf 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css @@ -13,5 +13,5 @@ flex-wrap: wrap; justify-content: space-between; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/rooms.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/rooms.module.css index 1d29321cc..b4a324bb6 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/rooms.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/rooms.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RoomsContainerSkeleton.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RoomsContainerSkeleton.module.css index 4e9a9d583..229011bc1 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RoomsContainerSkeleton.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RoomsContainerSkeleton.module.css @@ -19,5 +19,5 @@ flex-wrap: wrap; justify-content: space-between; margin-top: 20px; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css b/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css index a56f2e575..63bc9b35a 100644 --- a/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css +++ b/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css @@ -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; } diff --git a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css index 7a504535e..b861995cc 100644 --- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css +++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css @@ -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; } diff --git a/packages/booking-flow/lib/pages/EnterDetailsPage.module.css b/packages/booking-flow/lib/pages/EnterDetailsPage.module.css index 093c27fca..c16d31257 100644 --- a/packages/booking-flow/lib/pages/EnterDetailsPage.module.css +++ b/packages/booking-flow/lib/pages/EnterDetailsPage.module.css @@ -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 { diff --git a/packages/design-system/lib/components/Chip/chip.module.css b/packages/design-system/lib/components/Chip/chip.module.css index 8f697a14e..1d035db3d 100644 --- a/packages/design-system/lib/components/Chip/chip.module.css +++ b/packages/design-system/lib/components/Chip/chip.module.css @@ -6,16 +6,16 @@ div.chip { background-color: var(--chip-background-color); border-radius: var(--Corner-radius-sm); display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: center; } .chip.small { - padding: var(--Spacing-x-quarter) var(--Spacing-x-half); + padding: var(--Space-x025) var(--Space-x05); } .chip.medium { - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); } .chip *, diff --git a/packages/design-system/lib/components/DeprecatedSelect/select.module.css b/packages/design-system/lib/components/DeprecatedSelect/select.module.css index 051d10e8f..b390f940b 100644 --- a/packages/design-system/lib/components/DeprecatedSelect/select.module.css +++ b/packages/design-system/lib/components/DeprecatedSelect/select.module.css @@ -7,7 +7,7 @@ border-radius: var(--Corner-radius-md); display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .select[data-focused='true'] { @@ -30,7 +30,7 @@ .select.discreet .input { background-color: unset; color: var(--Base-Text-High-contrast); - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .select[data-disabled], @@ -42,7 +42,7 @@ .iconLabel { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .input { @@ -52,10 +52,10 @@ border-radius: var(--Corner-radius-md); color: var(--UI-Text-High-contrast); display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); height: 60px; outline: none; - padding: var(--Space-x15) var(--Spacing-x2); + padding: var(--Space-x15) var(--Space-x2); text-align: left; justify-content: space-between; } @@ -72,7 +72,7 @@ justify-content: flex-end; flex-direction: row; font-weight: 500; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .popover { @@ -81,7 +81,7 @@ box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); display: inline-flex; flex-direction: column; - gap: var(--Spacing-x1); + gap: var(--Space-x1); overflow: auto; width: 100%; } @@ -89,12 +89,12 @@ .listBox { display: flex; flex-direction: column; - gap: var(--Spacing-x1); - padding: var(--Spacing-x2); + gap: var(--Space-x1); + padding: var(--Space-x2); } .listBoxItem { - padding: var(--Spacing-x1); + padding: var(--Space-x1); } .listBoxItem[data-focused='true'], diff --git a/packages/design-system/lib/components/Form/Date/date.module.css b/packages/design-system/lib/components/Form/Date/date.module.css index 74ae18f96..0eddd0fa1 100644 --- a/packages/design-system/lib/components/Form/Date/date.module.css +++ b/packages/design-system/lib/components/Form/Date/date.module.css @@ -1,6 +1,6 @@ .container { display: flex; - gap: var(--Spacing-x2); + gap: var(--Space-x2); user-select: none; } diff --git a/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css index 151f94f8d..b9d437035 100644 --- a/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css +++ b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css @@ -7,7 +7,7 @@ display: flex; align-items: center; justify-content: space-between; - gap: var(--Spacing-x2); + gap: var(--Space-x2); cursor: pointer; } @@ -36,6 +36,6 @@ .paymentOptionIcon { position: absolute; - right: var(--Spacing-x3); + right: var(--Space-x3); top: calc(50% - 16px); } diff --git a/packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css b/packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css index f6aca5f08..b28ec5d34 100644 --- a/packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css +++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css @@ -7,5 +7,5 @@ .section { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/packages/design-system/lib/components/Form/TextArea/textarea.module.css b/packages/design-system/lib/components/Form/TextArea/textarea.module.css index 859d5ac56..c1c52113d 100644 --- a/packages/design-system/lib/components/Form/TextArea/textarea.module.css +++ b/packages/design-system/lib/components/Form/TextArea/textarea.module.css @@ -1,15 +1,15 @@ .helpText { align-items: flex-start; display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .error { align-items: center; color: var(--Scandic-Red-60); display: flex; - gap: var(--Spacing-x-half); - margin: var(--Spacing-x1) 0 0; + gap: var(--Space-x05); + margin: var(--Space-x1) 0 0; } .container { @@ -22,7 +22,7 @@ min-width: 0; /* allow shrinkage */ grid-template-rows: auto 1fr; height: 138px; - padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2); + padding: var(--Space-x3) var(--Space-x2) 0 var(--Space-x2); transition: border-color 200ms ease; } diff --git a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css b/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css index 9dc1c12ed..a14dab02e 100644 --- a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css +++ b/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css @@ -22,8 +22,8 @@ .priceVariants { display: flex; flex-direction: column; - gap: var(--Spacing-x1); - padding: var(--Spacing-x2); + gap: var(--Space-x1); + padding: var(--Space-x2); flex: 1; } @@ -31,8 +31,8 @@ display: flex; flex-direction: column; flex: 1; - gap: var(--Spacing-x1); - padding: var(--Spacing-x2); + gap: var(--Space-x1); + padding: var(--Space-x2); } .text { @@ -41,7 +41,7 @@ @media (min-width: 1367px) { .content { - padding: var(--Spacing-x2) 0 var(--Spacing-x2) var(--Spacing-x2); + padding: var(--Space-x2) 0 var(--Space-x2) var(--Space-x2); } .text { diff --git a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css index c538abbe8..8d7f2528d 100644 --- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css +++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css @@ -6,14 +6,14 @@ width: 100%; } .divider { - margin: var(--Spacing-x-half) 0; + margin: var(--Space-x05) 0; } .priceRow { display: flex; justify-content: space-between; align-items: baseline; - padding: var(--Spacing-x-quarter) 0; + padding: var(--Space-x025) 0; } .redColor { @@ -28,7 +28,7 @@ .price { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .voucherChqRate { diff --git a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css index 33ebf364a..abe4e05c2 100644 --- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css +++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css @@ -9,7 +9,7 @@ .voucherRow, .voucher { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; align-items: baseline; } diff --git a/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css b/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css index 07a47e3cb..c5770d077 100644 --- a/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css +++ b/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css @@ -8,5 +8,5 @@ .noRooms { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } diff --git a/packages/design-system/lib/components/IconChip/iconChip.module.css b/packages/design-system/lib/components/IconChip/iconChip.module.css index 4aa2f7e6f..9d95c7221 100644 --- a/packages/design-system/lib/components/IconChip/iconChip.module.css +++ b/packages/design-system/lib/components/IconChip/iconChip.module.css @@ -1,8 +1,8 @@ .chip { display: flex; align-items: center; - gap: var(--Spacing-x1); - padding: var(--Spacing-x1) var(--Space-x15); + gap: var(--Space-x1); + padding: var(--Space-x1) var(--Space-x15); border-radius: var(--Corner-radius-sm); } diff --git a/packages/design-system/lib/components/ImageContainer/imageContainer.module.css b/packages/design-system/lib/components/ImageContainer/imageContainer.module.css index 95f1b1e20..18d6c334f 100644 --- a/packages/design-system/lib/components/ImageContainer/imageContainer.module.css +++ b/packages/design-system/lib/components/ImageContainer/imageContainer.module.css @@ -1,6 +1,6 @@ .container { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); width: 100%; grid-template-columns: auto; } @@ -19,6 +19,6 @@ } .image { - margin: var(--Spacing-x1) var(--Spacing-x0); + margin: var(--Space-x1) 0; } } diff --git a/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css b/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css index 994fa7b6f..7b7c69d6c 100644 --- a/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css +++ b/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css @@ -2,13 +2,12 @@ display: flex; justify-content: center; align-items: center; - padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half) - var(--Spacing-x-half); + padding: var(--Space-x05) var(--Space-x1) var(--Space-x05) var(--Space-x05); border: 2px solid var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-rounded); background-color: var(--Base-Surface-Primary-light-Normal); box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); - gap: var(--Spacing-x1); + gap: var(--Space-x1); width: max-content; } diff --git a/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css b/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css index 3b972257e..5b7766043 100644 --- a/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css +++ b/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css @@ -1,8 +1,8 @@ .content { display: flex; flex-direction: column; - gap: var(--Spacing-x3); - padding: var(--Spacing-x1) var(--Spacing-x3) var(--Spacing-x4); + gap: var(--Space-x3); + padding: var(--Space-x1) var(--Space-x3) var(--Space-x4); max-height: 70vh; overflow-y: auto; width: 100%; @@ -12,8 +12,7 @@ display: flex; justify-content: space-between; width: 100%; - padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x1) - var(--Spacing-x3); + padding: var(--Space-x3) var(--Space-x3) var(--Space-x1) var(--Space-x3); } .footer { @@ -21,7 +20,7 @@ justify-content: space-between; width: 100%; border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x3); + padding: var(--Space-x3); } .close { diff --git a/packages/design-system/lib/components/Modal/modal.module.css b/packages/design-system/lib/components/Modal/modal.module.css index 1fba2dd3d..271598231 100644 --- a/packages/design-system/lib/components/Modal/modal.module.css +++ b/packages/design-system/lib/components/Modal/modal.module.css @@ -37,14 +37,14 @@ align-items: flex-start; min-height: var(--button-dimension); position: relative; - padding: var(--Spacing-x3) var(--Spacing-x3) 0; + padding: var(--Space-x3) var(--Space-x3) 0; } .content { display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); overflow: auto; } @@ -53,7 +53,7 @@ } .contentWithoutActions { - padding: 0 var(--Spacing-x3) var(--Spacing-x4); + padding: 0 var(--Space-x3) var(--Space-x4); } .close { @@ -61,7 +61,7 @@ border: none; cursor: pointer; position: absolute; - right: var(--Spacing-x2); + right: var(--Space-x2); width: var(--button-dimension); height: var(--button-dimension); display: flex; diff --git a/packages/design-system/lib/components/OldDSButton/button.module.css b/packages/design-system/lib/components/OldDSButton/button.module.css index 38e4fdba3..0457618c0 100644 --- a/packages/design-system/lib/components/OldDSButton/button.module.css +++ b/packages/design-system/lib/components/OldDSButton/button.module.css @@ -66,14 +66,14 @@ a.text { a.default { align-items: center; display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: center; } .btn.icon:is(.small, .medium, .large) { align-items: center; display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: center; } @@ -81,34 +81,34 @@ a.default { .btn.small { font-size: var(--typography-Caption-Bold-fontSize); line-height: var(--typography-Caption-Bold-lineHeight); - gap: var(--Spacing-x-quarter); - padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); + gap: var(--Space-x025); + padding: calc(var(--Space-x1) + 2px) var(--Space-x2); /* Special case padding to adjust the missing border */ } .btn.small.secondary { - padding: var(--Spacing-x1) var(--Spacing-x2); + padding: var(--Space-x1) var(--Space-x2); } .btn.medium { - gap: var(--Spacing-x-half); - padding: calc(var(--Space-x15) + 2px) var(--Spacing-x2); + gap: var(--Space-x05); + padding: calc(var(--Space-x15) + 2px) var(--Space-x2); /* Special case padding to adjust the missing border */ } .medium.secondary { - padding: var(--Space-x15) var(--Spacing-x2); + padding: var(--Space-x15) var(--Space-x2); } .btn.large { - gap: var(--Spacing-x-half); - padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); + gap: var(--Space-x05); + padding: calc(var(--Space-x2) + 2px) var(--Space-x3); /* Special case padding to adjust the missing border */ } .large.secondary { - gap: var(--Spacing-x-half); - padding: var(--Spacing-x2) var(--Spacing-x3); + gap: var(--Space-x05); + padding: var(--Space-x2) var(--Space-x3); } /* DISABLED */ diff --git a/packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css b/packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css index af64ab3eb..e0a28b4a2 100644 --- a/packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css +++ b/packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css @@ -1,13 +1,13 @@ .wrapper { display: grid; - row-gap: var(--Spacing-x1); + row-gap: var(--Space-x1); margin: 0; color: var(--Text-Default); } .period { display: flex; - gap: var(--Spacing-x5); + gap: var(--Space-x5); } .information { diff --git a/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css b/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css index a2266c2c6..288e8008e 100644 --- a/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css +++ b/packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css @@ -55,7 +55,7 @@ justify-content: flex-end; border-bottom: 1px solid var(--Base-Border-Subtle); align-items: center; - padding: var(--Spacing-x4); + padding: var(--Space-x4); } .header:has(> h2) { @@ -67,7 +67,7 @@ } .sidePeekContent { - padding: var(--Spacing-x4); + padding: var(--Space-x4); overflow-y: auto; } diff --git a/packages/design-system/lib/components/SidePeek/sidePeek.module.css b/packages/design-system/lib/components/SidePeek/sidePeek.module.css index b0e425941..98ccfdc54 100644 --- a/packages/design-system/lib/components/SidePeek/sidePeek.module.css +++ b/packages/design-system/lib/components/SidePeek/sidePeek.module.css @@ -46,7 +46,7 @@ justify-content: flex-end; border-bottom: 1px solid var(--Base-Border-Subtle); align-items: flex-start; - padding: var(--Spacing-x4); + padding: var(--Space-x4); } .header:has(.heading) { @@ -60,7 +60,7 @@ } .sidePeekContent { - padding: var(--Spacing-x4); + padding: var(--Space-x4); overflow-y: auto; } diff --git a/packages/design-system/lib/components/Subtitle/subtitle.module.css b/packages/design-system/lib/components/Subtitle/subtitle.module.css index 10d3773dd..d45072c34 100644 --- a/packages/design-system/lib/components/Subtitle/subtitle.module.css +++ b/packages/design-system/lib/components/Subtitle/subtitle.module.css @@ -1,6 +1,6 @@ .subtitle { - margin: var(--Spacing-x0); - padding: var(--Spacing-x0); + margin: 0; + padding: 0; } .one { diff --git a/packages/design-system/lib/components/Toasts/toasts.module.css b/packages/design-system/lib/components/Toasts/toasts.module.css index 9f455a4b1..2292d9818 100644 --- a/packages/design-system/lib/components/Toasts/toasts.module.css +++ b/packages/design-system/lib/components/Toasts/toasts.module.css @@ -9,7 +9,7 @@ } .content { - padding: var(--Space-x15) var(--Spacing-x3); + padding: var(--Space-x15) var(--Space-x3); } @media screen and (min-width: 768px) { @@ -19,7 +19,7 @@ } .toast .message { - padding: var(--Spacing-x2) var(--Space-x15); + padding: var(--Space-x2) var(--Space-x15); } .success { @@ -43,6 +43,6 @@ align-items: center; justify-content: center; background-color: var(--icon-background-color); - padding: var(--Spacing-x2); + padding: var(--Space-x2); height: 100%; } diff --git a/packages/design-system/lib/components/Tooltip/tooltip.module.css b/packages/design-system/lib/components/Tooltip/tooltip.module.css index 5e3d7a7ec..471e685ef 100644 --- a/packages/design-system/lib/components/Tooltip/tooltip.module.css +++ b/packages/design-system/lib/components/Tooltip/tooltip.module.css @@ -4,7 +4,7 @@ } .tooltip { - padding: var(--Spacing-x1); + padding: var(--Space-x1); background-color: var(--Surface-UI-Fill-Intense); border: 0.5px solid var(--Border-Interactive-Focus); border-radius: var(--Corner-radius-md); diff --git a/packages/design-system/lib/design-system-new-deprecated.css b/packages/design-system/lib/design-system-new-deprecated.css index e1d4ad92c..0cc59c807 100644 --- a/packages/design-system/lib/design-system-new-deprecated.css +++ b/packages/design-system/lib/design-system-new-deprecated.css @@ -353,17 +353,6 @@ --Layout-Desktop-Margin-Margin-min: 40px; --Layout-Mobile-Margin-Margin-min: 16px; --Layout-Tablet-Margin-Margin-min: 24px; - --Spacing-x0: 0px; - --Spacing-x1: 8px; - --Spacing-x2: 16px; - --Spacing-x3: 24px; - --Spacing-x4: 32px; - --Spacing-x5: 40px; - --Spacing-x6: 48px; - --Spacing-x7: 56px; - --Spacing-x9: 72px; - --Spacing-x-half: 4px; - --Spacing-x-quarter: 2px; } :root { --Scandic-Beige-00: #faf6f2;