revite/src/components/ui/IconButton.tsx
2021-06-27 12:17:59 +02:00

43 lines
807 B
TypeScript

import styled, { css } from "styled-components";
interface Props {
type?: 'default' | 'circle'
}
const normal = `var(--secondary-foreground)`;
const hover = `var(--foreground)`;
export default styled.div<Props>`
z-index: 1;
display: grid;
cursor: pointer;
place-items: center;
fill: ${normal};
color: ${normal};
/*stroke: ${normal};*/
a {
color: ${normal};
}
&:hover {
fill: ${hover};
color: ${hover};
/*stroke: ${hover};*/
a {
color: ${hover};
}
}
${ props => props.type === 'circle' && css`
padding: 4px;
border-radius: 50%;
background-color: var(--secondary-header);
&:hover {
background-color: var(--primary-header);
}
` }
`;