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,17 +1,17 @@
.form {
box-shadow: var(--popup-box-shadow);
padding: var(--Spacing-x3) 0;
padding: var(--Space-x3) 0;
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.form > div:not(.buttons) {
padding: 0 var(--Spacing-x3);
padding: 0 var(--Space-x3);
}
.inputs {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
@media screen and (min-width: 768px) {
@@ -41,8 +41,8 @@
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x3) var(--Spacing-x3) 0;
gap: var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x3) 0;
gap: var(--Space-x2);
}
.buttons > button:only-child {
@@ -55,5 +55,5 @@
.footnote {
display: grid;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}

View File

@@ -1,6 +1,6 @@
.buttons {
display: flex;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
justify-content: flex-end;
padding: var(--Space-x2) var(--Space-x15) 0 0;
}

View File

@@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md);

View File

@@ -1,7 +1,7 @@
.modalContent {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.termsAndConditions {

View File

@@ -4,19 +4,19 @@
.tabs {
display: flex;
gap: var(--Spacing-x1);
padding: var(--Spacing-x3) 0;
gap: var(--Space-x1);
padding: var(--Space-x3) 0;
flex-wrap: wrap;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
gap: var(--Spacing-x2);
gap: var(--Space-x2);
height: 470px;
overflow-y: auto;
padding-right: var(--Space-x15);
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.chip {

View File

@@ -11,7 +11,7 @@
padding: var(--Space-x2) var(--Space-x3);
background-color: var(--Surface-Primary-OnSurface-Default);
border-radius: var(--Corner-radius-md);
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.selectTitle {
@@ -45,7 +45,7 @@
.breakfastPrices {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-self: stretch;
}
@@ -58,7 +58,7 @@
background: var(--Surface-Feedback-Information-light);
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-self: stretch;
}

View File

@@ -24,7 +24,7 @@
.price {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
}
@@ -45,7 +45,7 @@
.description {
display: flex;
margin: var(--Spacing-x2) 0;
margin: var(--Space-x2) 0;
}
.pointsDivider {

View File

@@ -1,7 +1,7 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.header {
@@ -9,12 +9,12 @@
flex-direction: column;
justify-content: space-between;
gap: var(--Space-x15);
margin-top: var(--Spacing-x5);
margin-top: var(--Space-x5);
}
@media (min-width: 768px) {
.container {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.header {
align-items: center;
@@ -25,7 +25,7 @@
.deliveryTime {
display: flex;
justify-content: space-between;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.ancillaryMobile {
@@ -33,16 +33,16 @@
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.ancillaryDesktop {
display: none;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md);
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@media (min-width: 768px) {
@@ -61,40 +61,40 @@
.paymentMobile {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
}
.commentMobile {
margin-bottom: var(--Spacing-x3);
margin-bottom: var(--Space-x3);
}
.footerMobile {
display: flex;
margin-top: var(--Spacing-x4);
margin-top: var(--Space-x4);
}
.specification {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x1) 0;
padding: var(--Space-x1) 0;
}
.name {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-items: center;
}
.payment {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
}
.footer {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x1) 0;
padding: var(--Space-x1) 0;
}
.comment {
@@ -104,5 +104,5 @@
.actions {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

View File

@@ -1,7 +1,7 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
margin: 0 auto;
width: var(--max-width-content);
}
@@ -35,6 +35,6 @@
.ancillaries {
display: grid;
grid-template-columns: repeat(4, minmax(251px, 1fr));
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
}

View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.image {
@@ -16,7 +16,7 @@
flex-direction: column;
height: 100%;
text-align: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.bottomContent {
@@ -25,14 +25,14 @@
.links {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
padding-bottom: 10px;
}
.link {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.supportingText {

View File

@@ -1,8 +1,8 @@
.bookingSummary {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
padding: var(--Spacing-x2);
gap: var(--Space-x5);
padding: var(--Space-x2);
}
.bookingSummaryContent {

View File

@@ -3,9 +3,9 @@
flex-direction: column;
align-items: center;
background-color: var(--Main-Brand-PalePeach);
padding: var(--Spacing-x3) 0;
padding: var(--Space-x3) 0;
border-radius: var(--Corner-radius-md);
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.memberLevel {
@@ -20,17 +20,17 @@
}
.rowTitle {
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}
.userDetails {
width: 80%;
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider);
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
color: var(--Scandic-Brand-Burgundy);
align-items: center;
}
@@ -39,9 +39,9 @@
display: flex;
flex-direction: row;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: space-between;
padding-top: var(--Spacing-x3);
padding-top: var(--Space-x3);
}
.totalPointsText {
@@ -54,7 +54,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.memberNumber {
@@ -63,7 +63,7 @@
.contactInfoMobile {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
text-align: center;
}
@@ -87,7 +87,7 @@
}
.guestDetails {
align-items: flex-start;
padding: var(--Spacing-x3) var(--Space-x15);
padding: var(--Space-x3) var(--Space-x15);
}
.contactInfoMobile,
.userDetailsTitle {
@@ -96,7 +96,7 @@
.contactInfoDesktop {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.totalPoints {
padding: var(--Space-x15) 0;

View File

@@ -4,8 +4,8 @@ header .title {
left: 0;
right: 0;
margin: 0 auto;
padding-top: var(--Spacing-x6);
margin-top: var(--Spacing-x2);
padding-top: var(--Space-x6);
margin-top: var(--Space-x2);
}
.title .hotelName {

View File

@@ -1,7 +1,7 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
max-height: 70vh;
overflow-y: auto;
width: 100%;

View File

@@ -2,6 +2,6 @@
border-top: 1px solid var(--Base-Border-Subtle);
display: flex;
justify-content: space-between;
padding-top: var(--Spacing-x3);
padding-top: var(--Space-x3);
width: 100%;
}

View File

@@ -1,13 +1,13 @@
.container {
background-color: var(--Background-Primary);
padding: var(--Spacing-x2) var(--Spacing-x1) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x1) var(--Space-x3);
border-radius: var(--Corner-radius-md);
}
.row {
display: grid;
gap: var(--Spacing-x2);
margin-bottom: var(--Spacing-x2);
gap: var(--Space-x2);
margin-bottom: var(--Space-x2);
width: 100%;
}
@@ -23,7 +23,7 @@
.container {
width: 700px;
max-width: 100%;
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
}
.gridEqual {
grid-template-columns: 1fr 1fr;

View File

@@ -12,9 +12,9 @@
display: flex;
flex: 1 0 100%;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x3);
padding: var(--Space-x4) var(--Space-x3);
color: var(--UI-Opacity-White-100);
text-align: center;
}

View File

@@ -1,5 +1,5 @@
.dl {
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
display: flex;
}

View File

@@ -1,8 +1,8 @@
.container {
display: flex;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.tertiary {
@@ -12,7 +12,7 @@
.dl {
display: grid;
grid-template-columns: auto auto;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
padding: 8px 0;
}

View File

@@ -6,7 +6,7 @@
color: var(--Text-Tertiary);
font-weight: var(--Body-Supporting-text-Font-weight-2);
font-size: var(--Body-Supporting-text-Size);
margin-right: var(--Spacing-x-half);
margin-right: var(--Space-x05);
}
.titleSubtext {
@@ -16,9 +16,8 @@
.totalContainer {
border: 1px solid var(--Border-Divider-Subtle);
border-radius: var(--Spacing-x1);
padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2)
var(--Spacing-x2);
border-radius: var(--Space-x1);
padding: var(--Space-x15) var(--Space-x2) var(--Space-x2) var(--Space-x2);
flex-direction: column;
align-items: stretch;
gap: var(--Space-x15);
@@ -28,7 +27,7 @@
.dl {
display: grid;
grid-template-columns: auto auto;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
padding: 8px 0;
}

View File

@@ -1,15 +1,15 @@
.main {
background-color: var(--Base-Surface-Primary-light-Normal);
display: flex;
padding: var(--Spacing-x5) var(--Spacing-x4);
padding: var(--Space-x5) var(--Space-x4);
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.addresses {
display: flex;
justify-content: space-between;
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.rightColumn {
@@ -17,7 +17,7 @@
}
.addressMargin {
margin-top: var(--Spacing-x-half);
margin-top: var(--Space-x05);
}
.tertiary {
@@ -32,14 +32,14 @@
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: var(--Spacing-x5) 0;
padding: var(--Space-x5) 0;
}
.logIn {
padding: var(--Spacing-x9) var(--Spacing-x2);
padding: var(--Space-x9) var(--Space-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
color: var(--Scandic-Grey-100);
}

View File

@@ -5,22 +5,22 @@
.modalText {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.rooms {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.roomContainer {
display: flex;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md);
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.roomInfo {

View File

@@ -1,11 +1,11 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.dateComparison {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

View File

@@ -1,17 +1,17 @@
.container {
background-color: var(--Background-Primary);
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.checkInDate,
.checkOutDate {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.trigger {
@@ -26,7 +26,7 @@
justify-content: space-between;
min-width: 0;
/* allow shrinkage */
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease;
}

View File

@@ -10,13 +10,13 @@
.form {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.termsAndConditions {
color: var(--Text-Secondary);
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.termsAndConditions .checkbox span {
@@ -28,9 +28,9 @@
background-color: var(--Base-Surface-Subtle-Normal);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
justify-content: flex-end;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.guaranteeCostText {

View File

@@ -1,12 +1,12 @@
.actionArea {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
@media (min-width: 768px) {
.actionArea {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: 1fr 1fr;
padding-top: var(--Spacing-x3);
padding-top: var(--Space-x3);
}
}

View File

@@ -1,6 +1,6 @@
.priceContainer {
display: flex;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md);
align-items: center;
@@ -9,14 +9,14 @@
.info {
border-right: 1px solid var(--Base-Border-Subtle);
padding-right: var(--Spacing-x2);
padding-right: var(--Space-x2);
text-align: right;
display: flex;
flex-direction: column;
}
.wrapper {
padding-left: var(--Spacing-x2);
padding-left: var(--Space-x2);
display: flex;
align-items: center;
}

View File

@@ -7,7 +7,7 @@
gap: var(--Space-x1);
margin: 0 auto;
max-width: 588px;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
width: var(--max-width-content);
}

View File

@@ -1,23 +1,23 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.title {
color: var(--Scandic-Brand-Burgundy);
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.roomsContainer {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
grid-template-columns: 1fr;
width: 100%;
}
@@ -25,14 +25,14 @@
.totalContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: 0 var(--Spacing-x2);
gap: var(--Space-x1);
padding: 0 var(--Space-x2);
}
.total {
display: flex;
justify-content: flex-end;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@media (min-width: 768px) {

View File

@@ -4,5 +4,5 @@
border-radius: var(--Corner-radius-sm);
cursor: pointer;
display: flex;
padding: var(--Spacing-x-half);
padding: var(--Space-x05);
}

View File

@@ -2,9 +2,9 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
padding: var(--Space-x15) 0;
width: calc(100% - var(--Spacing-x4));
width: calc(100% - var(--Space-x4));
justify-content: center;
margin: 0 auto;
}
@@ -12,7 +12,7 @@
.price {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: space-between;
width: 100%;
}

View File

@@ -5,8 +5,8 @@
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column-reverse;
gap: var(--Spacing-x2);
margin: 0 var(--Spacing-x2);
gap: var(--Space-x2);
margin: 0 var(--Space-x2);
}
@media (min-width: 768px) {

View File

@@ -1,6 +1,6 @@
.details {
max-width: 100%;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
@media (min-width: 768px) {

View File

@@ -1,7 +1,7 @@
.header {
display: flex;
gap: var(--Space-x15);
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.container {
@@ -13,12 +13,12 @@
background-color: var(--Scandic-Peach-30);
color: var(--Scandic-Red-100);
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
}
.reference {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.sidePeek {

View File

@@ -1,7 +1,7 @@
.packages {
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
left: 15px;
position: absolute;
top: 180px;
@@ -11,7 +11,7 @@
.package {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
}
@media (min-width: 768px) {

View File

@@ -1,26 +1,26 @@
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.room {
background-color: var(--Background-Primary);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) 0;
gap: var(--Space-x2);
padding: var(--Space-x3) 0;
}
.roomName {
color: var(--Scandic-Brand-Burgundy);
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.booking {
@@ -31,7 +31,7 @@
.content {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
position: relative;
width: 100%;
margin: 0 auto;
@@ -45,12 +45,12 @@
.roomDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.guestDetailsMobileWrapper {
display: block;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.guestDetailsDesktopWrapper {
@@ -73,7 +73,7 @@
}
.content {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
grid-template-columns: 3fr 2fr;
width: var(--max-width-content);
}

View File

@@ -30,7 +30,7 @@
.headerContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.content {
@@ -41,28 +41,28 @@
margin: 0 auto;
position: relative;
z-index: 2;
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.form {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: var(--Spacing-x5) 0;
padding: var(--Space-x5) 0;
}
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: 0 var(--Spacing-x2);
gap: var(--Space-x2);
padding: 0 var(--Space-x2);
}
.logIn {
padding: var(--Spacing-x9) var(--Spacing-x2);
padding: var(--Space-x9) var(--Space-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
color: var(--Scandic-Grey-100);
}

View File

@@ -6,34 +6,34 @@
margin: 0 auto;
position: relative;
z-index: 2;
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}
.headerSkeleton {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
padding: var(--Spacing-x6) var(--Spacing-x2) 0;
padding: var(--Space-x6) var(--Space-x2) 0;
}
.cardSkeleton {
max-width: 100%;
margin: -30px auto 0;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: 0 var(--Spacing-x2);
gap: var(--Space-x2);
padding: 0 var(--Space-x2);
}
.ancillariesSkeleton {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
@media (min-width: 768px) {