EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merch sizing-guide: add filter
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 02:08:10 +01:00
commit 358bc7d211
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
5 changed files with 364 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

60
styleguide/assets/style/merch.css
View file

@ -48,6 +48,9 @@ table tbody {
table tbody.currentEvent {
border: solid 4px var(--color-primary);
}
table tbody.filtered {
display: none;
}
table tbody > tr > th,
table thead > tr > th,
table td {
@ -127,4 +130,61 @@ table td.dimension.currentDimension::after {
font-weight: bold;
}
div.filterBox {
border: solid 4px var(--color-foreground);
margin: 2rem 0;
padding: 1rem;
position: relative;
font-family: "Departure Mono", ui-monospace, monospace;
display: flex;
flex-wrap: wrap;
column-gap: 4rem;
row-gap: 2rem;
width: fit-content;
}
div.filterBox::before {
content: "filter";
position: absolute;
top: -0.6lh;
background-color: var(--color-background);
padding: 0 0.5rem;
}
div.filterBox > div {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 1.2rem;
}
div.filterBox > div label {
display: flex;
align-items: center;
gap: 0.5rem;
}
div.filterBox > div label input[type=checkbox] {
appearance: none;
background-color: var(--color-shade-1);
margin: 0;
color: currentColor;
width: 1.8em;
height: 1.8em;
border: 0.3em solid var(--color-shade-4);
border-radius: 0.15em;
transform: translateY(-0.075em);
position: relative;
font-family: inherit;
}
div.filterBox > div label input[type=checkbox]::before {
position: absolute;
inset: 0;
content: "x";
text-align: center;
font-size: 1.2rem;
line-height: 0.7;
transform: scale(0);
transition: 120ms transform ease-in-out;
}
div.filterBox > div label input[type=checkbox]:checked::before {
transform: scale(1);
}
/*# sourceMappingURL=merch.css.map */