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.
50 lines
1017 B
50 lines
1017 B
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { devices } from 'config/devices'
|
|
|
|
const baseButtonStyles = css`
|
|
width: 272px;
|
|
height: 48px;
|
|
border-width: 0.7px;
|
|
border-style: solid;
|
|
border-radius: 2px;
|
|
padding: 0 12px;
|
|
|
|
font-style: normal;
|
|
font-size: 20px;
|
|
outline-color: white;
|
|
`
|
|
|
|
export const outlineButtonStyles = css`
|
|
${baseButtonStyles}
|
|
|
|
padding-top: 8.6px;
|
|
padding-bottom: 10.6px;
|
|
color: ${({ theme: { colors } }) => colors.secondary};
|
|
font-weight: normal;
|
|
border-color: ${({ theme: { colors } }) => colors.secondary};
|
|
background: transparent;
|
|
`
|
|
|
|
export const solidButtonStyles = css`
|
|
${baseButtonStyles}
|
|
|
|
color: #fff;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
border-color: transparent;
|
|
background: ${({ theme: { colors } }) => colors.primary};
|
|
|
|
@media ${devices.mobile} {
|
|
width: 335px;
|
|
height: 40px;
|
|
}
|
|
`
|
|
|
|
export const ButtonSolid = styled.button`
|
|
${solidButtonStyles}
|
|
`
|
|
|
|
export const ButtonOutline = styled.button`
|
|
${outlineButtonStyles}
|
|
`
|
|
|