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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,4 +1,4 @@
.wrapper {
margin-top: var(--Spacing-x3);
margin-top: var(--Space-x3);
max-width: min(100%, 620px);
}

View File

@@ -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,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,3 +1,3 @@
.header {
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}

View File

@@ -16,7 +16,7 @@
}
.contentWrapper {
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.content {

View File

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

View File

@@ -1,6 +1,6 @@
.entry {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: space-between;
}