From d8b1bab715691920dd3601900899e742ea407c72 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 18 Sep 2015 10:57:43 -0500
Subject: [PATCH] feat(thumbnail): ion-thumbnail element

---
 ionic/components/card/modes/ios.scss        | 10 +++++++---
 ionic/components/card/modes/md.scss         | 10 +++++++---
 ionic/components/item/item-media.scss       |  1 +
 ionic/components/item/modes/ios.scss        | 10 +++++++---
 ionic/components/item/modes/md.scss         | 10 +++++++---
 ionic/components/item/test/images/main.html | 12 ++++++------
 ionic/components/item/test/media/main.html  | 12 ++++++------
 7 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 5d8d0ad52c..ec55188b04 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -104,9 +104,13 @@ ion-card {
     }
   }
 
-  .thumbnail {
-    max-width: $item-ios-thumbnail-size;
-    max-height: $item-ios-thumbnail-size;
+  ion-thumbnail  {
+    min-width: $item-ios-thumbnail-size;
+
+    img {
+      max-width: $item-ios-thumbnail-size;
+      max-height: $item-ios-thumbnail-size;
+    }
   }
 
   h1 {
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 1ac16bcd7f..1690f22ec7 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -102,9 +102,13 @@ ion-card {
     }
   }
 
-  .thumbnail {
-    max-width: $card-md-thumbnail-size;
-    max-height: $card-md-thumbnail-size;
+  ion-thumbnail {
+    min-width: $card-md-thumbnail-size;
+
+    img {
+      max-width: $card-md-thumbnail-size;
+      max-height: $card-md-thumbnail-size;
+    }
   }
 
   h1 {
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index e9d55337c5..18a846f674 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -36,6 +36,7 @@
 
 ion-avatar,
 ion-thumbnail {
+  display: block;
   line-height: 1;
 
   img {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index dcca64e2cc..4fd9c46aec 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -137,9 +137,13 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     }
   }
 
-  .thumbnail {
-    max-width: $item-ios-thumbnail-size;
-    max-height: $item-ios-thumbnail-size;
+  ion-thumbnail {
+    min-width: $item-ios-thumbnail-size;
+
+    img {
+      max-width: $item-ios-thumbnail-size;
+      max-height: $item-ios-thumbnail-size;
+    }
   }
 
 }
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index af67c95831..74c2fda56b 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -151,9 +151,13 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     }
   }
 
-  .thumbnail {
-    max-width: $item-md-thumbnail-size;
-    max-height: $item-md-thumbnail-size;
+  ion-thumbnail {
+    min-width: $item-md-thumbnail-size;
+
+    img {
+      max-width: $item-md-thumbnail-size;
+      max-height: $item-md-thumbnail-size;
+    }
   }
 
   h1 {
diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html
index ca75ec0399..615d71962a 100644
--- a/ionic/components/item/test/images/main.html
+++ b/ionic/components/item/test/images/main.html
@@ -42,17 +42,17 @@
   </ion-item>
 
   <ion-item>
-    <div class="item-media" item-left>
-      <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </div>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
     <h2>Two Lines w/ Thumbnail, H2 Header</h2>
     <p>Paragraph text.</p>
   </ion-item>
 
   <ion-item>
-    <div class="item-media" item-left>
-      <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </div>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
     <h2>Three Lines w/ Thumbnail, H2 Header</h2>
     <p>Paragraph text.</p>
     <p>Paragraph text.</p>
diff --git a/ionic/components/item/test/media/main.html b/ionic/components/item/test/media/main.html
index 98217a1d0c..cf271f8e74 100644
--- a/ionic/components/item/test/media/main.html
+++ b/ionic/components/item/test/media/main.html
@@ -40,15 +40,15 @@
 
   <a ion-item href="#">
     Media/Thumbnail right side, a.item
-    <div class="item-media" item-right>
-      <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </div>
+    <ion-thumbnail item-right>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
   </a>
 
   <ion-item>
-    <div class="item-media" item-left>
-      <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </div>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
     <h2>H2 Title Text</h2>
     <p>Button on right</p>
     <button outline item-right>View</button>