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.
83 lines
1.8 KiB
83 lines
1.8 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
import isUndefined from 'lodash/isUndefined'
|
|
|
|
import { Logo } from 'features/Logo'
|
|
|
|
export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
|
|
|
|
type HeaderProps = {
|
|
color?: string,
|
|
height?: number,
|
|
}
|
|
|
|
export const HeaderStyled = styled.header<HeaderProps>`
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: ${({ height = 8.5 }) => height}rem;
|
|
background: linear-gradient(
|
|
187deg,
|
|
${({ color = DEFAULT_HEADER_COLOR }) => color} -4.49%,
|
|
rgba(0, 0, 0, 0) 68.29%),
|
|
#000000;
|
|
z-index: 10;
|
|
${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;
|
|
${isMobileDevice
|
|
? css`
|
|
width: 85px;
|
|
height: 20px;
|
|
left: 48vw;
|
|
top: 5px;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
|
|
@media screen and (orientation: landscape){
|
|
width: 97px;
|
|
height: 23px;
|
|
margin-top: 0;
|
|
}
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type PositionProps = {
|
|
left?: number,
|
|
right?: number,
|
|
}
|
|
|
|
export const Position = styled.div<PositionProps>`
|
|
position: absolute;
|
|
top: 1.14rem;
|
|
${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
|
|
${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
|
|
`
|
|
|