fix: design adjustments
Smaller name, ellipsis for long name, indicator for number of roles/sheets/layers
This commit is contained in:
parent
c5be0b6b04
commit
8ccedbed8a
5 changed files with 43 additions and 33 deletions
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue