mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-21 14:47:41 +01:00
Code Issues Wiki Activity

⚡ Backdrop blur for the navigation buttons

Browse source
This commit is contained in:
Mehdi Dara 2024-01-21 21:28:10 +03:30
parent bbee084182
commit 6010c2bab0
3 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/LinksDropdown.tsx
View file

@ -109,7 +109,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
return ( return (
<div className="relative is-dropdown"> <div className="relative is-dropdown">
<div <div
className="cursor-pointer tabbable rounded-full flex gap-2 text-white items-center py-2 px-3 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105" className="cursor-pointer tabbable rounded-full flex gap-2 text-white items-center py-2 px-3 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover backdrop-blur-lg transition-[background,transform] duration-100 hover:scale-105"
tabIndex={0} tabIndex={0}
onClick={toggleOpen} onClick={toggleOpen}
onKeyUp={(evt) => evt.key === "Enter" && toggleOpen()} onKeyUp={(evt) => evt.key === "Enter" && toggleOpen()}

2
src/components/buttons/IconPatch.tsx
View file

@ -25,7 +25,7 @@ export function IconPatch(props: IconPatchProps) {
return ( return (
<div className={props.className || undefined} onClick={props.onClick}> <div className={props.className || undefined} onClick={props.onClick}>
<div <div
className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`} className={`flex items-center justify-center rounded-full border-2 border-transparent backdrop-blur-lg bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
> >
<Icon icon={props.icon} /> <Icon icon={props.icon} />
</div> </div>

2
src/components/layout/BrandPill.tsx
View file

@ -16,7 +16,7 @@ export function BrandPill(props: {
"flex items-center space-x-2 rounded-full px-4 py-2 text-type-logo", "flex items-center space-x-2 rounded-full px-4 py-2 text-type-logo",
props.backgroundClass ?? "bg-pill-background bg-opacity-50", props.backgroundClass ?? "bg-pill-background bg-opacity-50",
props.clickable props.clickable
? "transition-[transform,background-color] hover:scale-105 hover:bg-pill-backgroundHover hover:text-type-logo active:scale-95" ? "transition-[transform,background-color] hover:scale-105 hover:bg-pill-backgroundHover backdrop-blur-lg hover:text-type-logo active:scale-95"
: "", : "",
)} )}
> >