scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align styles with wireframes

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-10 13:57:43 +02:00
parent 15e02f4a46
commit 9cec1e26d7
2 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -32,6 +32,10 @@
gap: 1.8rem; gap: 1.8rem;
} }
.tierHeading {
color: #b05b65;
}
.qualifications { .qualifications {
margin: 0; margin: 0;
font-size: var(--typography-Body-Bold-fontSize); font-size: var(--typography-Body-Bold-fontSize);

37
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -12,6 +12,8 @@
.title { .title {
grid-area: title; grid-area: title;
font-weight: 600; font-weight: 600;
color: var(--some-black-color, #111);
text-align: center;
} }
.link { .link {
@@ -22,24 +24,25 @@
font-size: 2rem; font-size: 2rem;
} }
.value { .value {
color: var(--some-red-color, #ed2027); color: var(--some-brown-color, #4d001b);
} }
.cardContainer { .cardContainer {
display: grid; display: flex;
gap: 4px; gap: 16px;
} }
.cardSubtitle { .cardSubtitle {
font-family: var(--ff-fira-sans); font-family: var(--ff-fira-sans);
font-size: 12px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 14.4px; line-height: 14.4px;
text-align: center; text-align: center;
color: var(--some-black-color, #111); color: #b05b65;
margin: 0; margin: 0;
} }
.card { .card {
flex: 1 1 0px;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -48,30 +51,18 @@
align-items: center; align-items: center;
padding: 30px; padding: 30px;
border-radius: 4px; border-radius: 4px;
} background-color: var(--Base-Fill-Normal);
.card:first-of-type { aspect-ratio: 1/1;
min-height: 280px;
background-color: var(--some-grey-color, #ababab);
}
.card:nth-child(2) {
background-color: var(--some-grey-color, #ececec);
}
.card:last-of-type {
background-color: var(--some-grey-color, #d4d2d2);
} }
@media screen and (min-width: 950px) { @media screen and (min-width: 950px) {
.cardContainer { .card:nth-child(2) {
grid-template-areas: grid-area: card2;
"card card2"
"card card3";
} }
.card:first-of-type { .card:last-of-type {
grid-area: card; grid-area: card3;
} }
.card:nth-child(2) { .card:nth-child(2) {