From c2a90875b8bfddc601ff9b1d936e66363ec0c2bc Mon Sep 17 00:00:00 2001
From: chadrien <chadrien@chadrien.fr>
Date: Thu, 23 Apr 2015 13:47:33 +0200
Subject: [PATCH] Added card component

---
 src/js/card.jsx               | 44 +++++++++++++++++++++++++++++++++++
 src/less/components/card.less | 44 +++++++++++++++++++++++------------
 2 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 src/js/card.jsx

diff --git a/src/js/card.jsx b/src/js/card.jsx
new file mode 100644
index 00000000000000..fbe19db8ef13fe
--- /dev/null
+++ b/src/js/card.jsx
@@ -0,0 +1,44 @@
+var React = require('react'),
+  Paper = require('./paper');
+
+module.exports = React.createClass({
+    propTypes: {
+        title: React.PropTypes.string,
+        actions: React.PropTypes.string,
+        zDepth: React.PropTypes.oneOf([0,1,2,3,4,5])
+    },
+
+    getDefaultProps: function() {
+        return {
+            zDepth: 1
+        };
+    },
+
+    render: function () {
+        var classes = [
+            this.props.className,
+            'mui-card',
+            'mui-z-depth-' + this.props.zDepth
+        ].join(' ');
+
+        var cardTitle;
+        if (this.props.title) {
+            cardTitle = <div className="mui-card-title">{this.props.title}</div>
+        }
+
+        var actions;
+        if (this.props.actions) {
+            actions = <div className="mui-card-actions">{this.props.actions}</div>
+        }
+
+        return (
+            <div className={classes}>
+                <div className="mui-card-content">
+                    {cardTitle}
+                    {this.props.children}
+                </div>
+                {actions}
+            </div>
+        );
+    }
+});
diff --git a/src/less/components/card.less b/src/less/components/card.less
index 73544da29fb9dc..0ccd088dee4e24 100644
--- a/src/less/components/card.less
+++ b/src/less/components/card.less
@@ -1,20 +1,34 @@
 .mui-card {
-  @card-padding: 24px;
+  padding: 0;
 
-  background-color: @white;
-  padding: @card-padding;
-  //.border-radius;
+  &.mui-z-depth-1 {
+    &:extend(.mui-paper.mui-z-depth-1);
+  }
+  &.mui-z-depth-2 {
+    &:extend(.mui-paper.mui-z-depth-2);
+  }
+  &.mui-z-depth-3 {
+    &:extend(.mui-paper.mui-z-depth-3);
+  }
+  &.mui-z-depth-4 {
+    &:extend(.mui-paper.mui-z-depth-4);
+  }
+  &.mui-z-depth-5 {
+    &:extend(.mui-paper.mui-z-depth-5);
+  }
+
+  .mui-card-content {
+    padding: 24px;
+
+    .mui-card-title {
+      font-size: 24px;
+      font-weight: 300;
+      margin-bottom: 10px;
+    }
+  }
 
-  .mui-card-toolbar {
-    margin-top: (@card-padding * -1);
-    margin-left: (@card-padding * -1);
-    margin-right: (@card-padding * -1);
-    margin-bottom: @card-padding;
-    //border-bottom: solid 1px @border-color;
-    line-height: 56px;
-    height: 56px;
-    padding-left: @card-padding;
-    padding-right: @card-padding;
-    .mui-font-style-menu;
+  .mui-card-actions {
+    border-top: 1px solid rgba(160, 160, 160, 0.2);
+    padding: 10px;
   }
 }