kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

active nav link style

Browse Source
This commit is contained in:
MapleLeaf
2022-01-13 17:05:39 -06:00
parent 3efaef162b
commit b59dcc0ae7
8 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/website/app/modules/ui/components.ts
View File

@@ -4,12 +4,16 @@ export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
export const inlineIconClass = clsx`inline w-5 align-sub`
export const linkClass = clsx`
font-medium inline-block relative
opacity-60 hover:opacity-100 transition-opacity
after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
hover:after:translate-y-[-1px] hover:after:opacity-100
`
export const linkClass = ({ active = false } = {}) =>
clsx(
clsx`font-medium inline-block relative`,
clsx`opacity-60 hover:opacity-100 transition-opacity`,
clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
active
? clsx`text-emerald-500 after:bg-emerald-500`
: clsx`after:bg-white/50`,
)
export const docsProseClass = clsx`
prose prose-invert