2019-12-23 12:37:36 +00:00
|
|
|
import styled from "styled-components";
|
2021-02-24 17:11:23 +00:00
|
|
|
import Heading from "@appserver/components/heading";
|
|
|
|
import Base from "@appserver/components/themes/base";
|
2021-08-23 10:50:21 +00:00
|
|
|
import NoUserSelect from "@appserver/components/utils/commonStyles";
|
2021-10-06 12:44:39 +00:00
|
|
|
import { tablet } from "@appserver/components/utils/device";
|
2019-12-23 12:37:36 +00:00
|
|
|
const size = {
|
|
|
|
header: "28px",
|
2021-09-14 10:46:15 +00:00
|
|
|
menu: "23px",
|
2020-10-16 12:38:04 +00:00
|
|
|
content: "21px",
|
2019-12-23 12:37:36 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const weight = {
|
|
|
|
header: 600,
|
|
|
|
menu: "bold",
|
2020-10-16 12:38:04 +00:00
|
|
|
content: "bold",
|
2019-12-23 12:37:36 +00:00
|
|
|
};
|
2019-12-20 08:38:37 +00:00
|
|
|
|
|
|
|
const StyledHeading = styled(Heading)`
|
2019-12-23 12:37:36 +00:00
|
|
|
margin: 0;
|
2021-10-06 09:22:28 +00:00
|
|
|
line-height: 50px;
|
2020-10-16 12:38:04 +00:00
|
|
|
font-size: ${(props) => size[props.headlineType]};
|
|
|
|
font-weight: ${(props) => weight[props.headlineType]};
|
2021-02-26 12:46:02 +00:00
|
|
|
color: ${(props) => (props.color ? props.color : props.theme.color)};
|
2021-10-06 12:44:39 +00:00
|
|
|
${NoUserSelect}
|
|
|
|
@media ${tablet} {
|
2021-10-01 13:51:28 +00:00
|
|
|
${(props) => props.headlineType === "content" && "font-size: 18px"};
|
2021-10-06 12:44:39 +00:00
|
|
|
}
|
2019-12-20 08:38:37 +00:00
|
|
|
`;
|
2021-02-20 08:46:32 +00:00
|
|
|
StyledHeading.defaultProps = { theme: Base };
|
2019-12-20 08:38:37 +00:00
|
|
|
|
2019-12-23 12:37:36 +00:00
|
|
|
export default StyledHeading;
|