abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hover animation for home button.

Browse Source 
Fix svg alignment in foreign objects.
This commit is contained in:
Paul
2021-08-03 15:37:19 +01:00
parent 9581a4df92
commit e1ffefe2ba
4 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/common/IconBase.tsx
View File

@@ -6,11 +6,13 @@ export interface IconBaseProps<T> {
attachment?: Attachment;
size: number;
hover?: boolean;
animate?: boolean;
}
interface IconModifiers {
square?: boolean;
hover?: boolean;
}
export default styled.svg<IconModifiers>`
@@ -27,6 +29,14 @@ export default styled.svg<IconModifiers>`
border-radius: 50%;
`}
}
${(props) =>
props.hover &&
css`
&:hover .icon {
filter: brightness(0.8);
}
`}
`;
export const ImageIconBase = styled.img<IconModifiers>`
@@ -38,4 +48,12 @@ export const ImageIconBase = styled.img<IconModifiers>`
css`
border-radius: 50%;
`}
${(props) =>
props.hover &&
css`
&:hover img {
filter: brightness(0.8);
}
`}
`;