Browse Source

Focus state for Button outline

master
meriadec 7 years ago
parent
commit
0b3f75e096
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 26
      src/components/base/Button/index.js

26
src/components/base/Button/index.js

@ -69,15 +69,23 @@ const buttonStyles: { [_: string]: Style } = {
`,
},
outline: {
default: p => `
background: transparent;
border: 1px solid ${
p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
};
color: ${
p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet
};
`,
default: p => {
const c = p.outlineColor
? p.theme.colors[p.outlineColor] || p.outlineColor
: p.theme.colors.wallet
return `
background: transparent;
border: 1px solid ${c};
color: ${c};
box-shadow: ${
p.isFocused
? `
0 0 0 1px ${darken(c, 0.3)} inset,
0 0 0 4px ${rgba(c, 0.3)};`
: ''
}
`
},
active: p => `
color: ${darken(
p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet,

Loading…
Cancel
Save