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

feat: list credit card according to design

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-16 15:50:26 +02:00
parent d8f7e4157a
commit 09b1d322a7
12 changed files with 195 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Spacing-x2);
max-width: 510px;
}
@@ -9,14 +9,24 @@
gap: var(--Spacing-x1);
}
.card {
margin-top: 2rem;
.cardContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 0.5rem;
gap: var(--Spacing-x1);
}
.subTitle {
grid-column: span 2;
.card {
display: grid;
align-items: center;
column-gap: var(--Spacing-x1);
grid-template-columns: auto auto auto 1fr;
justify-items: flex-end;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half,);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Background-Primary-Normal);
}
@media screen and (min-width: 768px) {
.container {
gap: var(--Spacing-x2);
}
}