chore: Replaced deprecated Spacing variables with current values

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

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);
}

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) {

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 {

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;

View File

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

View File

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

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);
}

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;

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;

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 {