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

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