From d53f540d1f02a830003ccfaea5e4465de16366b0 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 24 Aug 2015 17:22:04 -0500
Subject: [PATCH] ion-card-header

---
 ionic/components/app/test/material/index.ts  |  4 ++--
 ionic/components/app/test/sink/pages/card.ts |  4 ++--
 ionic/components/card/card.scss              |  7 +++++++
 ionic/components/card/modes/ios.scss         | 10 ++++++----
 ionic/components/card/modes/material.scss    |  7 +++++--
 ionic/components/card/test/basic/main.html   |  4 ++--
 ionic/components/card/test/links/main.html   |  4 ++--
 ionic/components/item/test/buttons/main.html | 20 ++++++++++----------
 ionic/components/item/test/icons/main.html   | 20 ++++++++++----------
 ionic/components/list/modes/ios.scss         |  2 +-
 ionic/components/list/modes/material.scss    |  2 +-
 11 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/ionic/components/app/test/material/index.ts b/ionic/components/app/test/material/index.ts
index 3782478035..790da398b2 100644
--- a/ionic/components/app/test/material/index.ts
+++ b/ionic/components/app/test/material/index.ts
@@ -31,9 +31,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 
     <div class="padding">
       <ion-card>
-        <ion-header>
+        <ion-card-header>
           New Post
-        </ion-header>
+        </ion-card-header>
         <div class="card-content">
           Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
         </div>
diff --git a/ionic/components/app/test/sink/pages/card.ts b/ionic/components/app/test/sink/pages/card.ts
index 272e5b8f52..ff12b92b56 100644
--- a/ionic/components/app/test/sink/pages/card.ts
+++ b/ionic/components/app/test/sink/pages/card.ts
@@ -20,9 +20,9 @@ import {SinkPage} from '../sink-page';
 
     <ion-card>
 
-      <ion-header>
+      <ion-card-header>
         Card Header
-      </ion-header>
+      </ion-card-header>
 
       <div class="item">
         <div class="item-media">
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 9702ea4f66..0179319835 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -11,3 +11,10 @@
   }
 
 }
+
+ion-card-header {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index b3cc23187b..aad4037b69 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -18,7 +18,9 @@ $card-ios-title-padding:               8px 0 8px 0;
 $card-ios-title-text-color:            #222 !default;
 
 $card-ios-header-font-size:            1.6rem !default;
+$card-ios-header-font-weight:          500 !default;
 $card-ios-header-padding:              16px !default;
+$card-ios-header-color:                #333 !default;
 
 
 .card.list[mode=ios] {
@@ -48,11 +50,11 @@ $card-ios-header-padding:              16px !default;
     left: 0;
   }
 
-  ion-header {
-    font-size: $card-ios-header-font-size;
-    text-transform: none;
-    letter-spacing: normal;
+  ion-card-header {
     padding: $card-ios-header-padding;
+    font-size: $card-ios-header-font-size;
+    font-weight: $card-ios-header-font-weight;
+    color: $card-ios-header-color;
   }
 
   .card-title {
diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss
index 4210b43766..f98329ddc8 100644
--- a/ionic/components/card/modes/material.scss
+++ b/ionic/components/card/modes/material.scss
@@ -18,6 +18,8 @@ $card-md-title-padding:               8px 0 8px 0;
 $card-md-title-text-color:            #222 !default;
 
 $card-md-header-font-size:            1.6rem !default;
+$card-md-header-padding:              16px !default;
+$card-md-header-color:                #222 !default;
 
 
 .card.list[mode=md] {
@@ -55,9 +57,10 @@ $card-md-header-font-size:            1.6rem !default;
     margin-left: 0;
   }
 
-  ion-header {
+  ion-card-header {
+    padding: $card-md-header-padding;
     font-size: $card-md-header-font-size;
-    color: $card-md-text-color;
+    color: $card-md-header-color;
   }
 
   .card-title {
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index 7b79bd5af4..a470d03bb7 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -4,9 +4,9 @@
 
 <ion-card>
 
-  <ion-header>
+  <ion-card-header>
     Card Header
-  </ion-header>
+  </ion-card-header>
 
   <div class="item item-text-wrap">
     <ion-item-content>
diff --git a/ionic/components/card/test/links/main.html b/ionic/components/card/test/links/main.html
index 4cbb63721d..6c995838e3 100644
--- a/ionic/components/card/test/links/main.html
+++ b/ionic/components/card/test/links/main.html
@@ -41,9 +41,9 @@
 
 <ion-card>
 
-  <ion-header>
+  <ion-card-header>
     Card Header
-  </ion-header>
+  </ion-card-header>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index 35adff7bde..137abefedd 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -3,44 +3,44 @@
 <ion-list>
 
   <a ion-item href="#">
-    a.item
+    a[ion-item]
     <icon forward item-right></icon>
   </a>
 
   <a ion-item class="activated" href="#">
-    a.item.activated
+    a[ion-item].activated
     <icon forward item-right></icon>
   </a>
 
   <button ion-item>
-    button.item
+    button[ion-item]
     <icon forward item-right></icon>
   </button>
 
   <button ion-item class="activated">
-    button.item.activated
+    button[ion-item].activated
     <icon forward item-right></icon>
   </button>
 
   <ion-item>
     <button item-left>Edit</button>
-    div.item left button
+    ion-item left button
   </ion-item>
 
   <ion-item>
-    div.item right button[outline][secondary]
+    ion-item right button[outline][secondary]
     <button secondary outline item-right>Open</button>
   </ion-item>
 
   <ion-item>
-    div.item icon only button
+    ion-item icon only button
     <button item-right>
       <icon name="ion-help-circled"></icon>
     </button>
   </ion-item>
 
   <ion-item>
-    div.item right icon/text button
+    ion-item right icon/text button
     <button item-right>
       <icon name="ion-refresh"></icon>
       Refresh
@@ -52,11 +52,11 @@
       <icon name="ion-wrench"></icon>
       Fix
     </button>
-    div.item left clear button
+    ion-item left clear button
   </ion-item>
 
   <ion-item>
-    div.item right clear button
+    ion-item right clear button
     <button secondary clear item-right>
       Edit
     </button>
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index 0634f66464..7e79766d98 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -3,48 +3,48 @@
 <ion-list>
 
   <ion-item>
-    Div with forward icon
+    ion-item forward icon
     <icon forward item-right></icon>
   </ion-item>
 
   <a ion-item href="#">
-    Link with forward icon
+    a[ion-item] with forward icon
     <icon forward item-right></icon>
   </a>
 
   <button ion-item>
-    Button with forward icon
+    button[ion-item] with forward icon
     <icon forward item-right></icon>
   </button>
 
   <a ion-item href="#">
-    Link with right side default icon
+    a[ion-item] with right side default icon
     <icon name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    Link with right side large icon
+    a[ion-item] with right side large icon
     <icon large name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    Link with right side small icon
+    a[ion-item] with right side small icon
     <icon small name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <button ion-item>
     <icon name="ion-star" item-left></icon>
-    Button with left side icon
+    button[ion-item] with left side icon
   </button>
 
   <button ion-item>
     <icon name="ion-flag" item-left></icon>
-    Button with both side icons
+    button[ion-item] with both side icons
     <icon name="ion-ios-checkmark" item-right></icon>
   </button>
 
   <a ion-item href="#">
-    Link with two right side icons
+    a[ion-item] with two right side icons
     <icon name="ion-checkmark-circled" item-right></icon>
     <icon name="ion-shuffle" item-right></icon>
   </a>
@@ -52,7 +52,7 @@
   <button ion-item>
     <icon name="ion-clipboard" item-left></icon>
     <icon name="ion-minus-circled" item-left></icon>
-    Button with two left side icons
+    button[ion-item] with two left side icons
   </button>
 
   <button ion-item>
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 39f07e9e0d..3355d92271 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -37,7 +37,7 @@ $list-ios-header-color:               #333 !default;
   margin-top: $list-ios-margin-top;
 }
 
-.list[mode=ios] + .list:not(.card) ion-header {
+.list[mode=ios] + .list ion-header {
   margin-top: -$list-ios-margin-top;
   padding-top: 0;
 }
diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss
index 6ca57c8806..19c76ab237 100644
--- a/ionic/components/list/modes/material.scss
+++ b/ionic/components/list/modes/material.scss
@@ -32,7 +32,7 @@ $list-md-header-color:           #858585 !default;
   margin-top: $list-md-margin-top;
 }
 
-.list[mode=md] + .list:not(.card) ion-header {
+.list[mode=md] + .list ion-header {
   margin-top: -$list-md-margin-top;
   padding-top: 0;
 }