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
packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/hotelDetails.module.css
View File

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

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

@@ -5,7 +5,7 @@
}
.details {
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
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);
display: flex;
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%);
}

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

@@ -8,7 +8,7 @@
height: 60px;
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
padding: var(--Spacing-x1) var(--Space-x15);
}
.bookingCodeLabel {
@@ -79,7 +79,7 @@
align-items: center;
background: var(--Base-Surface-Primary-light-Normal);
justify-content: space-between;
border-radius: var(--Spacing-x-one-and-half);
border-radius: var(--Space-x15);
}
.error {
color: var(--Text-Default);
@@ -92,7 +92,7 @@
}
.codePopover {
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);
padding: var(--Spacing-x2);
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-width: 1px;
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;
height: 60px;

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

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

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

@@ -1,6 +1,6 @@
.vouchersHeader {
display: flex;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
}
.checkbox {
@@ -55,7 +55,7 @@
.rooms,
.when {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
padding: var(--Spacing-x1) var(--Space-x15);
}
.button {
@@ -87,6 +87,7 @@
display: flex;
flex: 2;
gap: var(--Spacing-x2);
margin-left: calc(-1 * var(--Space-x15));
}
.voucherContainer {
flex: 1;
@@ -105,7 +106,7 @@
.rooms,
.when {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
padding: var(--Spacing-x1) var(--Space-x15);
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) {
.default {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
var(--Spacing-x-one-and-half) var(--Spacing-x1);
padding: var(--Space-x15) var(--Spacing-x2) var(--Space-x15)
var(--Spacing-x1);
}
.full {
@@ -43,8 +43,8 @@
}
.compact {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
var(--Spacing-x-one-and-half) var(--Spacing-x1);
padding: var(--Space-x15) var(--Spacing-x2) var(--Space-x15)
var(--Spacing-x1);
white-space: nowrap;
}
}

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

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

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

@@ -68,7 +68,7 @@
left: 0;
bottom: 0;
right: 0;
padding: 20px var(--Spacing-x-one-and-half) 0;
padding: 20px var(--Space-x15) 0;
}
.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);
cursor: pointer;
display: grid;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
padding: var(--Spacing-x2);
z-index: 1;
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 {
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 {
display: flex;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
}
.ecoLabel {
@@ -45,7 +45,7 @@
.ecoContainer {
display: flex;
align-items: center;
column-gap: var(--Spacing-x-one-and-half);
column-gap: var(--Space-x15);
grid-column: 1 / 3;
grid-row: 4 / 4;
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 {
display: flex;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
}
.errorContainer {

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

@@ -8,7 +8,7 @@
flex-direction: column;
flex-grow: 1;
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-radius: var(--Corner-radius-md);
}

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

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

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

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

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

@@ -64,7 +64,7 @@
}
.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);
flex: 0 0 auto;
}
@@ -99,7 +99,7 @@
display: flex;
justify-content: flex-end;
text-align: right;
padding: var(--Spacing-x-one-and-half);
padding: var(--Space-x15);
flex: 0 0 auto;
}
@@ -206,7 +206,7 @@
outline: none;
}
.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) {

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

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

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

@@ -27,7 +27,7 @@
.filter {
display: grid;
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);
align-items: center;
}

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

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

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

@@ -1,5 +1,5 @@
.hotelAlert {
margin: 0 auto;
padding: var(--Spacing-x-one-and-half);
padding: var(--Space-x15);
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);
display: grid;
font-size: 14px;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x15);
padding: 0 var(--Spacing-x2) var(--Spacing-x2);
position: relative;
}

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

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

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

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