GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

button size and focus state changes

Browse Source
This commit is contained in:
domyen 2020-06-17 20:45:26 -04:00
parent cf628a9a5a
commit 12b70f3e09
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/components/src/Button/Button.tsx
View File

@ -25,7 +25,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
cursor: 'pointer',
display: 'inline-block',
overflow: 'hidden',
padding: small ? '10px 16px' : '13px 20px',
padding: small ? '8px 16px' : '13px 20px',
position: 'relative',
textAlign: 'center',
textDecoration: 'none',
@ -105,7 +105,8 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset',
},
'&:focus': {
boxShadow: `${rgba(color, 0.4)} 0 1px 9px 2px`,
boxShadow: `${rgba(gray ? theme.color.secondary : color, 0.4)} 0 1px 9px 2px`,
outline: 'none',
},
'&:focus:hover': {
boxShadow: `${rgba(color, 0.2)} 0 8px 18px 0px`,
@ -139,7 +140,8 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
background: theme.input.background,
},
'&:focus': {
boxShadow: `${rgba(theme.color.secondary, 0.4)} 0 0 0 1px inset`,
boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
outline: 'none',
},
}
: {},
@ -150,8 +152,9 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
color: transparentize(0.3, theme.color.defaultText),
background: 'transparent',
'&:hover': {
'&:hover, &:focus': {
boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
outline: 'none',
},
'&:active': {