Improve the multi-select behaviour/appearance and display how many selections are made/required
This commit is contained in:
parent
0381df035e
commit
812583f33c
7 changed files with 75 additions and 20 deletions
|
|
@ -30,18 +30,22 @@
|
|||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: background 100ms ease-in-out;
|
||||
position: relative;
|
||||
transition: all 100ms ease-in-out;
|
||||
|
||||
&.grid {
|
||||
&:hover {
|
||||
background: var(--color-cool-4);
|
||||
}
|
||||
&:hover, &:has(input[type="checkbox"]:checked) {
|
||||
background: var(--color-warm-3);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&:has(input[type="checkbox"]:checked) img {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.details {
|
||||
|
|
@ -50,6 +54,10 @@
|
|||
gap: 4px;
|
||||
padding: 0px 4px 4px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.paginated {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue