diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-10 00:54:55 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-10 00:54:55 +0800 |
commit | fb3605026ef63ef6897010a52bf3f4c116cdf271 (patch) | |
tree | af3887e5f785e049daeaf795e0f3e4a9ad370d93 /packages/dev-tools-pages/ts/components/list.tsx | |
parent | 76dde294f10bb3d5c1074cd6599668bcb1cdd8ec (diff) | |
parent | 5b8c9122a292f6558c45440b053ceae52d36d495 (diff) | |
download | dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.gz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.bz2 dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.lz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.xz dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.tar.zst dexon-0x-contracts-fb3605026ef63ef6897010a52bf3f4c116cdf271.zip |
Merge branch 'development' into feature/instant/tell-amount-available
Diffstat (limited to 'packages/dev-tools-pages/ts/components/list.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/list.tsx | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx new file mode 100644 index 000000000..ffa7c1cf3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/list.tsx @@ -0,0 +1,50 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { media } from 'ts/variables'; + +const StyledList = styled.ul` + list-style-type: none; + margin: 0; + padding: 0; + position: relative; +`; + +const StyledItem = styled.li` + position: relative; + padding-left: 1.625rem; + + :before { + content: ''; + border: 1px solid black; + width: 0.625rem; + height: 0.625rem; + display: inline-block; + position: absolute; + margin-top: 2px; + top: 0.3125rem; + left: 0; + transform: rotate(45deg); + } + :not(:last-child) { + margin-bottom: 0.5625rem; + ${media.small` + margin-bottom: 0.375rem; + `}; + } +`; + +interface ListProps { + items?: []; +} + +const List: React.StatelessComponent<ListProps> = props => ( + <StyledList> + {props.children !== undefined + ? props.children + : _.map(props.items, (bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)} + </StyledList> +); + +export { List, StyledItem as ListItem }; |