stacked ListItem

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

View File

@ -15,14 +15,25 @@ 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
? paper
: props.collapsed && props.headed
? boxes.bottomShaddowDarker ? boxes.bottomShaddowDarker
: boxes.bottomShaddow; : boxes.bottomShaddow;

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>
)); ));