hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-02 02:10:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve styles to avoid FOUC

Browse Source
This commit is contained in:
Hazem Krimi
2022-01-29 22:28:53 +01:00
parent 14e1970a56
commit f00dc80aae
8 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Button/styles.tsx
+4 -2
View File
@@ -7,13 +7,14 @@ export const Btn = styled.button<Omit<Props, 'href'>>`
cursor: pointer;
background: none;
color: var(--text);
border: ${({ variant }) => (variant === 'outline' ? '2px solid var(--text)' : 'none')};
border: ${({ variant }) =>
variant === 'outline' ? '2px solid var(--text)' : '2px solid transparent'};
font-weight: bold;
text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')};
text-align: left;
text-decoration: none;
transition: color 250ms ease-in-out;
transition: color 250ms ease-in-out, border 250ms ease-in-out;
z-index: 1;
@media (max-width: 768px) {
@@ -36,6 +37,7 @@ export const Btn = styled.button<Omit<Props, 'href'>>`
&:hover {
color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
border: 2px solid transparent;
}
&:hover::before {