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

91
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,44 +17,51 @@ 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};
&::after { &:disabled {
content: ""; cursor: not-allowed;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
/* transparent by default */
background-color: transparent;
transition: background-color 0.05s ease-in-out;
/* put the overlay behind the text */
z-index: -1;
} }
/* on hover, raise, brighten and shadow */ &:not(:disabled) {
&:hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
&::after { &::after {
background-color: rgba(255, 255, 255, 0.3); content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
/* transparent by default */
background-color: transparent;
transition: background-color 0.05s ease-in-out;
/* put the overlay behind the text */
z-index: -1;
} }
}
/* on click, lower and darken */ /* on hover, raise, brighten and shadow */
&:active { &:hover {
outline: none; transform: translateY(-1px);
box-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
border-color: rgba(0,0,0,0.2);
transform: translateY(0); &::after {
background-color: rgba(255, 255, 255, 0.3);
}
}
&::after { /* on click, lower and darken */
background-color: rgba(0, 0, 0, 0.1); &:active {
outline: none;
box-shadow: none;
border-color: rgba(0,0,0,0.2);
transform: translateY(0);
&::after {
background-color: rgba(0, 0, 0, 0.1);
}
} }
} }
` `
@ -60,21 +69,29 @@ export const StyledButton = styled.button`
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)};
}
` `