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.
150 lines
2.9 KiB
150 lines
2.9 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { ProfileTypes } from 'config'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
import { customScrollbar } from 'features/Common'
|
|
import { ProfileLogo } from 'features/ProfileLogo'
|
|
|
|
import { TooltipBlockWrapper } from './TooltipBlock/styled'
|
|
|
|
export const UserSportFavWrapper = styled.aside`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
padding-bottom: 2.75rem;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
display: none;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ScrollWrapper = styled.div`
|
|
width: 4.35rem;
|
|
padding: 0.472rem 0.19rem 0 0.15rem;
|
|
height: calc(100vh - 15.96rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
${customScrollbar}
|
|
`
|
|
|
|
export const UserSportFavXWrapper = styled.button`
|
|
position: absolute;
|
|
top: -0.472rem;
|
|
right: -0.472rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
`
|
|
|
|
export const UserSportFavItemLogoWrapper = styled.div`
|
|
position: relative;
|
|
width: 3.3125rem;
|
|
height: 3.3125rem;
|
|
border-radius: 4px;
|
|
background-color: #3F3F3F;
|
|
border: 2px solid #3F3F3F;
|
|
|
|
${UserSportFavXWrapper} {
|
|
display: none;
|
|
}
|
|
|
|
${TooltipBlockWrapper} {
|
|
display: none;
|
|
}
|
|
|
|
:not(:last-child) {
|
|
margin-bottom: 0.71rem;
|
|
}
|
|
|
|
&:hover {
|
|
border: 2px solid #fff;
|
|
cursor: pointer;
|
|
|
|
${UserSportFavXWrapper} {
|
|
display: flex;
|
|
}
|
|
|
|
${TooltipBlockWrapper} {
|
|
display: flex;
|
|
}
|
|
}
|
|
`
|
|
|
|
export const UserSportFavImgWrapper = styled(ProfileLogo)`
|
|
width: 100%;
|
|
padding: 0.19rem;
|
|
|
|
${({ profileType }) => (
|
|
profileType === ProfileTypes.PLAYERS
|
|
? 'padding: 0.19rem 0.08rem 0 0.08rem;'
|
|
: ''
|
|
)}
|
|
`
|
|
|
|
type UserSportFavStarProps = {
|
|
marginTop?: number,
|
|
}
|
|
|
|
export const UserSportFavStar = styled.div<UserSportFavStarProps>`
|
|
width: 1.85rem;
|
|
min-height: 1.85rem;
|
|
background: url('/images/sportFavStar.png') no-repeat center / 100%;
|
|
margin-left: 0.15rem;
|
|
margin-bottom: 1.125rem;
|
|
margin-top: ${({ marginTop = 0 }) => marginTop}px;
|
|
`
|
|
|
|
export const FavoriteModal = styled.div`
|
|
width: 411px;
|
|
height: 202px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`
|
|
|
|
export const ExclamationSign = styled.div`
|
|
width: 77px;
|
|
height: 66px;
|
|
background: url(/images/exclamation.svg) no-repeat;
|
|
margin-bottom: 20px;
|
|
`
|
|
|
|
export const Text = styled(T9n)`
|
|
text-align: center;
|
|
line-height: 160.2%;
|
|
`
|
|
|
|
export const TournamentNameTooltip = styled.div`
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 1.5625rem;
|
|
padding: 0 6px;
|
|
line-height: 1.0625rem;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
color: #000;
|
|
font-weight: 400;
|
|
font-size: 0.6875rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
`
|
|
|