diff --git a/src/common-elements/schema.ts b/src/common-elements/schema.ts index 7f82805d..d422ba57 100644 --- a/src/common-elements/schema.ts +++ b/src/common-elements/schema.ts @@ -1,9 +1,8 @@ import styled from '../styled-components'; +import { darken } from 'polished'; -export const OneOfList = styled.ul` +export const OneOfList = styled.div` margin: 0 0 3px 0; - padding: 0; - list-style: none; display: inline-block; `; @@ -15,7 +14,7 @@ export const OneOfLabel = styled.span` } `; -export const OneOfButton = styled.li<{ active: boolean }>` +export const OneOfButton = styled.button<{ active: boolean }>` display: inline-block; margin-right: 10px; margin-bottom: 5px; @@ -23,12 +22,21 @@ export const OneOfButton = styled.li<{ active: boolean }>` cursor: pointer; border: 1px solid ${props => props.theme.colors.primary.main}; padding: 2px 10px; + line-height: 1.5em; + outline: none; + &:focus { + box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main}; + } ${props => { if (props.active) { return ` color: white; background-color: ${props.theme.colors.primary.main}; + &:focus { + box-shadow: none; + background-color: ${darken(0.15, props.theme.colors.primary.main)}; + } `; } else { return `