starting card tests

dist/css/ionic-ios7.css

@@ -2036,16 +2036,18 @@ a.button {
   color: #3a87ad; }
 
 .card {
-  margin: 10px;
+  overflow: hidden;
+  margin: 20px 10px;
   border: none;
   border-radius: 2px;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666; }
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
 
 .card-header {
   padding: 10px;
-  border-bottom: 1px solid #dddddd;
+  border-top-left-radius: 2px;
-  background-color: #eeeeee; }
+  border-top-right-radius: 2px;
+  background-color: whitesmoke; }
   .card-header.card-header-secondary {
     background-color: whitesmoke; }
   .card-header.card-header-primary {
@@ -2066,8 +2068,9 @@ a.button {
 
 .card-footer {
   padding: 10px;
-  border-top: 1px solid #dddddd;
+  border-bottom-right-radius: 2px;
-  background-color: #eeeeee; }
+  border-bottom-left-radius: 2px;
+  background-color: whitesmoke; }
 
 .slide-in-up {
   opacity: 0;
@@ -2237,7 +2240,7 @@ a.button {
   -moz-animation: spin 0.75s linear infinite;
   animation: spin 0.75s linear infinite; }
   .icon-loading:before {
-    content: "\e036"; }
+    content: "\e144"; }
 
 .icon-refreshing {
   font-family: 'ionicons';
@@ -2252,7 +2255,7 @@ a.button {
   -moz-animation: spin 0.75s linear infinite;
   animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
-    content: "\e036"; }
+    content: "\e144"; }
 
 .hidden,
 .hide {

dist/css/ionic-scoped.css

@@ -2712,15 +2712,17 @@
   .ionic .alert-info h4 {
     color: #3a87ad; }
   .ionic .card {
-    margin: 10px;
+    overflow: hidden;
+    margin: 20px 10px;
     border: none;
     border-radius: 2px;
     background-color: white;
-    box-shadow: inset 0 0 1px #666666; }
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
   .ionic .card-header {
     padding: 10px;
-    border-bottom: 1px solid #dddddd;
+    border-top-left-radius: 2px;
-    background-color: #eeeeee; }
+    border-top-right-radius: 2px;
+    background-color: whitesmoke; }
     .ionic .card-header.card-header-secondary {
       background-color: whitesmoke; }
     .ionic .card-header.card-header-primary {
@@ -2739,8 +2741,9 @@
     padding: 10px; }
   .ionic .card-footer {
     padding: 10px;
-    border-top: 1px solid #dddddd;
+    border-bottom-right-radius: 2px;
-    background-color: #eeeeee; }
+    border-bottom-left-radius: 2px;
+    background-color: whitesmoke; }
   .ionic .slide-in-up {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
@@ -2854,7 +2857,7 @@
     -moz-animation: spin 0.75s linear infinite;
     animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
-      content: "\e036"; }
+      content: "\e144"; }
   .ionic .icon-refreshing {
     font-family: 'ionicons';
     speak: none;
@@ -2868,7 +2871,7 @@
     -moz-animation: spin 0.75s linear infinite;
     animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
-      content: "\e036"; }
+      content: "\e144"; }
   .ionic .hidden,
   .ionic .hide {
     display: none !important; }

dist/css/ionic.css

@@ -3257,16 +3257,18 @@ a.button {
   color: #3a87ad; }
 
 .card {
-  margin: 10px;
+  overflow: hidden;
+  margin: 20px 10px;
   border: none;
   border-radius: 2px;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666; }
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
 
 .card-header {
   padding: 10px;
-  border-bottom: 1px solid #dddddd;
+  border-top-left-radius: 2px;
-  background-color: #eeeeee; }
+  border-top-right-radius: 2px;
+  background-color: whitesmoke; }
   .card-header.card-header-secondary {
     background-color: whitesmoke; }
   .card-header.card-header-primary {
@@ -3287,8 +3289,9 @@ a.button {
 
 .card-footer {
   padding: 10px;
-  border-top: 1px solid #dddddd;
+  border-bottom-right-radius: 2px;
-  background-color: #eeeeee; }
+  border-bottom-left-radius: 2px;
+  background-color: whitesmoke; }
 
 .slide-box {
   background-color: #000;
@@ -3509,7 +3512,7 @@ a.button {
   -moz-animation: spin 0.75s linear infinite;
   animation: spin 0.75s linear infinite; }
   .icon-loading:before {
-    content: "\e036"; }
+    content: "\e144"; }
 
 .icon-refreshing {
   font-family: 'ionicons';
@@ -3524,7 +3527,7 @@ a.button {
   -moz-animation: spin 0.75s linear infinite;
   animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
-    content: "\e036"; }
+    content: "\e144"; }
 
 .hidden,
 .hide {

scss/ionic/_card.scss

@@ -3,18 +3,22 @@
 // --------------------------------------------------
 
 .card {
-  margin: $content-padding;
+  overflow: hidden;
+  margin: ($content-padding * 2) $content-padding;
   border: none;
+  //border: $card-border-width solid $card-border-color;
   border-radius: $card-border-radius;
-
   background-color: $card-body-bg;
-  box-shadow: inset 0 0 $card-border-width #666;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
 }
 
 .card-header {
   padding: $card-padding;
-  border-bottom: $card-border-width solid $card-border-color;
+  //border-bottom: $card-border-width solid $card-border-color;
+  border-top-left-radius: $card-border-radius;
+  border-top-right-radius: $card-border-radius;
   background-color: $card-header-bg;
+  
 
   &.card-header-secondary { background-color: $brand-secondary; }
   &.card-header-primary { background-color: $brand-primary; }
@@ -31,6 +35,8 @@
 
 .card-footer {
   padding: $card-padding;
-  border-top: $card-border-width solid $card-border-color;
+  //border-top: $card-border-width solid $card-border-color;
+  border-bottom-right-radius: $card-border-radius;
+  border-bottom-left-radius: $card-border-radius;
   background-color: $card-footer-bg;
 }

scss/ionic/_icons.scss

@@ -66,7 +66,7 @@
   animation:spin .75s linear infinite;
 
   &:before {
-    content: "\e036";
+    content: "\e144";
   }
 }
 
@@ -85,6 +85,6 @@
   animation:spin .75s linear infinite;
 
   &:before {
-    content: "\e036";
+    content: "\e144";
   }
 }

scss/ionic/_variables.scss

@@ -406,12 +406,12 @@ $menu-animation-speed:     200ms;
 // Cards
 // -------------------------------
 
-$card-header-bg:            #eee;
+$card-header-bg:            #F5F5F5;
 $card-body-bg:              #fff;
-$card-footer-bg:            #eee;
+$card-footer-bg:            #F5F5F5;
 $card-padding:              10px !default;
 $card-border-width:         1px !default;
-$card-border-color:         #ddd;
+$card-border-color:         #ccc;
 $card-border-radius:        2px !default;
 
 

test/cards.html

@@ -15,31 +15,105 @@
         <h1 class="title">Cards</h1>
       </header>
 
-      <main class="content padding has-header">
+      <main class="content has-header" style="background:#F8F8F8">
         
         <div class="card">
-          <div class="card-header">
-            Card Header
-          </div>
           <div class="card-body">
-            Card Body
+            This is a basic Card with some text.
-          </div>
-          <div class="card-footer">
-            Card Footer
           </div>
         </div>
         
         <div class="card">
           <div class="card-header">
-            Card Header
+            I'm a Header in a Card!
           </div>
           <div class="card-body">
-            Card Body
+            This is a basic Card with some text.
+          </div>
+        </div>
+        
+        <div class="card">
+          <div class="card-header">
+            I'm a Header in a Card!
+          </div>
+          <div class="card-body">
+            This is a basic Card with some text.
           </div>
           <div class="card-footer">
-            Card Footer
+            I'm a Footer in a Card!
           </div>
         </div>
+        
+        <div class="card">
+          <div class="card-header">
+            I'm a Header in a Card!
+          </div>
+          <div class="card-body">
+            This is a basic Card with some text.
+          </div>
+          <div class="card-footer">
+            I'm a Footer in a Card!
+          </div>
+        </div>
+
+        <div class="list card">
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-home"></i>
+              Enter home address
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-ios7-telephone"></i>
+              Enter phone number
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-wifi"></i>
+              Enter wireless password
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-card"></i>
+              Enter card information
+            </div>
+          </a>
+
+        </div>
+
+        <div class="list card">
+
+          <a href="#" class="list-item list-thumbnail">
+            <div class="list-item-content">
+              <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
+              <h2>Pretty Hate Machine</h2>
+              <p>Nine Inch Nails</p>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-thumbnail">
+            <div class="list-item-content">
+              <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
+              <h2>Pretty Hate Machine</h2>
+              <p>Nine Inch Nails</p>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-music-note"></i>
+              Start listening
+            </div>
+          </a>
+
+        </div>
 
         <hr>