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

Update mdx button disabled styles

Browse Source
This commit is contained in:
Hazem Krimi
2021-03-22 01:58:54 +01:00
parent 5498f89f23
commit 61bc530a3d
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MDXButton.tsx
+9 -1
View File
@@ -7,6 +7,7 @@ interface Props {
type?: 'button' | 'submit'; type?: 'button' | 'submit';
link?: string; link?: string;
dark?: boolean; dark?: boolean;
disabled?: boolean;
} }
const Btn = styled.button<Props>` const Btn = styled.button<Props>`
@@ -29,13 +30,20 @@ const Btn = styled.button<Props>`
['action', 'outline'].includes(variant as string) ? 'center' : 'left'}; ['action', 'outline'].includes(variant as string) ? 'center' : 'left'};
transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
${({ disabled }) =>
disabled &&
`
background: gray;
cursor: default;
`}
@media (max-width: 768px) { @media (max-width: 768px) {
padding: ${({ variant }) => padding: ${({ variant }) =>
['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'}; ['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
} }
`; `;
const MDXButton: FC<Props & { className?: string; disabled?: boolean }> = ({ const MDXButton: FC<Props & { className?: string }> = ({
variant = 'text', variant = 'text',
type = 'button', type = 'button',
link, link,