From 1151646e714e1239dfb19a736f3e4a5a16c95f03 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 30 Nov 2017 17:58:10 -0500
Subject: [PATCH] feat(thumbnail): add stand alone styles for thumbnail

---
 .../core/src/components/item/item.ios.scss    | 10 ++----
 .../src/components/item/item.ios.vars.scss    |  7 ++--
 .../core/src/components/item/item.md.scss     | 10 ++----
 .../src/components/item/item.md.vars.scss     |  7 ++--
 .../thumbnail/test/basic/index.html           | 36 +++++++++++++++++++
 .../components/thumbnail/thumbnail.ios.scss   | 16 ++++++++-
 .../thumbnail/thumbnail.ios.vars.scss         | 13 +++++++
 .../components/thumbnail/thumbnail.md.scss    | 17 +++++++--
 .../thumbnail/thumbnail.md.vars.scss          | 13 +++++++
 9 files changed, 106 insertions(+), 23 deletions(-)
 create mode 100644 packages/core/src/components/thumbnail/test/basic/index.html
 create mode 100644 packages/core/src/components/thumbnail/thumbnail.ios.vars.scss
 create mode 100644 packages/core/src/components/thumbnail/thumbnail.md.vars.scss

diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss
index 164246db46..2dbdea3c77 100644
--- a/packages/core/src/components/item/item.ios.scss
+++ b/packages/core/src/components/item/item.ios.scss
@@ -130,14 +130,8 @@
 // --------------------------------------------------
 
 .item-ios ion-thumbnail {
-  min-width: $item-ios-thumbnail-size;
-  min-height: $item-ios-thumbnail-size;
-}
-
-.item-ios ion-thumbnail ion-img,
-.item-ios ion-thumbnail img {
-  width: $item-ios-thumbnail-size;
-  height: $item-ios-thumbnail-size;
+  width: $item-ios-thumbnail-width;
+  height: $item-ios-thumbnail-height;
 }
 
 
diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss
index 86831536fa..46060a068e 100644
--- a/packages/core/src/components/item/item.ios.vars.scss
+++ b/packages/core/src/components/item/item.ios.vars.scss
@@ -30,8 +30,11 @@ $item-ios-avatar-width:                   36px !default;
 /// @prop - Height of the avatar in the item
 $item-ios-avatar-height:                  $item-ios-avatar-width !default;
 
-/// @prop - Size of the thumbnail in the item
-$item-ios-thumbnail-size:                 56px !default;
+/// @prop - Width of the thumbnail in the item
+$item-ios-thumbnail-width:                56px !default;
+
+/// @prop - Height of the thumbnail in the item
+$item-ios-thumbnail-height:               $item-ios-thumbnail-width !default;
 
 /// @prop - Shows the detail arrow icon on an item
 $item-ios-detail-push-show:               true !default;
diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss
index aba37a7043..93fe21b012 100644
--- a/packages/core/src/components/item/item.md.scss
+++ b/packages/core/src/components/item/item.md.scss
@@ -142,14 +142,8 @@
 // --------------------------------------------------
 
 .item-md ion-thumbnail {
-  min-width: $item-md-thumbnail-size;
-  min-height: $item-md-thumbnail-size;
-}
-
-.item-md ion-thumbnail ion-img,
-.item-md ion-thumbnail img {
-  width: $item-md-thumbnail-size;
-  height: $item-md-thumbnail-size;
+  width: $item-md-thumbnail-width;
+  height: $item-md-thumbnail-height;
 }
 
 
diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss
index fdecf79e79..538808fc30 100644
--- a/packages/core/src/components/item/item.md.vars.scss
+++ b/packages/core/src/components/item/item.md.vars.scss
@@ -21,8 +21,11 @@ $item-md-avatar-width:               40px !default;
 /// @prop - Height of the avatar in the item
 $item-md-avatar-height:              $item-md-avatar-width !default;
 
-/// @prop - Size of the thumbnail in the item
-$item-md-thumbnail-size:             80px !default;
+/// @prop - Width of the thumbnail in the item
+$item-md-thumbnail-width:            80px !default;
+
+/// @prop - Height of the thumbnail in the item
+$item-md-thumbnail-height:           $item-md-thumbnail-width !default;
 
 /// @prop - Shows the detail arrow icon on an item
 $item-md-detail-push-show:           false !default;
diff --git a/packages/core/src/components/thumbnail/test/basic/index.html b/packages/core/src/components/thumbnail/test/basic/index.html
new file mode 100644
index 0000000000..d740c61621
--- /dev/null
+++ b/packages/core/src/components/thumbnail/test/basic/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Thumbnail - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Thumbnail - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-thumbnail>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+        </ion-thumbnail>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+      </ion-content>
+    </ion-page>
+  </ion-app>
+</body>
+
+</html>
diff --git a/packages/core/src/components/thumbnail/thumbnail.ios.scss b/packages/core/src/components/thumbnail/thumbnail.ios.scss
index c8b40bfd5d..885200b277 100644
--- a/packages/core/src/components/thumbnail/thumbnail.ios.scss
+++ b/packages/core/src/components/thumbnail/thumbnail.ios.scss
@@ -1,6 +1,20 @@
-@import "../../themes/ionic.globals.ios";
 @import "./thumbnail";
+@import "./thumbnail.ios.vars";
 
 
 // iOS Thumbnail
 // --------------------------------------------------
+
+.thumbnail-ios {
+  @include border-radius($thumbnail-ios-border-radius);
+
+  width: $thumbnail-ios-width;
+  height: $thumbnail-ios-height;
+}
+
+.thumbnail-ios ion-img,
+.thumbnail-ios img {
+  @include border-radius($thumbnail-ios-border-radius);
+
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss b/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss
new file mode 100644
index 0000000000..85d53e58a4
--- /dev/null
+++ b/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss
@@ -0,0 +1,13 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Thumbnail
+// --------------------------------------------------
+
+/// @prop - Width of the thumbnail
+$thumbnail-ios-width:                   48px !default;
+
+/// @prop - Height of the thumbnail
+$thumbnail-ios-height:                  $thumbnail-ios-width !default;
+
+/// @prop - Border radius of the thumbnail
+$thumbnail-ios-border-radius:           0 !default;
diff --git a/packages/core/src/components/thumbnail/thumbnail.md.scss b/packages/core/src/components/thumbnail/thumbnail.md.scss
index e03360d188..aa36021795 100644
--- a/packages/core/src/components/thumbnail/thumbnail.md.scss
+++ b/packages/core/src/components/thumbnail/thumbnail.md.scss
@@ -1,6 +1,19 @@
-@import "../../themes/ionic.globals.md";
 @import "./thumbnail";
-
+@import "./thumbnail.md.vars";
 
 // Material Design Thumbnail
 // --------------------------------------------------
+
+.thumbnail-md {
+  @include border-radius($thumbnail-md-border-radius);
+
+  width: $thumbnail-md-width;
+  height: $thumbnail-md-height;
+}
+
+.thumbnail-md ion-img,
+.thumbnail-md img {
+  @include border-radius($thumbnail-md-border-radius);
+
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/thumbnail/thumbnail.md.vars.scss b/packages/core/src/components/thumbnail/thumbnail.md.vars.scss
new file mode 100644
index 0000000000..94e48b264d
--- /dev/null
+++ b/packages/core/src/components/thumbnail/thumbnail.md.vars.scss
@@ -0,0 +1,13 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Thumbnail
+// --------------------------------------------------
+
+/// @prop - Width of the thumbnail
+$thumbnail-md-width:                   48px !default;
+
+/// @prop - Height of the thumbnail
+$thumbnail-md-height:                  $thumbnail-md-width !default;
+
+/// @prop - Border radius of the thumbnail
+$thumbnail-md-border-radius:           0 !default;