mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00
Code Issues Releases Wiki Activity

stacked ListItem

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-09 20:33:32 +00:00
parent 71ff28841a
commit eb8cc3bb48
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/components/list/item.js
View File

@ -15,16 +15,27 @@ const {
} = fns; } = fns;
const { const {
default: styled default: styled,
css
} = Styled; } = Styled;
const paper = `
0 8px 0 -5px #fafafa,
0 8px 1px -4px ${colors.borderSecondary},
0 16px 0 -10px #fafafa,
0 16px 1px -9px ${colors.borderSecondary},
0 18px 1px -11px ${colors.borderSecondary};
`;
const height = (props) => props.collapsed const height = (props) => props.collapsed
? remcalc(48) ? remcalc(48)
: remcalc(126); : remcalc(126);
const shadow = (props) => props.collapsed && props.headed const shadow = (props) => props.stacked
? boxes.bottomShaddowDarker ? paper
: boxes.bottomShaddow; : props.collapsed && props.headed
? boxes.bottomShaddowDarker
: boxes.bottomShaddow;
const Item = styled(Row)` const Item = styled(Row)`
position: relative; position: relative;

19
ui/stories/index.js
View File

@ -618,4 +618,23 @@ storiesOf('ListItem', module)
</ListItemView> </ListItemView>
</ListItem> </ListItem>
</Base> </Base>
))
.add('stacked', () => (
<Base>
<ListItem stacked>
<ListItemView>
<ListItemMeta>
<ListItemTitle>Nginx 01</ListItemTitle>
<ListItemSubTitle>4 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
<ListItemOptions>
…
</ListItemOptions>
</ListItem>
</Base>
)); ));