refactor(card): create ion-card-title element and remove card-title c…

…lass closes #5303
ionic-team · Feb 13, 2016 · 7aabd0f · 7aabd0f
1 parent fd0b851
commit 7aabd0f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/ionic/components/card/card.ios.scss b/ionic/components/card/card.ios.scss
@@ -25,6 +25,7 @@ $card-ios-font-size:                   1.4rem !default;
 $card-ios-text-color:                  #666 !default;
 $card-ios-title-font-size:             1.8rem !default;
 $card-ios-title-padding:               8px 0 8px 0 !default;
+$card-ios-title-margin:                2px 0 2px !default;
 $card-ios-title-text-color:            #222 !default;
 
 $card-ios-header-font-size:            1.6rem !default;
@@ -85,8 +86,11 @@ ion-card {
     font-size: 1.3rem;
   }
 
-  .card-title {
+  ion-card-title {
+    display: block;
+    line-height: 1.2;
     padding: $card-ios-title-padding;
+    margin: $card-ios-title-margin;
     font-size: $card-ios-title-font-size;
     color: $card-ios-title-text-color;
   }

diff --git a/ionic/components/card/card.md.scss b/ionic/components/card/card.md.scss
@@ -29,6 +29,7 @@ $card-md-line-height:                 1.5 !default;
 $card-md-text-color:                  #222 !default;
 $card-md-title-font-size:             2.4rem !default;
 $card-md-title-padding:               8px 0 8px 0 !default;
+$card-md-title-margin:                2px 0 2px !default;
 $card-md-title-text-color:            #222 !default;
 
 $card-md-header-font-size:            1.6rem !default;
@@ -87,8 +88,11 @@ ion-card {
     font-size: 1.3rem;
   }
 
-  .card-title {
+  ion-card-title {
+    display: block;
+    line-height: 1.2;    
     padding: $card-md-title-padding;
+    margin: $card-md-title-margin;
     font-size: $card-md-title-font-size;
     color: $card-md-title-text-color;
   }

diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
@@ -10,9 +10,9 @@
     </div>
 
     <ion-card-content>
-      <h2 class="card-title">
+      <ion-card-title>
         Card Title Goes Here
-      </h2>
+      </ion-card-title>
       <p>
         Keep close to Nature's heart... and break clear away,
         once in awhile, and climb a mountain. I am within a paragraph element.