57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
|
import styled from 'styled-components'
|
||
|
|
import { colours, screenSizes } from '../../assets/theme'
|
||
|
|
|
||
|
|
export const Box = styled.div`
|
||
|
|
position: fixed;
|
||
|
|
bottom: ${props => props.isMinimized ? 0 : '2em'};
|
||
|
|
right: ${props => props.isMinimized ? 0 : '2em'};
|
||
|
|
background-color: ${colours.white};
|
||
|
|
padding: ${props => props.isMinimized ? '0.2em 0.2em' : '0.5em 0.5em'};
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
label {
|
||
|
|
display: inline-block;
|
||
|
|
margin-bottom: ${props => props.isMinimized ? 0 : '0.5em'};
|
||
|
|
margin-right: ${props => props.isMinimized ? '0.5em' : 0};
|
||
|
|
font-size: ${props => props.isMinimized ? '15' : '21'}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.xs}px) {
|
||
|
|
bottom: 0em;
|
||
|
|
right: 0em;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
export const Img = styled.div`
|
||
|
|
background: url(${({ src }) => src});
|
||
|
|
width: 16vw;
|
||
|
|
padding-bottom: calc((9 / 16) * 100%);
|
||
|
|
background-size: cover;
|
||
|
|
position: relative;
|
||
|
|
background-position: center;
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.xl}px) {
|
||
|
|
width: 20vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.lg}px) {
|
||
|
|
width: 25vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.md}px) {
|
||
|
|
width: 33vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.sm}px) {
|
||
|
|
width: 50vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: ${screenSizes.xs}px) {
|
||
|
|
width: 60vw;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
export const Iframe = styled.iframe`
|
||
|
|
width: 20vw;
|
||
|
|
height: 11.2vw;
|
||
|
|
`
|