2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
45aef35b 1 parent 57b7db02

style: size 조정 props 추가

Inline Side-by-side
Showing 1 changed file with 13 additions and 7 deletions
...@@ -10,22 +10,28 @@ const DropDownBlock = styled.div` ...@@ -10,22 +10,28 @@ const DropDownBlock = styled.div`
10 const DropDownHeader = styled.button` 10 const DropDownHeader = styled.button`
11 margin-bottom: 0.8em; 11 margin-bottom: 0.8em;
12 padding: 0.4em; 12 padding: 0.4em;
13 - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 13 + width: ${props => props.width || '100px'};
14 - font-weight: 500; 14 + line-height: ${props => props.height || '30px'};
15 - font-size: ${props => props.size}; 15 + padding-right: 30px;
16 - border: 2px solid ${props => dropdownHeaderColorMap[props.color].borderColor}; 16 + font-size: ${props => props.fontsize || '20px'};
17 color: ${props => dropdownHeaderColorMap[props.color].color}; 17 color: ${props => dropdownHeaderColorMap[props.color].color};
18 background-color: ${props => dropdownHeaderColorMap[props.color].background}; 18 background-color: ${props => dropdownHeaderColorMap[props.color].background};
19 &:hover { 19 &:hover {
20 background-color: ${props => 20 background-color: ${props =>
21 dropdownHeaderColorMap[props.color].hoverBackground}; 21 dropdownHeaderColorMap[props.color].hoverBackground};
22 } 22 }
23 + border: 1px ${props => dropdownHeaderColorMap[props.color].background};
23 `; 24 `;
24 25
25 -const DropDown = ({ children, float, color, size }) => { 26 +const DropDown = ({ children, float, color, fontsize, width, height }) => {
26 return ( 27 return (
27 - <DropDownBlock float={float} color={color} size={size}> 28 + <DropDownBlock float={float} color={color}>
28 - <DropDownHeader color={color} size={size}> 29 + <DropDownHeader
30 + color={color}
31 + fontsize={fontsize}
32 + width={width}
33 + height={height}
34 + >
29 {children} 35 {children}
30 </DropDownHeader> 36 </DropDownHeader>
31 </DropDownBlock> 37 </DropDownBlock>
......