revite/src/components/ui/IconButton.tsx
2021-07-05 11:23:23 +01:00

46 lines
734 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;
transition: 0.1s ease background-color;
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);
}
`}
`;