Showing
1 changed file
with
35 additions
and
0 deletions
1 | +import React from 'react'; | ||
2 | +import styled from 'styled-components'; | ||
3 | +import { dropdownHeaderColorMap } from '../../lib/styles/palette'; | ||
4 | + | ||
5 | +const DropDownBlock = styled.div` | ||
6 | + margin: 0 auto; | ||
7 | + float: ${props => props.float || ''}; | ||
8 | +`; | ||
9 | + | ||
10 | +const DropDownHeader = styled.button` | ||
11 | + margin-bottom: 0.8em; | ||
12 | + padding: 0.4em; | ||
13 | + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); | ||
14 | + font-weight: 500; | ||
15 | + font-size: ${props => props.size}; | ||
16 | + border: 2px solid ${props => dropdownHeaderColorMap[props.color].borderColor}; | ||
17 | + color: ${props => dropdownHeaderColorMap[props.color].color}; | ||
18 | + background-color: ${props => dropdownHeaderColorMap[props.color].background}; | ||
19 | + &:hover { | ||
20 | + background-color: ${props => | ||
21 | + dropdownHeaderColorMap[props.color].hoverBackground}; | ||
22 | + } | ||
23 | +`; | ||
24 | + | ||
25 | +const DropDown = ({ children, float, color, size }) => { | ||
26 | + return ( | ||
27 | + <DropDownBlock float={float} color={color} size={size}> | ||
28 | + <DropDownHeader color={color} size={size}> | ||
29 | + {children} | ||
30 | + </DropDownHeader> | ||
31 | + </DropDownBlock> | ||
32 | + ); | ||
33 | +}; | ||
34 | + | ||
35 | +export default DropDown; |
-
Please register or login to post a comment