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.
100 lines
1.6 KiB
100 lines
1.6 KiB
import styled from 'styled-components/macro'
|
|
|
|
import {
|
|
PriceAmount,
|
|
PriceDetails,
|
|
Period,
|
|
Divider,
|
|
Currency,
|
|
PerPeriod,
|
|
} from 'features/Price/styled'
|
|
import { T9n } from 'features/T9n'
|
|
|
|
export const Description = styled.p`
|
|
margin-bottom: 20px;
|
|
line-height: 20px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
|
|
:empty, :has(span:empty) {
|
|
display: none;
|
|
}
|
|
|
|
:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
:first-child {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
|
|
export const PriceBlock = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-top: 60px;
|
|
`
|
|
|
|
export const PriceTextWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
white-space: initial;
|
|
`
|
|
|
|
export const PriceTextTop = styled(T9n)`
|
|
margin-bottom: 2px;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
font-size: 16px;
|
|
letter-spacing: 0.03em;
|
|
`
|
|
|
|
export const PriceTextBottom = styled(T9n)`
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
letter-spacing: 0.03em;
|
|
`
|
|
|
|
export const Wrapper = styled.div`
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100% - 100px);
|
|
|
|
${PriceDetails} {
|
|
font-size: 50px;
|
|
}
|
|
|
|
${PriceAmount} {
|
|
font-size: 50px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
${Divider} {
|
|
width: 5px;
|
|
height: 45px;
|
|
margin-right: 3px;
|
|
translate: 0 7px;
|
|
}
|
|
|
|
${Currency} {
|
|
margin-right: 10px;
|
|
translate: none;
|
|
font-size: 50px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
${Period} {
|
|
font-size: 16px;
|
|
}
|
|
|
|
${PerPeriod} {
|
|
display: inline-block;
|
|
translate: 0 4px;
|
|
}
|
|
`
|
|
|
|
|