Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash/components/atoms/styles.js
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
export const Container = styled.div` | export const Container = styled.div` | ||||
width: 100%; | width: 100%; | ||||
max-width: ${props => (props.narrow ? '900px' : '1500px')}; | |||||
margin: auto; | margin: auto; | ||||
max-width: 1500px; | |||||
padding: 0 50px; | padding: 0 50px; | ||||
${props => props.theme.breakpoint.medium} { | ${props => props.theme.breakpoint.medium} { | ||||
padding: 0 20px; | padding: 0 20px; | ||||
} | } | ||||
`; | `; | ||||
export const ThemeSwitch = styled.div` | export const ThemeSwitch = styled.div` | ||||
position: fixed; | position: fixed; | ||||
bottom: 30px; | bottom: 30px; | ||||
width: 40px; | width: 40px; | ||||
height: 40px; | height: 40px; | ||||
z-index: 9999; | z-index: 9999; | ||||
background: rgba(255, 255, 255, 0.1); | background: rgba(255, 255, 255, 0.1); | ||||
right: 30px; | right: 30px; | ||||
`; | `; | ||||
export const CenterImage = styled.div` | |||||
position: relative; | |||||
width: 100%; | |||||
height: ${props => props.height}; | |||||
${props => props.theme.filters.grayscale} | |||||
img { | |||||
object-fit: contain; | |||||
} | |||||
${props => props.theme.breakpoint.medium} { | |||||
height: calc(${props => props.height} / 2); | |||||
} | |||||
`; | |||||
export const GradientSpacer = styled.div` | |||||
height: 100px; | |||||
width: 100%; | |||||
background-image: linear-gradient( | |||||
180deg, | |||||
${props => props.theme.colors.darkBlue}, | |||||
${props => props.theme.colors.darkBackground} | |||||
); | |||||
margin-bottom: 80px; | |||||
`; |