roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 12:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[design/button]: disabled no longer moves on interactions

Browse source
This commit is contained in:
41666 2019-05-20 06:28:14 -04:00
parent 33dd324708
commit 2cfc1a5831
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
1 changed files with 54 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
packages/roleypoly-design/src/button/styled.tsx
View file

@ -1,6 +1,8 @@
// import * as React from 'react'
import styled from 'styled-components'
import * as colorHelpers from '../helpers/colors'
export const StyledButton = styled.button`
/* reset some styles */
box-shadow: none;
@ -15,7 +17,13 @@ export const StyledButton = styled.button`
padding: 1em 1.4em;
font-weight: bold;
border: 1px solid rgba(0,0,0,0.1);
border-radius: ${props => props.theme.button.borderRadius};
&:disabled {
cursor: not-allowed;
}
&:not(:disabled) {
&::after {
content: "";
position: absolute;
@ -55,26 +63,35 @@ export const StyledButton = styled.button`
background-color: rgba(0, 0, 0, 0.1);
}
}
}
`
StyledButton.defaultProps = {
theme: {
actions: {
primary: '#46b646',
primaryText: '#efefef',
secondary: '#e95353',
secondaryText: '#efefef'
primary: '#46b646'
},
button: {
borderRadius: '2px'
}
}
}
export const StyledPrimaryButton = styled(StyledButton)`
background-color: ${props => props.theme.actions.primary};
color: ${props => props.theme.actions.primaryText};
color: ${props => colorHelpers.textMode(props.theme.actions.primary)};
`
StyledPrimaryButton.defaultProps = StyledButton.defaultProps
export const StyledSecondaryButton = styled(StyledButton)`
background-color: ${props => props.theme.actions.secondary};
color: ${props => props.theme.actions.secondaryText};
background-color: transparent;
border-color: transparent;
&:hover {
border-color: ${props => colorHelpers.stepUp(props.theme.actions.primary)};
}
&:active {
border-color: ${props => colorHelpers.stepDown(props.theme.actions.primary)};
}
`