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.
76 lines
1.5 KiB
76 lines
1.5 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { ProfileLink } from 'features/ProfileLink'
|
|
|
|
export const Wrapper = styled.div`
|
|
display: flex;
|
|
`
|
|
|
|
export const CountryFlag = styled.img`
|
|
width: 0.71rem;
|
|
height: 0.75rem;
|
|
margin-left: 0.567rem;
|
|
object-fit: contain;
|
|
object-position: bottom;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
width: 12px;
|
|
height: 8px;
|
|
margin-left: 3.5px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const NameSignWrapper = styled.div`
|
|
display: flex;
|
|
max-width: 90%;
|
|
align-items: center;
|
|
`
|
|
|
|
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;
|
|
`
|
|
: ''};
|
|
` : null)}
|
|
`
|
|
|
|
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;
|
|
`
|
|
: ''};
|
|
`
|
|
|