mirror of
https://github.com/yldio/copilot.git
synced 2024-12-01 07:30:07 +02:00
stacked ListItem
This commit is contained in:
parent
71ff28841a
commit
eb8cc3bb48
@ -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;
|
||||||
|
|
||||||
|
@ -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>
|
||||||
));
|
));
|
||||||
|
Loading…
Reference in New Issue
Block a user