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

add: new price card

Browse source 
Added new price card design, wip
This commit is contained in:
Fiona Lena Urban 2025-04-28 21:07:04 +02:00
parent 9d686e2af2
commit 7aa21c1c19
7 changed files with 194 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,83 +11,60 @@
opacity: 0;
}
&.folded {
grid-template-rows: auto 0fr auto;
}
& > header {
color: var(--color-white);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.3em;
& > .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
& > .Button {
color: var(--color-white);
border: 2px solid var(--color-white);
}
}
& aside {
overflow: hidden;
}
& footer {
display: flex;
justify-content: space-between;
align-items: center;
& > .Button.delete {
scale: 0;
}
& > .Button.deletable {
scale: 1;
}
}
& .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;
padding-top: 0;
& > * {
flex-basis: 25%;
flex-grow: 1;
flex-basis: 10%;
flex-grow: 0;
}
& > .info {
color: var(--color-white);
align-items: center;
gap: .25rem;
& > .icon {
color: var(--color-blue-light);
font-size: 2rem;
padding: .2rem;
}
& > .price {
font-size: 1.2rem;
display: flex;
align-items: center;
gap: .5rem;
}
& > .pro {
font-size: .8rem;
font-size: .6rem;
font-weight: bold;
color: var(--color-main-light);
}
}
}