m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Apply CSS to flag icons.

Browse Source
This commit is contained in:
Mike Cao 2023-04-25 21:18:03 -07:00
parent 938047ce45
commit 9345c9ac9e
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/common/FilterLink.js
View File

@ -13,18 +13,16 @@ export function FilterLink({ id, value, label, externalUrl, children, className
const selected = query[id] === value; const selected = query[id] === value;
return ( return (
<div className={classNames(styles.row, className)}> <div
className={classNames(styles.row, className, {
[styles.inactive]: active && !selected,
[styles.active]: active && selected,
})}
>
{children} {children}
{!value && `(${label || formatMessage(labels.unknown)})`} {!value && `(${label || formatMessage(labels.unknown)})`}
{value && ( {value && (
<Link <Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
href={resolveUrl({ [id]: value })}
className={classNames(styles.label, {
[styles.inactive]: active && !selected,
[styles.active]: active && selected,
})}
replace
>
{safeDecodeURI(label || value)} {safeDecodeURI(label || value)}
</Link> </Link>
)} )}

8
components/common/FilterLink.module.css
View File

@ -4,11 +4,15 @@
gap: 10px; gap: 10px;
} }
.row .inactive { .row.inactive {
color: var(--base500); color: var(--base500);
} }
.row .active { .row.inactive img {
opacity: 0.35;
}
.row.active {
color: var(--base900); color: var(--base900);
font-weight: 600; font-weight: 600;
} }