Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/PrimaryButton.js
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
const PrimaryButton = styled.button` | const PrimaryButton = styled.button` | ||||
border: none; | border: 2px solid ${props => props.theme.eCashBlue}; | ||||
color: ${props => props.theme.buttons.primary.color}; | color: ${props => props.theme.buttons.primary.color}; | ||||
background-image: ${props => props.theme.buttons.primary.backgroundImage}; | background: none; | ||||
font-weight: bold; | |||||
background-color: ${props => props.theme.eCashBlue}; | |||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
background-size: 200% auto; | background-size: 200% auto; | ||||
font-size: 18px; | font-size: 18px; | ||||
width: 100%; | width: 100%; | ||||
padding: 20px 0; | padding: 20px 0; | ||||
border-radius: 4px; | border-radius: 0px; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
cursor: pointer; | cursor: pointer; | ||||
:hover { | :hover { | ||||
background-position: right center; | background-position: right center; | ||||
-webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | -webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
-moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | -moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
} | } | ||||
Show All 35 Lines | |||||
const SmartButton = styled.button` | const SmartButton = styled.button` | ||||
${({ disabled = false, ...props }) => | ${({ disabled = false, ...props }) => | ||||
disabled === true | disabled === true | ||||
? ` | ? ` | ||||
background-image: 'none'; | background-image: 'none'; | ||||
color: ${props.theme.buttons.secondary.color}; | color: ${props.theme.buttons.secondary.color}; | ||||
background: ${props.theme.buttons.secondary.background}; | background: ${props.theme.buttons.secondary.background}; | ||||
:hover { | opacity: 0.3; | ||||
-webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
-moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
} | |||||
svg { | svg { | ||||
fill: ${props.theme.buttons.secondary.color}; | fill: ${props.theme.buttons.secondary.color}; | ||||
} | } | ||||
` | ` | ||||
: ` | : ` | ||||
background-image: ${props.theme.buttons.primary.backgroundImage}; | opacity: 1; | ||||
color: ${props.theme.buttons.primary.color}; | background-image: 'none'; | ||||
:hover { | color: ${props.theme.buttons.secondary.color}; | ||||
background-position: right center; | background: ${props.theme.buttons.secondary.background}; | ||||
-webkit-box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
-moz-box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
} | |||||
svg { | svg { | ||||
fill: ${props.theme.buttons.primary.color}; | fill: ${props.theme.buttons.secondary.color}; | ||||
} | } | ||||
`} | `} | ||||
border: none; | border: none; | ||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
font-size: 18px; | font-size: 18px; | ||||
width: 100%; | width: 100%; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
Show All 13 Lines |