diff options
| author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-18 05:29:46 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-18 05:29:46 +0800 |
| commit | 37e5a8a8b7f841f5714cb90e0d9429ea80bf9009 (patch) | |
| tree | 6fae88328ece09da6b943daf823926e8a4ad86aa | |
| parent | 592c1715571be07ca0f28a7f48f62001b45e846a (diff) | |
| download | dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar.gz dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar.bz2 dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar.lz dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar.xz dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.tar.zst dexon-sol-tools-37e5a8a8b7f841f5714cb90e0d9429ea80bf9009.zip | |
Prettify file
| -rw-r--r-- | packages/website/ts/@next/components/definition.tsx | 37 |
1 files changed, 15 insertions, 22 deletions
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 77f837294..da26ee140 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -25,11 +25,7 @@ interface Props { export const Definition = (props: Props) => ( <Wrap {...props}> - <Icon - name={props.icon} - size={props.iconSize || 'medium'} - margin={[0, 0, 'default', 0]} - /> + <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} /> <TextWrap {...props}> <Heading @@ -42,34 +38,28 @@ export const Definition = (props: Props) => ( </Heading> {typeof props.description === 'string' ? ( - <Paragraph isMuted={true}> - {props.description} - </Paragraph> + <Paragraph isMuted={true}>{props.description}</Paragraph> ) : ( - <> - {props.description} - </> + <>{props.description}</> )} - {props.actions && + {props.actions && ( <LinkWrap> {props.actions.map((item, index) => ( - <Button - key={`dlink-${index}`} - href={item.url} - isWithArrow={true} - isAccentColor={true} - > + <Button key={`dlink-${index}`} href={item.url} isWithArrow={true} isAccentColor={true}> {item.label} </Button> ))} </LinkWrap> - } + )} </TextWrap> </Wrap> ); -const Wrap = styled.div<Props>` +const Wrap = + styled.div < + Props > + ` max-width: ${props => props.isInline && '354px'}; & + & { @@ -78,7 +68,7 @@ const Wrap = styled.div<Props>` } @media (min-width: 768px) { - width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'}; + width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')}; display: ${props => props.isInlineIcon && 'flex'}; justify-content: ${props => props.isInlineIcon && 'space-between'}; align-items: ${props => props.isInlineIcon && 'center'}; @@ -94,7 +84,10 @@ const Wrap = styled.div<Props>` } `; -const TextWrap = styled.div<Props>` +const TextWrap = + styled.div < + Props > + ` width: 100%; max-width: 560px; |