fix: design adjustments

Smaller name, ellipsis for long name, indicator for number of roles/sheets/layers
This commit is contained in:
Fiona Lena Urban 2025-05-09 20:09:12 +02:00
parent c5be0b6b04
commit 8ccedbed8a
5 changed files with 43 additions and 33 deletions

View file

@ -1,10 +1,10 @@
.PriceCard {
width: 100%;
display: grid;
transition: 150ms;
grid-template-rows: auto 1fr auto;
max-height: 400px;
opacity: 1;
color: var(--color-white);
gap: 1rem;
padding: 1rem;
&.deleting {
max-height: 0;
@ -12,30 +12,32 @@
}
& > header {
color: var(--color-white);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.5rem;
& .icon {
font-size: 1.2rem;
font-size: 1rem;
cursor: pointer;
}
}
& > .name-price {
display: flex;
gap: .5rem;
& .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
& > span:nth-child(1) {
font-weight: bold;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > .Button {
color: var(--color-white);
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
@ -45,7 +47,6 @@
width: 100%;
gap: 1rem;
justify-content: space-between;
padding-top: 0;
& > * {
flex-basis: 10%;
@ -53,7 +54,6 @@
}
& > .info {
color: var(--color-white);
align-items: center;
gap: .25rem;