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

Merged in feat/book-522-align (pull request #3101)

Browse Source 
feat(BOOK-522): align items in topmenu, header and booking widget

* feat(BOOK-522): align items in topmenu, header and booking widget

* Delete old css variable and use new

* Fixed underline on icons


Approved-by: Erik Tiekstra
This commit is contained in:
Linus Flood
2025-11-07 11:06:56 +00:00
parent fd92afc015
commit 7fb95f436b
64 changed files with 103 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -21,7 +21,7 @@
.textContainer { .textContainer {
align-content: flex-start; align-content: flex-start;
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;

6
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
View File

@@ -1,5 +1,5 @@
.rewardCard { .rewardCard {
padding-bottom: var(--Spacing-x-one-and-half); padding-bottom: var(--Space-x15);
grid-column: 1/3; grid-column: 1/3;
} }
@@ -15,7 +15,7 @@
} }
.rewardInfo { .rewardInfo {
padding-bottom: var(--Spacing-x-one-and-half); padding-bottom: var(--Space-x15);
} }
.rewardComparison { .rewardComparison {
@@ -27,7 +27,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: var(--Spacing-x-one-and-half); padding-top: var(--Space-x15);
} }
.details[open] .chevron { .details[open] .chevron {

4
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -91,7 +91,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 var(--Spacing-x3) var(--Spacing-x1); padding: 0 var(--Spacing-x3) var(--Spacing-x1);
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -120,7 +120,7 @@
.rewardBadge { .rewardBadge {
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
background: var(--Base-Surface-Secondary-light-Normal); background: var(--Base-Surface-Secondary-light-Normal);
display: grid; display: grid;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);

2
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css
View File

@@ -29,7 +29,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
padding: var(--Spacing-x4) var(--Spacing-x-one-and-half); padding: var(--Spacing-x4) var(--Space-x15);
width: 100%; width: 100%;
background-color: var(--Surface-Primary-On-Surface-Default); background-color: var(--Surface-Primary-On-Surface-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -56,7 +56,7 @@
.amenityList { .amenityList {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
flex-wrap: wrap; flex-wrap: wrap;
color: var(--Text-Secondary); color: var(--Text-Secondary);
} }

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css
View File

@@ -9,7 +9,7 @@
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Spacing-x-half);
} }
.citiesList li { .citiesList li {
margin-bottom: var(--Spacing-x-one-and-half); margin-bottom: var(--Space-x15);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {

4
apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css
View File

@@ -1,8 +1,8 @@
.checkboxWrapper { .checkboxWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
cursor: pointer; cursor: pointer;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
transition: background-color 0.3s; transition: background-color 0.3s;

2
apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css
View File

@@ -2,6 +2,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding-bottom: var(--Spacing-x3); padding-bottom: var(--Spacing-x3);
} }

2
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
View File

@@ -12,7 +12,7 @@
width: 100%; width: 100%;
gap: 0; gap: 0;
justify-content: stretch; justify-content: stretch;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2); padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2);
} }
.navigationMenu.mobile .item { .navigationMenu.mobile .item {

4
apps/scandic-web/components/Header/TopLink/index.tsx
View File

@@ -2,6 +2,8 @@ import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
import HeaderLink from "../HeaderLink" import HeaderLink from "../HeaderLink"
import styles from "./topLink.module.css"
import type { TopLinkProps } from "@/types/components/header/topLink" import type { TopLinkProps } from "@/types/components/header/topLink"
export default function TopLink({ export default function TopLink({
@@ -21,7 +23,7 @@ export default function TopLink({
iconName={linkData.icon || IconName.Gift} iconName={linkData.icon || IconName.Gift}
iconSize={iconSize} iconSize={iconSize}
> >
{linkData.title} <span className={styles.topLink}>{linkData.title}</span>
</HeaderLink> </HeaderLink>
) )
} }

3
apps/scandic-web/components/Header/TopLink/topLink.module.css Normal file
View File

@@ -0,0 +1,3 @@
.topLink {
margin-top: 2px;
}

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css
View File

@@ -3,7 +3,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
} }

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css
View File

@@ -15,7 +15,7 @@
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
height: 470px; height: 470px;
overflow-y: auto; overflow-y: auto;
padding-right: var(--Spacing-x-one-and-half); padding-right: var(--Space-x15);
margin-top: var(--Spacing-x2); margin-top: var(--Spacing-x2);
} }

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
View File

@@ -8,7 +8,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
margin-top: var(--Spacing-x5); margin-top: var(--Spacing-x5);
} }
@@ -99,7 +99,7 @@
.comment { .comment {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.actions { .actions {

6
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css
View File

@@ -46,7 +46,7 @@
.totalPointsText { .totalPointsText {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
align-items: center; align-items: center;
} }
@@ -87,7 +87,7 @@
} }
.guestDetails { .guestDetails {
align-items: flex-start; align-items: flex-start;
padding: var(--Spacing-x3) var(--Spacing-x-one-and-half); padding: var(--Spacing-x3) var(--Space-x15);
} }
.contactInfoMobile, .contactInfoMobile,
.userDetailsTitle { .userDetailsTitle {
@@ -99,7 +99,7 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.totalPoints { .totalPoints {
padding: var(--Spacing-x-one-and-half) 0; padding: var(--Space-x15) 0;
justify-content: flex-start; justify-content: flex-start;
} }
} }

2
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css
View File

@@ -8,7 +8,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.dl dt { .dl dt {

4
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css
View File

@@ -17,11 +17,11 @@
.totalContainer { .totalContainer {
border: 1px solid var(--Border-Divider-Subtle); border: 1px solid var(--Border-Divider-Subtle);
border-radius: var(--Spacing-x1); border-radius: var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2) padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2)
var(--Spacing-x2); var(--Spacing-x2);
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
display: flex; display: flex;
} }

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
View File

@@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half) 0; padding: var(--Space-x15) 0;
width: calc(100% - var(--Spacing-x4)); width: calc(100% - var(--Spacing-x4));
justify-content: center; justify-content: center;
margin: 0 auto; margin: 0 auto;

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
View File

@@ -17,6 +17,6 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin: 0; margin: 0;
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
} }
} }

4
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
View File

@@ -1,12 +1,12 @@
.header { .header {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding: 0 var(--Spacing-x2); padding: 0 var(--Spacing-x2);
} }
.container { .container {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.chip { .chip {

2
apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css
View File

@@ -4,7 +4,7 @@
column-gap: var(--Spacing-x1); column-gap: var(--Spacing-x1);
grid-template-columns: auto auto auto 1fr; grid-template-columns: auto auto auto 1fr;
justify-items: flex-end; justify-items: flex-end;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-radius-sm);
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
} }

2
apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css
View File

@@ -1,5 +1,5 @@
.badge { .badge {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

8
apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css
View File

@@ -20,13 +20,13 @@
.listContainer { .listContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.roomHeader { .roomHeader {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.chip { .chip {
@@ -57,7 +57,7 @@
.roomDetails { .roomDetails {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.row { .row {
@@ -99,7 +99,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half) 0; padding: var(--Space-x15) 0;
width: calc(100% - var(--Spacing-x4)); width: calc(100% - var(--Spacing-x4));
justify-content: center; justify-content: center;
margin: 0 auto; margin: 0 auto;

2
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css
View File

@@ -10,7 +10,7 @@
.contact { .contact {
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.contact > div { .contact > div {

2
apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css
View File

@@ -7,7 +7,7 @@
.links { .links {
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
justify-items: center; justify-items: center;
} }

2
apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
View File

@@ -21,7 +21,7 @@
} }
.contentContainer { .contentContainer {
padding: var(--Spacing-x-one-and-half) 0 0 0; padding: var(--Space-x15) 0 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);

2
apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
View File

@@ -31,7 +31,7 @@
.content { .content {
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding: var(--Spacing-x2) var(--Spacing-x3); padding: var(--Spacing-x2) var(--Spacing-x3);
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
flex-grow: 1; flex-grow: 1;

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

@@ -11,7 +11,7 @@
} }
.details { .details {
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.contact, .contact,

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

@@ -5,7 +5,7 @@
} }
.details { .details {
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
max-width: fit-content; max-width: fit-content;
} }

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

@@ -16,7 +16,7 @@
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
width: min(max-content, 100%); width: min(max-content, 100%);
} }

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

@@ -8,7 +8,7 @@
height: 60px; height: 60px;
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
} }
.bookingCodeLabel { .bookingCodeLabel {
@@ -79,7 +79,7 @@
align-items: center; align-items: center;
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
justify-content: space-between; justify-content: space-between;
border-radius: var(--Spacing-x-one-and-half); border-radius: var(--Space-x15);
} }
.error { .error {
color: var(--Text-Default); color: var(--Text-Default);
@@ -92,7 +92,7 @@
} }
.codePopover { .codePopover {
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Spacing-x-one-and-half); border-radius: var(--Space-x15);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
width: 320px; width: 320px;

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

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

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

@@ -17,7 +17,7 @@
flex-direction: column; flex-direction: column;
} }
.voucherSkeletonContainer { .voucherSkeletonContainer {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
} }
.checkbox { .checkbox {
@@ -36,7 +36,7 @@
} }
.option { .option {
margin-top: 0; margin-top: 0;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.optionsContainer { .optionsContainer {
display: grid; display: grid;

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

@@ -1,6 +1,6 @@
.vouchersHeader { .vouchersHeader {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.checkbox { .checkbox {
@@ -55,7 +55,7 @@
.rooms, .rooms,
.when { .when {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
} }
.button { .button {
@@ -87,6 +87,7 @@
display: flex; display: flex;
flex: 2; flex: 2;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
margin-left: calc(-1 * var(--Space-x15));
} }
.voucherContainer { .voucherContainer {
flex: 1; flex: 1;
@@ -105,7 +106,7 @@
.rooms, .rooms,
.when { .when {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
} }

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

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

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

@@ -11,7 +11,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: 20px var(--Spacing-x-one-and-half) 0; padding: 20px var(--Space-x15) 0;
} }
.body { .body {

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

@@ -68,7 +68,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: 20px var(--Spacing-x-one-and-half) 0; padding: 20px var(--Space-x15) 0;
} }
.guestsAndRooms { .guestsAndRooms {

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

@@ -5,7 +5,7 @@
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
cursor: pointer; cursor: pointer;
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
z-index: 1; z-index: 1;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);

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

@@ -85,6 +85,7 @@
&.compactFormContainer { &.compactFormContainer {
box-shadow: none; box-shadow: none;
padding-left: var(--Space-x15);
} }
} }

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

@@ -26,7 +26,7 @@
.soMeIcons { .soMeIcons {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.ecoLabel { .ecoLabel {
@@ -45,7 +45,7 @@
.ecoContainer { .ecoContainer {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: var(--Spacing-x-one-and-half); column-gap: var(--Space-x15);
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 4 / 4; grid-row: 4 / 4;
font-size: var(--typography-Footnote-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);

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

@@ -13,7 +13,7 @@
.iconContainer { .iconContainer {
display: flex; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.errorContainer { .errorContainer {

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

@@ -8,7 +8,7 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
background-color: var(--Scandic-Blue-00); background-color: var(--Scandic-Blue-00);
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
} }

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

@@ -25,7 +25,7 @@
.paymentOptionContainer { .paymentOptionContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.submitButton { .submitButton {
@@ -40,7 +40,7 @@
.terms { .terms {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.checkboxContainer { .checkboxContainer {

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

@@ -16,7 +16,7 @@
.listContainer { .listContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.imageContainer { .imageContainer {

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

@@ -64,7 +64,7 @@
} }
.sorter { .sorter {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x-half) padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x-half)
var(--Spacing-x2); var(--Spacing-x2);
flex: 0 0 auto; flex: 0 0 auto;
} }
@@ -99,7 +99,7 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
flex: 0 0 auto; flex: 0 0 auto;
} }
@@ -206,7 +206,7 @@
outline: none; outline: none;
} }
.filters ul li { .filters ul li {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
} }
} }
@media screen and (min-width: 1024) { @media screen and (min-width: 1024) {

2
packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/FilterCheckbox/filterCheckbox.module.css
View File

@@ -17,7 +17,7 @@
.checkboxContainer { .checkboxContainer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.checkbox { .checkbox {

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

@@ -27,7 +27,7 @@
.filter { .filter {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(min-content, max-content)); grid-template-columns: repeat(2, minmax(min-content, max-content));
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
margin-bottom: var(--Spacing-x1); margin-bottom: var(--Spacing-x1);
align-items: center; align-items: center;
} }

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

@@ -43,7 +43,7 @@
.addOns { .addOns {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
overflow-y: auto; overflow-y: auto;
} }

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

@@ -1,5 +1,5 @@
.hotelAlert { .hotelAlert {
margin: 0 auto; margin: 0 auto;
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
width: 100%; width: 100%;
} }

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

@@ -5,7 +5,7 @@
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-lg);
display: grid; display: grid;
font-size: 14px; font-size: 14px;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
padding: 0 var(--Spacing-x2) var(--Spacing-x2); padding: 0 var(--Spacing-x2) var(--Spacing-x2);
position: relative; position: relative;
} }

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

@@ -1,6 +1,6 @@
.errorContainer { .errorContainer {
margin: 0 auto; margin: 0 auto;
padding: var(--Spacing-x-one-and-half) 0; padding: var(--Space-x15) 0;
width: 100%; width: 100%;
max-width: var(--max-width-page); max-width: var(--max-width-page);
} }

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

@@ -1,7 +1,7 @@
.memberDiscountBannerMobile { .memberDiscountBannerMobile {
width: 100%; width: 100%;
background: var(--Primary-Light-Surface-Normal); background: var(--Primary-Light-Surface-Normal);
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -13,7 +13,7 @@
border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px
var(--Corner-radius-xl); var(--Corner-radius-xl);
align-items: center; align-items: center;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); padding: var(--Space-x15) var(--Spacing-x2);
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
position: relative; position: relative;
} }

4
packages/design-system/lib/components/DeprecatedSelect/select.module.css
View File

@@ -55,7 +55,7 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
height: 60px; height: 60px;
outline: none; outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); padding: var(--Space-x15) var(--Spacing-x2);
text-align: left; text-align: left;
justify-content: space-between; justify-content: space-between;
} }
@@ -112,7 +112,7 @@
.listBoxItem.showRadioButton:before { .listBoxItem.showRadioButton:before {
flex-shrink: 0; flex-shrink: 0;
content: ''; content: '';
margin-right: var(--Spacing-x-one-and-half); margin-right: var(--Space-x15);
background-color: white; background-color: white;
width: 24px; width: 24px;
height: 24px; height: 24px;

2
packages/design-system/lib/components/Form/Checkbox/checkbox.module.css
View File

@@ -18,7 +18,7 @@
.checkboxContainer { .checkboxContainer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.checkbox { .checkbox {

2
packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
View File

@@ -31,7 +31,7 @@
.titleContainer { .titleContainer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.paymentOptionIcon { .paymentOptionIcon {

2
packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css
View File

@@ -1,7 +1,7 @@
.paymentOptionContainer { .paymentOptionContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
} }
.section { .section {

2
packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
View File

@@ -1,5 +1,5 @@
.priceCard { .priceCard {
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
margin: 0; margin: 0;

2
packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
View File

@@ -1,5 +1,5 @@
.voucherCard { .voucherCard {
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
margin: 0; margin: 0;

2
packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
View File

@@ -1,5 +1,5 @@
.priceCard { .priceCard {
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
margin: 0; margin: 0;

2
packages/design-system/lib/components/IconChip/iconChip.module.css
View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Space-x15);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-radius-sm);
} }

16
packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
View File

@@ -14,7 +14,7 @@ export default function ScandicLogoIcon({
className={cx(styles.scandicLogo, className)} className={cx(styles.scandicLogo, className)}
width={width} width={width}
height={height} height={height}
viewBox="0 0 58 14" viewBox="0 0 132 28"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props} {...props}
@@ -22,41 +22,41 @@ export default function ScandicLogoIcon({
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M16.9227 12.9571C16.1038 13.1614 15.285 13.2295 14.4661 13.2295C11.532 13.2295 9.62134 11.8679 9.62134 8.66813C9.62134 5.60455 11.6002 4.31104 14.3979 4.31104C15.2167 4.31104 16.0356 4.37911 16.8544 4.51527V6.01303C16.2403 5.94495 15.7626 5.87687 15.2167 5.87687C12.9649 5.87687 11.8731 6.55766 11.8731 8.80429C11.8731 10.9148 12.8967 11.6636 15.2167 11.6636C15.8309 11.6636 16.3085 11.5956 16.8544 11.5275V12.9571H16.9227Z" d="M38.418 27.388C36.559 27.847 34.7 28 32.841 28C26.1795 28 21.8418 24.94 21.8418 17.749C21.8418 10.864 26.3344 7.95703 32.686 7.95703C34.5451 7.95703 36.4041 8.11003 38.2631 8.41603V11.782C36.8688 11.629 35.7844 11.476 34.5451 11.476C29.4328 11.476 26.9541 13.006 26.9541 18.055C26.9541 22.798 29.2778 24.481 34.5451 24.481C35.9393 24.481 37.0237 24.328 38.2631 24.175V27.388H38.418Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
d="M47.1499 13.0248H49.3335V4.44681H47.1499V13.0248ZM47.1499 2.74482H49.3335V0.770508H47.1499V2.74482Z" d="M107.047 27.54H112.004V8.262H107.047V27.54ZM107.047 4.437H112.004V0H107.047V4.437Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M45.3765 12.8206C44.9671 12.8887 43.4659 13.161 41.9647 13.161C39.167 13.161 37.1199 11.8675 37.1199 8.73583C37.1199 5.74032 38.9623 4.24257 41.76 4.24257C42.1694 4.24257 42.8518 4.31065 43.1929 4.31065V0.770508H45.3765C45.3765 1.17899 45.3765 12.6164 45.3765 12.8206ZM43.2612 11.5271V5.94456C42.9882 5.94456 42.5106 5.87648 42.0329 5.87648C40.054 5.87648 39.3034 6.8296 39.3034 8.80391C39.3034 10.574 39.9858 11.6633 41.9647 11.6633C42.3741 11.6633 42.7835 11.5952 43.2612 11.5271Z" d="M103.02 27.081C102.091 27.234 98.6827 27.846 95.2745 27.846C88.9229 27.846 84.2754 24.939 84.2754 17.901C84.2754 11.169 88.4582 7.803 94.8098 7.803C95.7393 7.803 97.2885 7.956 98.0631 7.956V0H103.02C103.02 0.918 103.02 26.622 103.02 27.081ZM98.218 24.174V11.628C97.5983 11.628 96.5139 11.475 95.4295 11.475C90.9368 11.475 89.2328 13.617 89.2328 18.054C89.2328 22.032 90.7819 24.48 95.2745 24.48C96.2041 24.48 97.1336 24.327 98.218 24.174Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M35.6873 13.0252H33.572V7.37462C33.572 6.4215 33.1625 5.87687 31.7978 5.87687C30.8425 5.87687 29.819 6.08111 29.819 6.08111V13.0252H27.7036V4.71951C27.8401 4.71951 30.5696 4.31104 32.139 4.31104C34.0496 4.31104 35.7555 4.65143 35.7555 7.23846V13.0252H35.6873Z" d="M81.0219 27.541H76.2194V14.842C76.2194 12.7 75.2899 11.476 72.1915 11.476C70.0227 11.476 67.6989 11.935 67.6989 11.935V27.541H62.8965V8.87503C63.2063 8.87503 69.403 7.95703 72.9661 7.95703C77.3038 7.95703 81.1768 8.72203 81.1768 14.536V27.541H81.0219Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M25.9296 13.0245C24.4284 13.1606 23.2684 13.2287 21.9719 13.2287C19.7883 13.2287 18.0142 12.8883 18.0142 10.4374C18.0142 8.05465 20.1977 7.91849 22.1766 7.85041C22.6543 7.85041 23.2001 7.85041 23.746 7.85041C23.746 6.35266 23.6778 5.80802 21.4942 5.80802C20.4024 5.80802 19.2424 6.01226 18.5601 6.14842V4.58259C19.3789 4.37835 20.6754 4.31027 21.6307 4.24219C24.0872 4.24219 25.9296 4.51451 25.9296 7.10153V13.0245ZM23.746 11.7309V9.28008C23.3366 9.28008 22.586 9.28008 22.3131 9.28008C21.0166 9.28008 20.1977 9.34816 20.1977 10.5736C20.1977 11.799 21.2213 11.8671 22.2448 11.8671C22.859 11.799 23.2001 11.799 23.746 11.7309Z" d="M58.8709 27.5417C55.4627 27.8477 52.8291 28.0007 49.8856 28.0007C44.9283 28.0007 40.9004 27.2357 40.9004 21.7277C40.9004 16.3727 45.8578 16.0667 50.3504 15.9137C51.4348 15.9137 52.6741 15.9137 53.9135 15.9137C53.9135 12.5477 53.7586 11.3237 48.8012 11.3237C46.3225 11.3237 43.6889 11.7827 42.1397 12.0887V8.56969C43.9987 8.11069 46.9422 7.95769 49.111 7.80469C54.6881 7.80469 58.8709 8.41669 58.8709 14.2307V27.5417ZM53.9135 24.6347V19.1267C52.984 19.1267 51.2799 19.1267 50.6602 19.1267C47.7168 19.1267 45.8578 19.2797 45.8578 22.0337C45.8578 24.7877 48.1815 24.9407 50.5053 24.9407C51.8996 24.7877 52.6741 24.7877 53.9135 24.6347Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M58.0001 12.9571C57.1812 13.1614 56.3624 13.2295 55.5435 13.2295C52.6094 13.2295 50.6987 11.8679 50.6987 8.66813C50.6987 5.60455 52.6776 4.31104 55.4753 4.31104C56.2941 4.31104 57.113 4.37911 57.9318 4.51527V6.01303C57.3177 5.94495 56.84 5.87687 56.2941 5.87687C54.0423 5.87687 52.9505 6.55766 52.9505 8.80429C52.9505 10.9148 53.9741 11.6636 56.2941 11.6636C56.9083 11.6636 57.3859 11.5956 57.9318 11.5275V12.9571H58.0001Z" d="M131.68 27.388C129.821 27.847 127.962 28 126.103 28C119.441 28 115.104 24.94 115.104 17.749C115.104 10.864 119.596 7.95703 125.948 7.95703C127.807 7.95703 129.666 8.11003 131.525 8.41603V11.782C130.131 11.629 129.046 11.476 127.807 11.476C122.694 11.476 120.216 13.006 120.216 18.055C120.216 22.798 122.54 24.481 127.807 24.481C129.201 24.481 130.285 24.328 131.525 24.175V27.388H131.68Z"
fill="CurrentColor" fill="CurrentColor"
/> />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M8.52959 9.61951C8.52959 12.1385 6.55072 13.2277 3.61655 13.2277C1.70592 13.2277 0.341184 12.8873 0.136473 12.8193V11.0492C0.81884 11.1853 2.25181 11.5257 3.48007 11.5257C4.70833 11.5257 6.27778 11.2534 6.27778 9.89183C6.27778 9.00679 5.59541 8.6664 4.36715 8.326C3.88949 8.18984 3.41184 8.05368 2.93418 7.91752C1.2965 7.44096 0 6.76016 0 4.85393C0 2.13075 2.18357 1.44995 4.70833 1.44995C6.20954 1.44995 7.4378 1.72227 7.64251 1.79035V3.42426C7.36956 3.35618 6.20954 3.08386 4.91304 3.08386C3.68478 3.08386 2.25181 3.22002 2.25181 4.58162C2.25181 5.60281 3.07065 5.87513 4.23068 6.14745C4.77657 6.35169 5.32246 6.41977 5.86836 6.62401C7.30133 7.03248 8.52959 7.71328 8.52959 9.61951Z" d="M19.3647 19.8903C19.3647 25.5513 14.8721 27.9993 8.21064 27.9993C3.87294 27.9993 0.774588 27.2343 0.309835 27.0813V23.1033C1.85901 23.4093 5.11228 24.1743 7.9008 24.1743C10.6893 24.1743 14.2524 23.5623 14.2524 20.5023C14.2524 18.5133 12.7033 17.7483 9.91473 16.9833C8.83031 16.6773 7.74588 16.3713 6.66146 16.0653C2.94344 14.9943 0 13.4643 0 9.18027C0 3.06027 4.95737 1.53027 10.6893 1.53027C14.0975 1.53027 16.886 2.14227 17.3508 2.29527V5.96727C16.7311 5.81427 14.0975 5.20227 11.1541 5.20227C8.36555 5.20227 5.11228 5.50827 5.11228 8.56827C5.11228 10.8633 6.9713 11.4753 9.6049 12.0873C10.8442 12.5463 12.0836 12.6993 13.3229 13.1583C16.5762 14.0763 19.3647 15.6063 19.3647 19.8903Z"
fill="CurrentColor" fill="CurrentColor"
/> />
</svg> </svg>

4
packages/design-system/lib/components/OldDSButton/button.module.css
View File

@@ -92,12 +92,12 @@ a.default {
.btn.medium { .btn.medium {
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); padding: calc(var(--Space-x15) + 2px) var(--Spacing-x2);
/* Special case padding to adjust the missing border */ /* Special case padding to adjust the missing border */
} }
.medium.secondary { .medium.secondary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); padding: var(--Space-x15) var(--Spacing-x2);
} }
.btn.large { .btn.large {

4
packages/design-system/lib/components/Toasts/toasts.module.css
View File

@@ -9,7 +9,7 @@
} }
.content { .content {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x3); padding: var(--Space-x15) var(--Spacing-x3);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@@ -19,7 +19,7 @@
} }
.toast .message { .toast .message {
padding: var(--Spacing-x2) var(--Spacing-x-one-and-half); padding: var(--Spacing-x2) var(--Space-x15);
} }
.success { .success {

1
packages/design-system/lib/design-system-new-deprecated.css
View File

@@ -363,7 +363,6 @@
--Spacing-x7: 56px; --Spacing-x7: 56px;
--Spacing-x9: 72px; --Spacing-x9: 72px;
--Spacing-x-half: 4px; --Spacing-x-half: 4px;
--Spacing-x-one-and-half: 12px;
--Spacing-x-quarter: 2px; --Spacing-x-quarter: 2px;
} }
:root { :root {