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

chore: Replaced deprecated Spacing variables with current values

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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