webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: design, icons, calculation

Browse source 
Implemented new design for PriceCards, added some icons for visuals, added calculation per price card
This commit is contained in:
Fiona Lena Urban 2025-02-13 21:21:56 +01:00
parent 878b7e06e8
commit aa9c936f80
11 changed files with 180 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app/assets/styles/priceCard.css
View file

@ -1,16 +1,49 @@
.PriceCard {
padding: var(--padding-default);
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
background: var(--color-blue);
border-bottom: 1px solid var(--color-white);
& > .wrapper {
& > .padding {
gap: 1rem;
padding: var(--padding-default);
}
& > .bg-blue {
background: var(--color-blue);
}
& > .bg-white {
background: var(--color-white);
}
& .wrapper {
display: flex;
flex-direction: row;
width: 100%;
gap: 1rem;
justify-content: space-between;
& > * {
flex-basis: 30%;
flex-grow: 1;
}
& > .info {
align-items: center;
& > .icon {
color: var(--color-blue-light);
font-size: 2rem;
padding: .2rem;
}
& > .price {
font-size: 1.2rem;
}
& > .pro {
font-size: .8rem;
font-weight: bold;
color: var(--color-main-light);
}
}
}
}