From eb8cc3bb48426b47d8cd7a3a34e101e182995a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Mon, 9 Jan 2017 20:33:32 +0000
Subject: [PATCH] stacked ListItem

---
 ui/src/components/list/item.js | 19 +++++++++++++++----
 ui/stories/index.js            | 19 +++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js
index bf6670f5..a962efa7 100644
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@@ -15,16 +15,27 @@ const {
 } = fns;
 
 const {
-  default: styled
+  default: styled,
+  css
 } = 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
   ? remcalc(48)
   : remcalc(126);
 
-const shadow = (props) => props.collapsed && props.headed
-  ? boxes.bottomShaddowDarker
-  : boxes.bottomShaddow;
+const shadow = (props) => props.stacked
+  ? paper
+  : props.collapsed && props.headed
+    ? boxes.bottomShaddowDarker
+    : boxes.bottomShaddow;
 
 const Item = styled(Row)`
   position: relative;
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 2e96c2bc..a45462d9 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -618,4 +618,23 @@ storiesOf('ListItem', module)
         </ListItemView>
       </ListItem>
     </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>
   ));