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 styled from 'styled-components'
import * as colorHelpers from '../helpers/colors'
export const StyledButton = styled.button`
/* reset some styles */
box-shadow: none;
@ -15,44 +17,51 @@ 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};
&::after {
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;
&:disabled {
cursor: not-allowed;
}
/* on hover, raise, brighten and shadow */
&:hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
&:not(:disabled) {
&::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 */
&:active {
outline: none;
box-shadow: none;
border-color: rgba(0,0,0,0.2);
/* on hover, raise, brighten and shadow */
&:hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transform: translateY(0);
&::after {
background-color: rgba(255, 255, 255, 0.3);
}
}
&::after {
background-color: rgba(0, 0, 0, 0.1);
/* on click, lower and darken */
&: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 = {
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)};
}
`