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.
96 lines
1.9 KiB
96 lines
1.9 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
|
|
export const Switch = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
${isMobileDevice
|
|
? css`
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
/* height: 100%; */
|
|
text-transform: uppercase;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const Title = styled(T9n)`
|
|
font-weight: 600;
|
|
font-size: 0.71rem;
|
|
line-height: 1.14rem;
|
|
text-transform: uppercase;
|
|
margin-right: 0.614rem;
|
|
color: ${({ theme }) => theme.colors.white};
|
|
${isMobileDevice
|
|
? css`
|
|
font-size: 10px;
|
|
line-height: 22px;
|
|
letter-spacing: 0.15rem;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type IconProps = {
|
|
height?: number,
|
|
iconName: string,
|
|
isOn: boolean,
|
|
width?: number,
|
|
}
|
|
|
|
export const Icon = styled.div<IconProps>`
|
|
width: ${({ width = 1.7 }) => width}rem;
|
|
height: ${({ height = 2.28 }) => height}rem;
|
|
position: relative;
|
|
color: white;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
${({ iconName, isOn }) => (
|
|
isOn
|
|
? `
|
|
background-image: url(/images/${iconName}-on.svg);
|
|
`
|
|
: `
|
|
background-image: url(/images/${iconName}-off.svg);
|
|
`
|
|
)};
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
width: 36px;
|
|
height: 22px;
|
|
background-size: cover;
|
|
margin-left: 1.5rem;
|
|
`
|
|
: ''}
|
|
`
|
|
|
|
export const Wrapper = styled.div`
|
|
margin-right: 2.45rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
@media screen and (orientation: portrait) {
|
|
/* width: 30%; */
|
|
height: 50px;
|
|
/* top: 130px; */
|
|
/* position: absolute; */
|
|
/* right: -10px;
|
|
width: 95vw;
|
|
bottom: -90px; */
|
|
}
|
|
@media screen and (orientation: landscape) {
|
|
display: none
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|