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

2
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -14,7 +14,7 @@
.content {
display: grid;
padding-bottom: var(--Spacing-x9);
padding-bottom: var(--Space-x9);
position: relative;
max-width: var(--max-width-content);
margin: 0 auto;

6
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css
View File

@@ -2,11 +2,11 @@
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-lg);
display: grid;
gap: var(--Spacing-x3);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
gap: var(--Space-x3);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
}
@media screen and (min-width: 768px) {
.container {
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
}
}

2
apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css
View File

@@ -1,6 +1,6 @@
.main {
width: var(--max-width-content);
padding: var(--Spacing-x5) var(--Spacing-x1);
padding: var(--Space-x5) var(--Space-x1);
margin-left: auto;
margin-right: auto;
}

2
apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css
View File

@@ -59,7 +59,7 @@
margin-left: auto;
margin-right: auto;
background: var(--Background-Primary);
padding: var(--Spacing-x5);
padding: var(--Space-x5);
border-radius: var(--Corner-radius-lg);
display: grid;
gap: var(--Space-x3);

8
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css
View File

@@ -2,10 +2,10 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
background-color: white;
width: 100%;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
text-align: center;
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
margin-top: auto;
@@ -25,7 +25,7 @@
& > span {
position: relative;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
background-color: white;
color: var(--UI-Text-Placeholder);
}
@@ -42,5 +42,5 @@
}
.contactBlockTitle {
margin-bottom: var(--Spacing-x1);
margin-bottom: var(--Space-x1);
}

6
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css
View File

@@ -13,7 +13,7 @@
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
align-items: center;
padding: 0 var(--Spacing-x2);
padding: 0 var(--Space-x2);
}
.content {
@@ -32,8 +32,8 @@
align-items: center;
color: var(--Scandic-Brand-Burgundy);
display: flex;
font-size: var(--Spacing-x2);
gap: var(--Spacing-x1);
font-size: var(--Space-x2);
gap: var(--Space-x1);
.long {
display: none;

20
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css
View File

@@ -2,23 +2,23 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
margin-top: var(--Spacing-x3);
gap: var(--Space-x2);
margin-top: var(--Space-x3);
}
.dateOfBirth {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
width: 100%;
background-color: var(--Main-Brand-WarmWhite);
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
}
.dateOfBirthLink {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.dateOfBirthDescription {
@@ -28,18 +28,18 @@
.termsAndConditions {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.termsDescription {
margin-left: calc(var(--Spacing-x4) + var(--Spacing-x-half));
margin-left: calc(var(--Space-x4) + var(--Space-x05));
}
.ctaContainer {
display: flex;
justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x3) 0;
width: calc(100% + var(--Spacing-x3) + var(--Spacing-x3));
padding: var(--Space-x3) var(--Space-x3) 0;
width: calc(100% + var(--Space-x3) + var(--Space-x3));
border-top: 1px solid var(--Base-Border-Subtle);
}
@@ -51,6 +51,6 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
text-align: left;
}

12
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css
View File

@@ -2,10 +2,10 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
background-color: white;
width: 100%;
padding: var(--Spacing-x3);
padding: var(--Space-x3);
text-align: center;
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
margin-top: auto;
@@ -22,10 +22,10 @@
.otp-container {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
@media screen and (min-width: 768px) {
& {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
}
&.error .slot {
@@ -41,7 +41,7 @@
box-sizing: content-box;
width: 34px;
height: 0px;
padding: var(--Spacing-x3) 0;
padding: var(--Space-x3) 0;
font-family: var(--typography-Body-Regular-fontFamily);
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-md);
@@ -78,7 +78,7 @@
.error-message {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@keyframes blink {

20
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css
View File

@@ -6,17 +6,17 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
align-items: center;
width: 100%;
}
.transactionBox {
box-shadow: 0px 0px 14px 6px #0000001a;
padding: var(--Spacing-x4) var(--Spacing-x3);
padding: var(--Space-x4) var(--Space-x3);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
border-radius: var(--Corner-radius-md);
align-items: center;
width: 100%;
@@ -25,7 +25,7 @@
.transactionDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
width: 100%;
}
@@ -38,21 +38,21 @@
.bonusNight {
border-top: 1px solid var(--Border-Divider-Default);
padding-top: var(--Spacing-x3);
padding-top: var(--Space-x3);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
align-items: center;
}
.bonusNightDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.divider {
--divider-spacing: var(--Spacing-x3);
--divider-spacing: var(--Space-x3);
background: var(--Border-Divider-Subtle);
width: calc(100% + var(--divider-spacing) + var(--divider-spacing));
@@ -62,11 +62,11 @@
@media screen and (min-width: 768px) {
.container {
padding-inline: var(--Spacing-x3);
padding-inline: var(--Space-x3);
}
.divider {
--divider-spacing: var(--Spacing-x6);
--divider-spacing: var(--Space-x6);
}
.bookButton {

6
apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css
View File

@@ -1,6 +1,6 @@
.hotelListingSection {
--scroll-margin-top: calc(
var(--booking-widget-mobile-height) + var(--Spacing-x2)
var(--booking-widget-mobile-height) + var(--Space-x2)
);
display: grid;
@@ -35,7 +35,7 @@
@media screen and (min-width: 768px) {
.hotelListingSection {
--scroll-margin-top: calc(
var(--booking-widget-tablet-height) + var(--Spacing-x2)
var(--booking-widget-tablet-height) + var(--Space-x2)
);
&.isMainBlock {
@@ -63,7 +63,7 @@
@media screen and (min-width: 1367px) {
.hotelListingSection {
--scroll-margin-top: calc(
var(--booking-widget-desktop-height) + var(--Spacing-x2)
var(--booking-widget-desktop-height) + var(--Space-x2)
);
}
}

2
apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css
View File

@@ -1,7 +1,7 @@
.cardsList {
list-style: none;
display: none;
gap: var(--Spacing-x4) var(--Spacing-x1);
gap: var(--Space-x4) var(--Space-x1);
}
.carousel .navigationButton {

2
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css
View File

@@ -1,4 +1,4 @@
.filterForm {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}

4
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css
View File

@@ -1,10 +1,10 @@
.jobList {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.list {
list-style: none;
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

6
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css
View File

@@ -1,7 +1,7 @@
.jobylonCard {
display: grid;
width: 100%;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md);
@@ -9,13 +9,13 @@
.contentWrapper {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@media screen and (min-width: 768px) {
.contentWrapper {
grid-template-columns: 1fr auto;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: end;
}
}

6
apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -1,6 +1,6 @@
.cardContainer {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.link {
@@ -11,10 +11,10 @@
background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-xl);
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
min-height: 280px;
justify-items: center;
padding: var(--Spacing-x5) var(--Spacing-x1);
padding: var(--Space-x5) var(--Space-x1);
grid-template-rows: auto auto 1fr;
}

6
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css
View File

@@ -15,7 +15,7 @@
}
.iconTh {
padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x2);
padding: var(--Space-x5) var(--Space-x2) var(--Space-x2);
font-weight: var(--typography-Caption-Regular-fontWeight);
vertical-align: bottom;
}
@@ -23,11 +23,11 @@
.summaryTh {
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
padding: 0 var(--Spacing-x2) var(--Spacing-x2);
padding: 0 var(--Space-x2) var(--Space-x2);
vertical-align: top;
}
.select {
font-weight: var(--typography-Caption-Regular-fontWeight);
padding: 0 var(--Spacing-x2) var(--Spacing-x2);
padding: 0 var(--Space-x2) var(--Space-x2);
}

8
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
View File

@@ -20,7 +20,7 @@
}
.rewardTh {
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
}
@@ -31,16 +31,16 @@
.rewardHeader {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
grid-template-columns: 1fr auto;
text-align: start;
}
.rewardDescription {
margin: 0;
padding-top: var(--Spacing-x1);
padding-top: var(--Space-x1);
text-align: start;
padding-right: calc(var(--Spacing-x3) + var(--Spacing-x1));
padding-right: calc(var(--Space-x3) + var(--Space-x1));
}
.chevron {

8
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
View File

@@ -2,15 +2,15 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
padding-bottom: var(--Spacing-x1);
gap: var(--Space-x3);
padding-bottom: var(--Space-x1);
}
.levelRequirements {
border-radius: var(--Corner-radius-md);
background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
text-align: center;
width: 100%;
}
@@ -23,7 +23,7 @@
@media screen and (min-width: 950px) {
.levelRequirements {
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
}
}
@media screen and (min-width: 1367px) {

2
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
View File

@@ -11,7 +11,7 @@
.rewardCardDescription {
font-size: var(--typography-Caption-Regular-fontSize);
line-height: 150%;
padding-right: var(--Spacing-x4);
padding-right: var(--Space-x4);
}
.rewardInfo {

2
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css
View File

@@ -5,7 +5,7 @@
grid-template-columns: 1fr 1fr;
grid-column: 1/3;
padding-top: 0;
margin: var(--Spacing-x1) var(--Spacing-x2);
margin: var(--Space-x1) var(--Space-x2);
}
.rewardCardWrapper:last-child {

4
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css
View File

@@ -2,8 +2,8 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x-half);
padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4);
gap: var(--Space-x05);
padding: 0 var(--Space-x4) 0 var(--Space-x4);
text-wrap: balance;
}

4
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css
View File

@@ -1,10 +1,10 @@
.script {
transform: rotate(-4deg);
padding-bottom: var(--Spacing-x-half);
padding-bottom: var(--Space-x05);
}
@media screen and (min-width: 950px) {
.script {
padding-bottom: var(--Spacing-x1);
padding-bottom: var(--Space-x1);
}
}

24
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -1,6 +1,6 @@
.intro {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.largeTableContainer {
@@ -18,23 +18,23 @@
background-color: var(--UI-Opacity-White-100);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9))
calc(0px - var(--Spacing-x2));
padding-bottom: var(--Spacing-x9);
margin: 0 calc(0px - var(--Space-x2)) calc(0px - var(--Space-x9))
calc(0px - var(--Space-x2));
padding-bottom: var(--Space-x9);
position: relative;
}
.columnHeaderContainer {
display: contents;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.columnHeader {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x4) var(--Spacing-x2);
gap: var(--Space-x2);
padding: var(--Space-x4) var(--Space-x2);
justify-content: flex-end;
}
@@ -43,21 +43,21 @@
}
.columnHeader:nth-child(1) {
padding-right: var(--Spacing-x1);
padding-right: var(--Space-x1);
}
.columnHeader:nth-child(2) {
padding-left: var(--Spacing-x1);
padding-left: var(--Space-x1);
border-top-left-radius: var(--Corner-radius-md);
}
.columnHeader:nth-child(2):has(+ .columnHeader) {
padding-left: var(--Spacing-x1);
padding-right: var(--Spacing-x1);
padding-left: var(--Space-x1);
padding-right: var(--Space-x1);
}
.columnHeader:nth-child(3) {
padding-left: var(--Spacing-x1);
padding-left: var(--Space-x1);
}
@media screen and (min-width: 768px) {

4
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css
View File

@@ -9,7 +9,7 @@
.addition::before {
color: var(--Secondary-Light-On-Surface-Accent);
content: "+";
margin-right: var(--Spacing-x-half);
margin-right: var(--Space-x05);
}
.negation {
@@ -19,5 +19,5 @@
.negation::before {
color: var(--Base-Text-Accent);
content: "-";
margin-right: var(--Spacing-x-half);
margin-right: var(--Space-x05);
}

4
apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css
View File

@@ -16,10 +16,10 @@
.th {
text-align: left;
padding: var(--Spacing-x2) var(--Spacing-x4);
padding: var(--Space-x2) var(--Space-x4);
}
.td {
text-align: left;
padding: var(--Spacing-x2) var(--Spacing-x4);
padding: var(--Space-x2) var(--Space-x4);
}

2
apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css
View File

@@ -1,5 +1,5 @@
.divider {
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
}
.membershipCardsContainer {

8
apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
View File

@@ -1,7 +1,7 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
position: relative;
scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2);
}
@@ -18,10 +18,10 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
justify-content: center;
padding: var(--Spacing-x3);
padding: var(--Space-x3);
}
.title {
@@ -30,5 +30,5 @@
}
.btnContainer {
padding: 0 var(--Spacing-x3) var(--Spacing-x3);
padding: 0 var(--Space-x3) var(--Space-x3);
}

6
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css
View File

@@ -4,12 +4,12 @@
border-radius: var(--Corner-radius-sm);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x7);
}
.textContainer {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}

22
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -2,7 +2,7 @@
border-radius: var(--Small, 4px);
border: 1px solid var(--Base-Border-Subtle);
display: flex;
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
flex-direction: column;
justify-content: center;
align-items: center;
@@ -12,7 +12,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
align-self: stretch;
}
@@ -60,7 +60,7 @@
.dialog {
display: flex;
flex-direction: column;
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
overflow: hidden;
height: 100%;
}
@@ -73,7 +73,7 @@
height: var(--button-height);
position: relative;
justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x2) 0;
padding: var(--Space-x3) var(--Space-x2) 0;
flex-shrink: 0;
}
@@ -81,8 +81,8 @@
display: grid;
grid-template-columns: 1fr;
place-items: center;
gap: var(--Spacing-x2);
padding: 0 var(--Spacing-x3) var(--Spacing-x3);
gap: var(--Space-x2);
padding: 0 var(--Space-x3) var(--Space-x3);
overflow-y: auto;
flex-grow: 1;
}
@@ -90,7 +90,7 @@
.modalFooter {
display: flex;
flex-direction: column;
padding: 0 var(--Spacing-x3) var(--Spacing-x1);
padding: 0 var(--Space-x3) var(--Space-x1);
gap: var(--Space-x15);
flex-shrink: 0;
}
@@ -104,7 +104,7 @@
border: none;
cursor: pointer;
position: absolute;
right: var(--Spacing-x2);
right: var(--Space-x2);
width: 32px;
height: var(--button-height);
display: flex;
@@ -114,16 +114,16 @@
.active {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
color: var(--UI-Semantic-Success);
}
.rewardBadge {
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
background: var(--Base-Surface-Secondary-light-Normal);
display: grid;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.redeemButton {

28
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css
View File

@@ -1,11 +1,11 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.divider {
margin-top: var(--Spacing-x2);
margin-top: var(--Space-x2);
@media screen and (min-width: 768px) {
display: none;
@@ -16,7 +16,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: flex-end;
@media screen and (min-width: 768px) {
@@ -28,8 +28,8 @@
.matchedAccountSection {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x4) var(--Space-x15);
gap: var(--Space-x3);
padding: var(--Space-x4) var(--Space-x15);
width: 100%;
background-color: var(--Surface-Primary-On-Surface-Default);
border: 1px solid var(--Border-Default);
@@ -39,7 +39,7 @@
0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
@media screen and (min-width: 768px) {
padding: var(--Spacing-x4) var(--Spacing-x3);
padding: var(--Space-x4) var(--Space-x3);
}
}
@@ -47,10 +47,10 @@
display: flex;
width: 100%;
justify-content: space-between;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
@media screen and (min-width: 768px) {
gap: var(--Spacing-x7);
gap: var(--Space-x7);
}
}
@@ -63,12 +63,12 @@
.tierMatchStatus {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
width: 100%;
justify-content: space-between;
border: 1px solid var(--Border-Divider-Accent);
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x2);
padding: var(--Space-x2);
background:
linear-gradient(
0deg,
@@ -83,7 +83,7 @@
@media screen and (min-width: 768px) {
flex-direction: row;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
}
@@ -94,13 +94,13 @@
.stack {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.caption {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
color: var(--Text-Tertiary);
align-self: flex-start;
}
@@ -116,7 +116,7 @@
.tierMatchText {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.label {

44
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css
View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.card {
@@ -10,12 +10,12 @@
width: 100%;
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) var(--Spacing-x9);
gap: var(--Space-x3);
padding: var(--Space-x3) var(--Space-x9);
background-color: var(--Background-Secondary);
border-radius: var(--Corner-radius-lg);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
margin-top: var(--Spacing-x9);
margin-top: var(--Space-x9);
}
.highFive {
@@ -37,9 +37,9 @@
.labelWithIcon {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
color: var(--Text-Tertiary);
margin-bottom: var(--Spacing-x-half);
margin-bottom: var(--Space-x05);
}
.transferContainer {
@@ -69,15 +69,15 @@
.balanceLabel {
color: var(--Text-Tertiary);
margin-top: var(--Spacing-x3);
margin-top: var(--Space-x3);
}
.formWrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
width: 100%;
padding: var(--Spacing-x4);
padding: var(--Space-x4);
padding-bottom: 0;
}
@@ -122,7 +122,7 @@
transform: translateX(-50%) translateY(4px);
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
color: var(--Text-Brand-OnPrimary-2-Accent);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
opacity: 0;
transition:
@@ -204,8 +204,8 @@
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--Spacing-x3);
padding-inline: var(--Spacing-x3);
gap: var(--Space-x3);
padding-inline: var(--Space-x3);
}
.expiryText {
@@ -214,15 +214,15 @@
.divider {
background-color: var(--Border-Divider-Subtle);
width: calc(100% + var(--Spacing-x6) + var(--Spacing-x6));
width: calc(100% + var(--Space-x6) + var(--Space-x6));
height: 1px;
margin-inline: calc(var(--Spacing-x6) * -1);
margin-inline: calc(var(--Space-x6) * -1);
}
.buttonContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.pointsOutput {
@@ -230,16 +230,16 @@
background-color: var(--Surface-Primary-Disabled);
height: 100%;
color: var(--Text-Tertiary);
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
@media screen and (max-width: 767px) {
.card {
padding: var(--Spacing-x3);
padding-top: var(--Spacing-x6);
padding: var(--Space-x3);
padding-top: var(--Space-x6);
}
.highFive {
@@ -249,7 +249,7 @@
.transferContainer {
grid-template-columns: 1fr;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.transferFrom {
flex-direction: row;
@@ -278,7 +278,7 @@
.inputsWrapper {
grid-template-columns: 1fr 1fr;
column-gap: var(--Spacing-x1);
column-gap: var(--Space-x1);
}
.conversionRate {
@@ -292,6 +292,6 @@
}
.modalContainer {
padding-inline: var(--Spacing-x2);
padding-inline: var(--Space-x2);
}
}

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css
View File

@@ -1,4 +1,4 @@
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

8
apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
View File

@@ -33,8 +33,8 @@
justify-content: center;
max-width: 800px;
margin: 0 auto;
gap: var(--Spacing-x1);
padding: var(--Spacing-x4) var(--Spacing-x3);
gap: var(--Space-x1);
padding: var(--Space-x4) var(--Space-x3);
z-index: 2;
}
@@ -42,12 +42,12 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.buttons {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.buttonWrapper {

2
apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css
View File

@@ -19,6 +19,6 @@
.section:has(.column:nth-child(2)) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
}

6
apps/scandic-web/components/Blocks/TextCols/textcols.module.css
View File

@@ -1,13 +1,13 @@
.columns {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.column {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-content: start;
padding-bottom: var(--Spacing-x2);
padding-bottom: var(--Space-x2);
border-bottom: 1px solid var(--Base-Border-Subtle);
}

4
apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css
View File

@@ -1,11 +1,11 @@
.grid {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.usp {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
align-content: start;
}

10
apps/scandic-web/components/Carousel/carousel.module.css
View File

@@ -10,7 +10,7 @@
display: grid;
grid-auto-flow: column;
grid-auto-columns: 85%;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.item {
@@ -40,8 +40,8 @@
.dots {
display: flex;
justify-content: center;
gap: var(--Spacing-x1);
margin-top: var(--Spacing-x3);
gap: var(--Space-x1);
margin-top: var(--Space-x3);
}
.dot {
@@ -65,12 +65,12 @@
@media screen and (min-width: 768px) {
.container {
grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
grid-auto-columns: calc(50% - var(--Space-x2) / 2);
}
}
@media screen and (min-width: 1024px) {
.container {
grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
grid-auto-columns: calc(33.33% - var(--Space-x2) * 2 / 3);
}
}

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css
View File

@@ -7,7 +7,7 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.cityList {

18
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -7,8 +7,8 @@
.content {
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x3);
gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x3);
align-content: start;
justify-items: start;
}
@@ -20,13 +20,13 @@
.tripAdvisor {
position: absolute;
top: var(--Spacing-x2);
left: var(--Spacing-x2);
top: var(--Space-x2);
left: var(--Space-x2);
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x-quarter) var(--Spacing-x1);
padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
color: var(--Text-Interactive-Default);
}
@@ -37,12 +37,12 @@
.intro {
display: grid;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.captions {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
color: var(--Text-Tertiary);
}
@@ -63,7 +63,7 @@
.amenityItem {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
align-items: center;
}

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css
View File

@@ -22,7 +22,7 @@
@media screen and (min-width: 768px) {
.container {
--scroll-margin-top: calc(
var(--booking-widget-desktop-height) + var(--Spacing-x2)
var(--booking-widget-desktop-height) + var(--Space-x2)
);
}
}

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css
View File

@@ -1,12 +1,12 @@
.container {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.citiesList {
column-count: 2;
list-style-type: none;
margin-bottom: var(--Spacing-x-half);
margin-bottom: var(--Space-x05);
}
.citiesList li {
margin-bottom: var(--Space-x15);

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css
View File

@@ -12,7 +12,7 @@
@media screen and (min-width: 768px) {
.listContainer {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
background-color: transparent;
flex-direction: row;
}

2
apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css
View File

@@ -1,4 +1,4 @@
.ctaContainer {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

12
apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css
View File

@@ -20,8 +20,8 @@
.seeAllButton {
position: absolute;
bottom: var(--Spacing-x2);
right: var(--Spacing-x4);
bottom: var(--Space-x2);
right: var(--Space-x4);
}
@media screen and (max-width: 767px) {
@@ -35,7 +35,7 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.imageWrapper > .image:first-child {
@@ -58,8 +58,8 @@
.imageWrapper > .image:nth-child(3) {
grid-column: span 1;
grid-row: span 1;
height: calc(150px - var(--Spacing-x-half));
max-height: calc(20dvh - var(--Spacing-x-half));
height: calc(150px - var(--Space-x05));
max-height: calc(20dvh - var(--Space-x05));
}
}
@@ -71,6 +71,6 @@
.imageWrapper > .image:nth-child(2):nth-last-child(2),
.imageWrapper > .image:nth-child(3) {
height: calc(200px - var(--Spacing-x-half));
height: calc(200px - var(--Space-x05));
}
}

12
apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
View File

@@ -2,8 +2,8 @@
display: grid;
grid-template-areas: "main";
grid-template-columns: 1fr;
gap: var(--Spacing-x5);
padding-bottom: var(--Spacing-x9);
gap: var(--Space-x5);
padding-bottom: var(--Space-x9);
max-width: var(--max-width-page);
margin: 0 auto;
width: 100%;
@@ -18,12 +18,12 @@
.blocks {
grid-area: main;
display: grid;
gap: var(--Spacing-x7);
gap: var(--Space-x7);
}
.header {
display: grid;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.title {
@@ -41,10 +41,10 @@
}
.blocks {
gap: var(--Spacing-x9);
gap: var(--Space-x9);
}
.blocks > section:first-of-type > header {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
}

4
apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: var(--Spacing-x-quarter);
gap: var(--Space-x025);
}
.image {
@@ -17,7 +17,7 @@
@media (min-width: 768px) {
.container:has(.imageContainer) {
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
}

16
apps/scandic-web/components/ContentType/StartPage/startPage.module.css
View File

@@ -22,13 +22,13 @@
align-items: center;
justify-content: center;
flex-direction: column;
grid-gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
grid-gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
}
@media screen and (min-width: 768px) {
.headerContent {
grid-gap: var(--Spacing-x4);
grid-gap: var(--Space-x4);
}
}
@@ -38,8 +38,8 @@
.main {
display: grid;
gap: var(--Spacing-x6);
padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
gap: var(--Space-x6);
padding: calc(var(--Space-x5) * 2) 0 calc(var(--Space-x5) * 4);
}
.section:empty {
@@ -55,10 +55,10 @@
@media screen and (min-width: 768px) {
.main {
gap: calc(var(--Spacing-x5) + var(--Spacing-x4));
gap: calc(var(--Space-x5) + var(--Space-x4));
}
.section {
padding-left: var(--Spacing-x5);
padding-right: var(--Spacing-x5);
padding-left: var(--Space-x5);
padding-right: var(--Space-x5);
}
}

26
apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css
View File

@@ -1,15 +1,15 @@
.page {
padding-bottom: var(--Spacing-x9);
padding-bottom: var(--Space-x9);
}
.header {
background-color: var(--Base-Surface-Subtle-Normal);
padding-bottom: var(--Spacing-x4);
padding-bottom: var(--Space-x4);
}
.headerContent {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
max-width: var(--max-width-content);
margin: 0 auto;
}
@@ -17,7 +17,7 @@
.headerIntro {
display: grid;
max-width: var(--max-width-text-block);
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.heading {
@@ -28,7 +28,7 @@
.heroContainer {
width: 100%;
padding: var(--Spacing-x4) var(--Spacing-x2);
padding: var(--Space-x4) var(--Space-x2);
}
.heroContainer img {
@@ -39,7 +39,7 @@
.contentContainer {
width: 100%;
padding: var(--Spacing-x4) var(--Spacing-x2) 0;
padding: var(--Space-x4) var(--Space-x2) 0;
}
.content .contentContainer {
@@ -47,14 +47,14 @@
grid-template-areas:
"main"
"sidebar";
gap: var(--Spacing-x4);
gap: var(--Space-x4);
align-items: start;
}
.mainContent {
display: grid;
width: 100%;
gap: var(--Spacing-x6);
gap: var(--Space-x6);
margin: 0 auto;
max-width: var(--max-width-content);
}
@@ -74,17 +74,17 @@
@media (min-width: 768px) {
.contentContainer {
padding: var(--Spacing-x4) 0;
padding: var(--Space-x4) 0;
max-width: var(--max-width-content);
margin: 0 auto;
}
.heroContainer {
padding: var(--Spacing-x4) 0;
padding: var(--Space-x4) 0;
}
.headerIntro {
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
}
@@ -100,11 +100,11 @@
.content .contentContainer {
grid-template-areas: "main sidebar";
grid-template-columns: var(--max-width-text-block) 1fr;
gap: var(--Spacing-x9);
gap: var(--Space-x9);
}
.mainContent {
gap: var(--Spacing-x9);
gap: var(--Space-x9);
padding: 0;
max-width: none;
margin: 0;

6
apps/scandic-web/components/DatePicker/Single/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;
}
@@ -103,11 +103,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
apps/scandic-web/components/DatePicker/Single/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;
@@ -58,7 +58,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 {
@@ -78,7 +78,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;
left: 0;
@@ -132,7 +132,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;
}

2
apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css
View File

@@ -2,7 +2,7 @@
display: flex;
align-items: center;
gap: var(--Space-x15);
padding: var(--Spacing-x1) var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15);
cursor: pointer;
border-radius: var(--Corner-radius-md);
transition: background-color 0.3s;

8
apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css
View File

@@ -1,11 +1,11 @@
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.form {
display: grid;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.fieldset {
@@ -22,8 +22,8 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
gap: var(--Spacing-x1) var(--Spacing-x2);
margin: var(--Spacing-x3) 0;
gap: var(--Space-x1) var(--Space-x2);
margin: var(--Space-x3) 0;
}
@media screen and (max-width: 767px) {

20
apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css
View File

@@ -21,21 +21,21 @@
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.content {
display: grid;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
align-content: start;
padding: var(--Spacing-x4) var(--Spacing-x3);
padding: var(--Space-x4) var(--Space-x3);
overflow-y: auto;
height: min(calc(80dvh - 180px), 500px);
}
.alertWrapper:not(:empty) {
padding: var(--Spacing-x2) var(--Spacing-x4) 0;
padding: var(--Space-x2) var(--Space-x4) 0;
border-top: 1px solid var(--Base-Border-Subtle);
}
@@ -46,7 +46,7 @@
.footer {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x2) var(--Spacing-x4);
padding: var(--Space-x2) var(--Space-x4);
border-top: 1px solid var(--Base-Border-Subtle);
}
@@ -74,7 +74,7 @@
display: flex;
justify-content: flex-end;
border-bottom: none;
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
}
.title,
@@ -84,18 +84,18 @@
.content {
height: 100%;
padding: 0 var(--Spacing-x2) var(--Spacing-x3);
padding: 0 var(--Space-x2) var(--Space-x3);
overflow-y: scroll;
}
.alertWrapper:not(:empty) {
padding: var(--Spacing-x3) var(--Spacing-x2) 0;
padding: var(--Space-x3) var(--Space-x2) 0;
}
.footer {
flex-direction: column-reverse;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) var(--Spacing-x2);
gap: var(--Space-x3);
padding: var(--Space-x3) var(--Space-x2);
margin-top: auto;
}
}

10
apps/scandic-web/components/Dialog/dialog.module.css
View File

@@ -39,28 +39,28 @@
box-shadow: var(--modal-box-shadow);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
max-width: 560px;
padding: var(--Spacing-x5) var(--Spacing-x4);
padding: var(--Space-x5) var(--Space-x4);
}
.header {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.footer {
display: flex;
flex-direction: column-reverse;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@media screen and (min-width: 768px) {
.footer {
align-items: center;
flex-direction: row;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
& > button {
flex: 1;

2
apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css
View File

@@ -3,5 +3,5 @@
flex-direction: column;
align-items: flex-start;
gap: var(--Space-x15);
padding-bottom: var(--Spacing-x3);
padding-bottom: var(--Space-x3);
}

4
apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css
View File

@@ -2,14 +2,14 @@
.user {
align-self: flex-start;
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
container-name: addressContainer;
container-type: inline-size;
}
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
grid-template-columns: minmax(100px, 164px) 1fr;
}

8
apps/scandic-web/components/Forms/Edit/Profile/form.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
grid-template-areas:
"title"
"form"
@@ -13,14 +13,14 @@
.form {
display: grid;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
grid-area: form;
}
.btnContainer {
display: flex;
flex-direction: column-reverse;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
grid-area: buttons;
}
@@ -38,7 +38,7 @@
.btnContainer {
align-self: center;
flex-direction: row;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
justify-self: flex-end;
}
}

4
apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css
View File

@@ -1,12 +1,12 @@
.menuButton {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
align-items: center;
width: 100%;
background-color: transparent;
color: var(--Base-Text-High-contrast);
border-width: 0;
padding: var(--Spacing-x-half) 0;
padding: var(--Space-x05) 0;
cursor: pointer;
font-family: var(--typography-Body-Bold-fontFamily);
font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */

4
apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
View File

@@ -91,9 +91,9 @@
.footer {
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x4) var(--Spacing-x2);
padding: var(--Space-x4) var(--Space-x2);
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
@media screen and (min-width: 768px) {

10
apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
View File

@@ -1,9 +1,9 @@
.myPagesMenuContent {
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
}
.intro {
padding: 0 var(--Spacing-x1);
padding: 0 var(--Space-x1);
}
.myPagesMenuContent .friendTypeWrapper {
@@ -11,7 +11,7 @@
}
.divider {
margin: var(--Spacing-x2) 0;
margin: var(--Space-x2) 0;
}
.friendType {
@@ -24,7 +24,7 @@
.friendType::after {
content: " · ";
display: inline;
padding: 0 var(--Spacing-x-half);
padding: 0 var(--Space-x05);
}
.groups,
@@ -42,7 +42,7 @@
@media screen and (min-width: 768px) {
.myPagesMenuContent {
padding: var(--Spacing-x2) var(--Spacing-x4);
padding: var(--Space-x2) var(--Space-x4);
}
.intro.noMembership,
.userName {

30
apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
View File

@@ -8,9 +8,9 @@
.seeAllLink {
display: flex;
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
background-color: var(--Base-Surface-Secondary-light-Normal);
}
@@ -20,7 +20,7 @@
}
.submenuTitle {
padding-left: var(--Spacing-x1);
padding-left: var(--Space-x1);
color: var(--Text-Tertiary);
text-transform: uppercase;
}
@@ -35,7 +35,7 @@
.submenusItem {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
align-content: start;
}
@@ -52,7 +52,7 @@
}
.backWrapper {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.text {
@@ -66,7 +66,7 @@
cursor: pointer;
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
width: 100%;
}
@@ -79,7 +79,7 @@
.megaMenuContent {
flex-grow: 1;
grid-template-rows: max-content 1fr;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: start;
}
.megaMenuContent:has(.cardWrapper) {
@@ -87,20 +87,20 @@
}
.submenus {
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.submenusItem:first-child {
padding-bottom: var(--Spacing-x2);
padding-bottom: var(--Space-x2);
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
.submenusItem:last-child {
padding-top: var(--Spacing-x3);
padding-top: var(--Space-x3);
}
.cardWrapper {
background-color: var(--Base-Surface-Secondary-light-Normal);
padding: var(--Spacing-x4) var(--Spacing-x2);
padding: var(--Space-x4) var(--Space-x2);
}
}
@@ -111,7 +111,7 @@
"seeAllLink"
"submenus";
width: 600px;
max-width: calc(100vw - var(--Spacing-x4));
max-width: calc(100vw - var(--Space-x4));
}
.megaMenuContent:has(.cardWrapper) {
@@ -129,15 +129,15 @@
.submenus {
grid-area: submenus;
grid-template-columns: repeat(2, 1fr);
padding: var(--Spacing-x2) var(--Spacing-x3);
padding: var(--Space-x2) var(--Space-x3);
}
.submenusItem:first-child {
padding-right: var(--Spacing-x5);
padding-right: var(--Space-x5);
border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
.submenusItem:last-child {
padding-left: var(--Spacing-x5);
padding-left: var(--Space-x5);
}
.cardWrapper {

2
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
View File

@@ -5,7 +5,7 @@
.navigationMenuItem.mobile {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x2) 0;
padding: var(--Space-x2) 0;
font-size: var(--typography-Subtitle-1-Mobile-fontSize);
}

4
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
View File

@@ -3,7 +3,7 @@
margin: 0;
justify-content: space-between;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
display: none;
}
@@ -12,7 +12,7 @@
width: 100%;
gap: 0;
justify-content: stretch;
padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2);
padding: var(--Space-x15) var(--Space-x2) var(--Space-x2);
}
.navigationMenu.mobile .item {

10
apps/scandic-web/components/Header/MainMenu/mainMenu.module.css
View File

@@ -1,6 +1,6 @@
.mainMenu {
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x2) 0;
padding: var(--Space-x2) 0;
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
@@ -11,7 +11,7 @@
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
max-width: var(--max-width-page);
margin: 0 auto;
}
@@ -20,17 +20,17 @@
display: flex;
justify-self: end;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
@media screen and (min-width: 768px) {
.mainMenu {
padding: var(--Spacing-x2) 0;
padding: var(--Space-x2) 0;
}
.nav {
display: flex;
justify-content: space-between;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.menus {
display: contents;

6
apps/scandic-web/components/Header/TopMenu/topMenu.module.css
View File

@@ -1,7 +1,7 @@
.topMenu {
display: none;
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x2) 0;
padding: var(--Space-x2) 0;
}
.content {
@@ -11,7 +11,7 @@
.options {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
align-items: center;
}
@@ -23,7 +23,7 @@
display: grid;
grid-template-areas: "topLink options";
justify-content: space-between;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.topLink {

2
apps/scandic-web/components/Hero/hero.module.css
View File

@@ -1,6 +1,6 @@
.hero {
height: 400px;
margin-bottom: var(--Spacing-x2);
margin-bottom: var(--Space-x2);
width: 100%;
object-fit: cover;
border-radius: var(--Corner-radius-xl);

14
apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
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);
}

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css
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;
}

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css
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);

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css
View File

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

8
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css
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 {

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css
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;
}

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css
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 {

30
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
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);
}

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css
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);
}
}

8
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
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 {

4
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
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 {

22
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css
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;

4
apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css
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 {

2
apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css
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%;

2
apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css
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%;
}

8
apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css
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;

4
apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css
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;
}

2
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css
View File

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

6
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css
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;
}

9
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css
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;
}

14
apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css
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);
}

8
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css
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 {

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css
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);
}

8
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css
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;
}

8
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css
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 {

6
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css
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);
}
}

6
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css
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;
}

2
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css
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);
}

14
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css
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) {

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css
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);
}

6
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
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%;
}

4
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
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) {

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css
View File

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

6
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
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 {

Some files were not shown because too many files have changed in this diff Show More