roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 20:19:12 +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 * as React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import * as colorHelpers from '../helpers/colors'
export const StyledButton = styled.button` export const StyledButton = styled.button`
/* reset some styles */ /* reset some styles */
box-shadow: none; box-shadow: none;
@ -15,7 +17,13 @@ export const StyledButton = styled.button`
padding: 1em 1.4em; padding: 1em 1.4em;
font-weight: bold; font-weight: bold;
border: 1px solid rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1);
border-radius: ${props => props.theme.button.borderRadius};
&:disabled {
cursor: not-allowed;
}
&:not(:disabled) {
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -55,26 +63,35 @@ export const StyledButton = styled.button`
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
} }
}
` `
StyledButton.defaultProps = { StyledButton.defaultProps = {
theme: { theme: {
actions: { actions: {
primary: '#46b646', primary: '#46b646'
primaryText: '#efefef', },
secondary: '#e95353', button: {
secondaryText: '#efefef' borderRadius: '2px'
} }
} }
} }
export const StyledPrimaryButton = styled(StyledButton)` export const StyledPrimaryButton = styled(StyledButton)`
background-color: ${props => props.theme.actions.primary}; 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 StyledPrimaryButton.defaultProps = StyledButton.defaultProps
export const StyledSecondaryButton = styled(StyledButton)` export const StyledSecondaryButton = styled(StyledButton)`
background-color: ${props => props.theme.actions.secondary}; background-color: transparent;
color: ${props => props.theme.actions.secondaryText}; border-color: transparent;
&:hover {
border-color: ${props => colorHelpers.stepUp(props.theme.actions.primary)};
}
&:active {
border-color: ${props => colorHelpers.stepDown(props.theme.actions.primary)};
}
` `