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

add: new design (wip)

Browse source 
New design as WIP, swipe controls
This commit is contained in:
Fiona Lena Urban 2025-05-10 11:07:06 +02:00
parent 259adf53f6
commit 7af148058e
15 changed files with 354 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,72 +1,108 @@
.PriceCard {
position: relative;
overflow: hidden;
width: 100%;
transition: 150ms;
opacity: 1;
color: var(--color-white);
gap: 1rem;
padding: 1rem;
color: var(--color-main-dark);
background: black;
&.deleting {
max-height: 0;
opacity: 0;
}
& > header {
.bottom {
position: absolute;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
& .icon {
font-size: 1rem;
cursor: pointer;
}
}
& .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(1) {
font-weight: bold;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
& .wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 1rem;
justify-content: space-between;
height: 100%;
& > .info {
flex-grow: 0;
& > * {
flex-grow: 1;
color: var(--color-lightest);
font-size: 2rem;
display: flex;
align-items: center;
gap: .25rem;
& > .icon {
font-size: 2rem;
padding: .2rem;
& .icon {
filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4));
}
}
& > .price {
display: flex;
align-items: center;
gap: .5rem;
& .bg-edit {
background: var(--color-gradient-main-dark);
padding: 2rem;
text-align: left;
}
& .bg-delete {
background: var(--color-gradient-error-reverse);
padding: 2rem;
text-align: right;
justify-content: flex-end;
}
}
.top {
position: relative;
background: var(--color-lightest);
z-index: 2;
gap: 1rem;
padding: 1rem;
border-radius: var(--radius-default);
& > header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-darkest);
& .icon {
font-size: 1rem;
cursor: pointer;
}
}
& > .pro {
font-size: .6rem;
& .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(1) {
font-weight: bold;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
& .wrapper {
display: flex;
flex-direction: row;
width: 100%;
gap: 1rem;
justify-content: space-between;
& > .info {
flex-grow: 0;
align-items: center;
gap: .25rem;
& > .price {
display: flex;
align-items: center;
gap: .5rem;
}
& > .pro {
font-size: .6rem;
font-weight: bold;
opacity: .7;
}
}
}
}