Improve the multi-select behaviour/appearance and display how many selections are made/required

This commit is contained in:
Oliver 2026-02-01 01:19:39 -07:00
parent 0381df035e
commit 812583f33c
7 changed files with 75 additions and 20 deletions

View file

@ -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 {