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.
125 lines
2.5 KiB
125 lines
2.5 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
import { ButtonSolid } from 'features/Common'
|
|
import { PriceDetails, PriceAmount } from 'features/Price/styled'
|
|
|
|
export const Wrapper = styled.div`
|
|
width: 100%;
|
|
border-radius: 2px 2px 0px 0px;
|
|
background-color: #414141;
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
|
|
`
|
|
|
|
type HeaderProps = {
|
|
isOpen?: boolean,
|
|
}
|
|
|
|
export const Header = styled.div<HeaderProps>`
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 52px;
|
|
align-items: center;
|
|
padding: 0 15px 0 20px;
|
|
|
|
${PriceAmount} {
|
|
font-size: 24px;
|
|
position: absolute;
|
|
right: 46px;
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
${PriceDetails} {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: calc(100% - 48px);
|
|
}
|
|
|
|
${({ isOpen }) => (isOpen
|
|
? ''
|
|
: css`
|
|
${PriceDetails}, ${PriceAmount}, ${Title} {
|
|
color: #D9D9D9;
|
|
}
|
|
`)}
|
|
`
|
|
|
|
export const Border = styled.div`
|
|
height: 0.66px;
|
|
background: linear-gradient(90deg, transparent 0%, #656565 50%, transparent 100%);
|
|
`
|
|
|
|
export const Title = styled(T9n)`
|
|
max-width: calc(100% - 112px);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: ${({ theme }) => theme.colors.white};
|
|
overflow: hidden;
|
|
`
|
|
|
|
type ContentProps = {
|
|
isOpen?: boolean,
|
|
}
|
|
|
|
export const Content = styled.div<ContentProps>`
|
|
height: ${({ isOpen }) => (isOpen ? 'auto' : 0)};
|
|
`
|
|
|
|
export const Body = styled.div`
|
|
position: relative;
|
|
padding: 8px 24px 30px;
|
|
background-color: #414141;
|
|
`
|
|
|
|
export const Description = styled.p`
|
|
width: calc(100% - 90px);
|
|
margin-bottom: 15px;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: #C7C7C7;
|
|
|
|
:empty, :has(span:empty) {
|
|
display: none;
|
|
}
|
|
|
|
:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
`
|
|
|
|
export const Button = styled(ButtonSolid)`
|
|
width: 100%;
|
|
height: 48px;
|
|
`
|
|
|
|
export const SubscriptionTypeText = styled(T9n)`
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: ${({ theme }) => theme.colors.white};
|
|
`
|
|
|
|
export const BestChoice = styled.div`
|
|
position: absolute;
|
|
bottom: 40px;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 108px;
|
|
height: 20px;
|
|
padding-right: 16px;
|
|
border-radius: 1px 0px 0px 1px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
font-variant: all-small-caps;
|
|
letter-spacing: 0.03em;
|
|
color: #464646;
|
|
background: linear-gradient(270deg, rgba(253, 253, 254, 0.8) 0%, rgba(253, 253, 254, 0) 97.42%);
|
|
backdrop-filter: blur(3px);
|
|
`
|
|
|