Aarni Halinen
49 lines
1020 B
TypeScript
49 lines
1020 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
|
|
interface HeroPrimaryButtonsProps {
|
|
row?: boolean;
|
|
}
|
|
|
|
const Buttons = styled.div<HeroPrimaryButtonsProps>`
|
|
${({ row }) => (row ? "width: 100%;" : "")}
|
|
|
|
display: flex;
|
|
flex-flow: ${({ row }) => (row ? "row" : "column")} wrap;
|
|
|
|
a {
|
|
display: contents;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
margin: 0.5rem;
|
|
|
|
/* stylelint-disable function-name-case */
|
|
flex: 1 0 calc(100% / ${({ children }) => React.Children.count(children)} - 2 * 0.5rem);
|
|
|
|
/* stylelint-enable function-name-case */
|
|
color: ${colors.blue1};
|
|
background-color: transparent;
|
|
padding: 0.8rem 2rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
border: 1px solid ${colors.lightTurquoise};
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: ${colors.white};
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default Buttons;
|