|
| 1 | +import styled, { |
| 2 | + StyledComponent, |
| 3 | + StyledComponentInnerOtherProps, |
| 4 | +} from 'styled-components'; |
| 5 | +import css from '@styled-system/css'; |
| 6 | + |
| 7 | +export const Container = styled.div( |
| 8 | + css({ |
| 9 | + '.tippy-content': { |
| 10 | + width: '200px', |
| 11 | + backgroundColor: 'grays.500', |
| 12 | + border: '1px solid', |
| 13 | + borderColor: 'grays.600', |
| 14 | + padding: 4, |
| 15 | + borderRadius: 'medium', |
| 16 | + whiteSpace: 'normal', |
| 17 | + }, |
| 18 | + }) |
| 19 | +); |
| 20 | + |
| 21 | +export const Element = styled.div<{ |
| 22 | + margin?: number; |
| 23 | + marginX?: number; |
| 24 | + marginBottom?: number; |
| 25 | +}>(props => |
| 26 | + css({ |
| 27 | + margin: props.margin || null, |
| 28 | + marginX: props.marginX || null, |
| 29 | + marginBottom: props.marginBottom || null, |
| 30 | + }) |
| 31 | +); |
| 32 | + |
| 33 | +export const Text = styled(Element)<{ |
| 34 | + color?: string; |
| 35 | + size?: string; |
| 36 | + align?: string; |
| 37 | +}>(props => |
| 38 | + css({ |
| 39 | + color: props.color || 'white', |
| 40 | + fontSize: props.size || 'inherit', |
| 41 | + textAlign: props.align || 'left', |
| 42 | + }) |
| 43 | +); |
| 44 | + |
| 45 | +export const Link = styled.a( |
| 46 | + css({ |
| 47 | + color: 'blues.300', |
| 48 | + textDecoration: 'none', |
| 49 | + }) |
| 50 | +); |
| 51 | + |
| 52 | +export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) => |
| 53 | + css({ |
| 54 | + width: '100%', |
| 55 | + backgroundColor: 'grays.800', |
| 56 | + color: 'white', |
| 57 | + borderColor: 'grays.600', |
| 58 | + padding: 2, |
| 59 | + height: 24, |
| 60 | + boxSizing: 'border-box', |
| 61 | + fontFamily: 'body', |
| 62 | + transition: 'background', |
| 63 | + transitionDuration: theme.speeds[2], |
| 64 | + ':hover': { |
| 65 | + backgroundColor: 'grays.700', |
| 66 | + }, |
| 67 | + ':disabled': { |
| 68 | + opacity: 0.5, |
| 69 | + cursor: 'not-allowed', |
| 70 | + ':hover': { |
| 71 | + backgroundColor: 'grays.800', |
| 72 | + }, |
| 73 | + }, |
| 74 | + }) |
| 75 | +) as StyledComponent< |
| 76 | + 'select', |
| 77 | + any, |
| 78 | + StyledComponentInnerOtherProps<typeof Element> |
| 79 | +>; |
0 commit comments