added cards

addon/components/paper-card-content.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import FlexMixin from '../mixins/flex-mixin';
+
+export default Ember.Component.extend(FlexMixin, {
+  tagName:'md-card-content',
+  classNames:['paper-card-content']
+});

addon/components/paper-card.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import FlexMixin from '../mixins/flex-mixin';
+
+export default Ember.Component.extend(FlexMixin, {
+  tagName:'md-card',
+  classNames:['paper-card']
+});

addon/components/paper-content.js

@@ -3,5 +3,5 @@ import FlexMixin from '../mixins/flex-mixin';
 
 export default Ember.Component.extend(FlexMixin, {
   tagName:'md-content',
-  classNames:['md-content']
+  classNames:['paper-content']
 });

addon/styles/scss/main.scss

@@ -47,6 +47,7 @@
 @import 'layout';
 
 @import 'paper-content';
+@import 'paper-card';
 @import 'paper-button';
 @import 'paper-checkbox';
 @import 'paper-radio';

addon/styles/scss/paper-card.scss

@@ -0,0 +1,35 @@
+$card-margin: 8px !default;
+$card-padding: 16px !default;
+$card-box-shadow: $whiteframe-shadow-z1 !default;
+
+md-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin: $card-margin;
+
+  box-shadow: $card-box-shadow;
+
+  > img,
+  > :not(md-card-content) img {
+    order: 0;
+    width: 100%;
+  }
+
+  md-card-content {
+    order: 1;
+    padding: $card-padding;
+  }
+}
+
+// THEME
+
+$card-border-radius: 2px !default;
+
+md-card.md-#{$theme-name}-theme {
+  border-radius: $card-border-radius;
+
+  .md-card-image {
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+}

addon/styles/scss/paper-content.scss

@@ -22,7 +22,7 @@ md-content {
 }
 
 @media (min-width: $layout-breakpoint-sm) {
-  .md-content.md-padding {
+  md-content.md-padding {
     padding: 16px;
   }
 }

app/components/paper-card-content.js

@@ -0,0 +1,3 @@
+import PaperCardContent from 'ember-paper/components/paper-card-content';
+
+export default PaperCardContent;

app/components/paper-card.js

@@ -0,0 +1,3 @@
+import PaperCard from 'ember-paper/components/paper-card';
+
+export default PaperCard;

tests/dummy/app/index.html

@@ -5,7 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>ember-paper - The Ember approach to Material Design.</title>
     <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     {{content-for 'head'}}
 

tests/dummy/app/router.js

@@ -8,6 +8,7 @@ var Router = Ember.Router.extend({
 Router.map(function() {
   this.route('introduction');
   this.route('button');
+  this.route('card');
   this.route('checkbox');
   this.route('radio');
   this.route('switch');

tests/dummy/app/styles/app.css

@@ -88,3 +88,8 @@ body {
   min-width:200px;
   text-align:center;
 }
+
+.doc-content {
+  max-width: 864px;
+  margin: auto;
+}

tests/dummy/app/templates/application.hbs

@@ -18,6 +18,7 @@
           <li>{{#link-to "typography"}}Typography{{/link-to}}</li>
           <li>{{#link-to "list"}}List{{/link-to}}</li>
           <li>{{#link-to "divider"}}Divider{{/link-to}}</li>
+          <li>{{#link-to "card"}}Card{{/link-to}}</li>
           <li>{{#link-to "button"}}Button{{/link-to}}</li>
           <li>{{#link-to "checkbox"}}Checkbox{{/link-to}}</li>
           <li>{{#link-to "switch"}}Switch{{/link-to}}</li>

tests/dummy/app/templates/card.hbs

@@ -0,0 +1,60 @@
+{{#paper-toolbar}}
+  <h2 class="md-toolbar-tools">
+    {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
+      {{paper-icon icon="menu"}}
+    {{/paper-sidenav-toggle}}
+    <span>Card</span>
+  </h2>
+{{/paper-toolbar}}
+
+{{#paper-content classNames="md-padding"}}
+<div class="doc-content">
+  {{#paper-content classNames="md-whiteframe-z1 list-demo"}}
+    {{#paper-card}}
+      <img src="https://material.angularjs.org/img/washedout.png" alt="Washed Out">
+      {{#paper-card-content}}
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      {{/paper-card-content}}
+    {{/paper-card}}
+    {{#paper-card}}
+      <img src="https://material.angularjs.org/img/washedout.png" alt="Washed Out">
+      {{#paper-card-content}}
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      {{/paper-card-content}}
+    {{/paper-card}}
+    {{#paper-card}}
+      <img src="https://material.angularjs.org/img/washedout.png" alt="Washed Out">
+      {{#paper-card-content}}
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      {{/paper-card-content}}
+    {{/paper-card}}
+  {{/paper-content}}
+
+
+  <h3>Template</h3>
+  <pre>
+  \{{#paper-card}}
+    &lt;img src="https://material.angularjs.org/img/washedout.png" alt="Washed Out"&gt;
+    \{{#paper-card-content}}
+      &lt;h2&gt;Paracosm&lt;/h2&gt;
+      &lt;p&gt;
+        The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+        two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+      &lt;/p&gt;
+    \{{/paper-card-content}}
+  \{{/paper-card}}
+  </pre>
+</div>
+{{/paper-content}}

tests/dummy/app/templates/divider.hbs

@@ -3,7 +3,7 @@
     {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
       {{paper-icon icon="menu"}}
     {{/paper-sidenav-toggle}}
-    <span>Dividers</span>
+    <span>Divider</span>
   </h2>
 {{/paper-toolbar}}