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.
117 lines
2.2 KiB
117 lines
2.2 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { ProfileLink } from 'features/ProfileLink'
|
|
|
|
export const Wrapper = styled.div`
|
|
${isMobileDevice ? css`
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
` : ''}
|
|
`
|
|
|
|
export const SubtitleMain = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`
|
|
|
|
export const Tooltip = styled.div`
|
|
position: absolute;
|
|
top: 110%;
|
|
left: 15px;
|
|
padding: 0 6px;
|
|
line-height: 14px;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
color: #000;
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
z-index: 3;
|
|
display: none;
|
|
`
|
|
|
|
export const SportWrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
height: 0.75rem;
|
|
z-index: 3;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
${Tooltip} {
|
|
${!isMobileDevice ? css`display: block;` : ''}
|
|
}
|
|
}
|
|
`
|
|
|
|
export const CountryWrapper = styled(SportWrapper)`
|
|
z-index: 2;
|
|
margin-left: 0.567rem;
|
|
|
|
${isMobileDevice
|
|
? css`margin-left: 3.5px;`
|
|
: ''}
|
|
`
|
|
|
|
export const CountryFlag = styled.img`
|
|
width: 0.71rem;
|
|
height: 0.75rem;
|
|
object-fit: contain;
|
|
object-position: bottom;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
width: 12px;
|
|
height: 8px;
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
type StyledLinkProps = {
|
|
isLeftSide?: boolean,
|
|
isMatchPage?: boolean,
|
|
}
|
|
|
|
export const StyledLink = styled(ProfileLink)<StyledLinkProps>`
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 0.567rem;
|
|
margin-left: ${({ isLeftSide }) => (isLeftSide ? '0px' : '0.567rem')};
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
${({ isMatchPage }) => (isMatchPage
|
|
? css`
|
|
font-size: 14px;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
font-size: 10px;
|
|
`
|
|
: ''};
|
|
` : '')}
|
|
`
|
|
|
|
type FavoriteSignProps = {
|
|
marginLeft?: number,
|
|
}
|
|
|
|
export const FavoriteSign = styled.span<FavoriteSignProps>`
|
|
display: inline-block;
|
|
width: 0.472rem;
|
|
height: 0.472rem;
|
|
margin-left: ${({ marginLeft = 9 }) => marginLeft}px;
|
|
background: url('/images/sportFavStar.png') no-repeat center / 100% 100%;
|
|
${isMobileDevice
|
|
? css`
|
|
width: 10px;
|
|
height: 10px;
|
|
`
|
|
: ''};
|
|
`
|
|
|