You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.4 KiB
113 lines
2.4 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import isUndefined from 'lodash/isUndefined'
|
|
|
|
import { client } from 'config/clients'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { Logo } from 'features/Logo'
|
|
|
|
export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
|
|
|
|
const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => css`
|
|
background: linear-gradient(
|
|
187deg,
|
|
${color} -4.49%,
|
|
#000000 68.29%),
|
|
#000000;
|
|
z-index: 10;
|
|
`
|
|
|
|
type HeaderProps = {
|
|
color?: string,
|
|
headerImage?: string | null,
|
|
height?: number,
|
|
}
|
|
|
|
export const HeaderStyled = styled.header<HeaderProps>`
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: ${({ height = 8.5 }) => height}rem;
|
|
|
|
${({ color, headerImage }) => (headerImage
|
|
? css`background: url(${headerImage});`
|
|
: client.styles.homePageHeader || defaultHeaderStyles(color)
|
|
)}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
height: 124px;
|
|
|
|
@media screen and (orientation: landscape){
|
|
height: 121px;
|
|
}
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type Props = {
|
|
height?: number,
|
|
marginTop?: number,
|
|
}
|
|
|
|
export const HeaderGroup = styled.div<Props>`
|
|
display: flex;
|
|
|
|
${({ height }) => (height ? `height: ${height}rem` : '')};
|
|
${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
position: relative;
|
|
justify-content: flex-end;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const HeaderLogo = styled(Logo)`
|
|
margin-top: 4px;
|
|
|
|
${({ isMatchPage }) => (isMatchPage ? css`
|
|
width: ${client.styles.matchLogoWidth}rem;
|
|
height: ${client.styles.matchLogoHeight}rem;
|
|
` : '')}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
@media (max-width: 650px){
|
|
width: 85px;
|
|
height: 20px;
|
|
left: 48vw;
|
|
top: 5px;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
}
|
|
|
|
@media (orientation: landscape){
|
|
left: 42vw;
|
|
width: 97px;
|
|
height: 23px;
|
|
margin-top: 0;
|
|
position: absolute;
|
|
}
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type PositionProps = {
|
|
isMatchPage?: boolean,
|
|
left?: number,
|
|
right?: number,
|
|
}
|
|
|
|
export const Position = styled.div<PositionProps>`
|
|
position: absolute;
|
|
|
|
top: ${({ isMatchPage }) => (
|
|
isMatchPage ? client.styles.matchLogoTopMargin : ''
|
|
)}rem;
|
|
|
|
${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
|
|
${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
|
|
`
|
|
|