From 947b8d6943376b4dd0c181cf4390650289f76d4a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 18 Mar 2014 22:39:33 -0500
Subject: [PATCH] fix(item): fix avatar/thumbnail in .item-complex, and avatar
 misspelling

---
 scss/_items.scss     | 23 ++++++++++++++---------
 scss/_variables.scss |  4 ++--
 test/html/cards.html | 30 +++++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/scss/_items.scss b/scss/_items.scss
index 8d125a7da2..ee53f97076 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -437,16 +437,18 @@ button.item-button-right:after,
 // Item Avatar
 // -------------------------------
 
-.item-avatar {
-  padding-left: $item-avitar-width + ($item-padding * 2);
-  min-height: $item-avitar-width + ($item-padding * 2);
+.item-avatar,
+.item-avatar .item-content {
+  padding-left: $item-avatar-width + ($item-padding * 2);
+  min-height: $item-avatar-width + ($item-padding * 2);
 
-  img:first-child, .item-img {
+  > img:first-child,
+  .item-img {
     position: absolute;
     top: $item-padding;
     left: $item-padding;
-    max-width: $item-avitar-width;
-    max-height: $item-avitar-height;
+    max-width: $item-avatar-width;
+    max-height: $item-avatar-height;
     width: 100%;
     border-radius: 4px;
   }
@@ -461,7 +463,8 @@ button.item-button-right:after,
   padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
   min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
-  > img:first-child, > .item-image {
+  > img:first-child,
+  .item-image {
     position: absolute;
     top: $item-thumbnail-margin;
     left: $item-thumbnail-margin;
@@ -470,6 +473,7 @@ button.item-button-right:after,
     width: 100%;
   }
 }
+.item-avatar.item-complex,
 .item-thumbnail-left.item-complex {
   padding-left: 0;
 }
@@ -479,7 +483,8 @@ button.item-button-right:after,
   padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
   min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
-  > img:first-child, > .item-image {
+  > img:first-child,
+  .item-image {
     position: absolute;
     top: $item-thumbnail-margin;
     right: $item-thumbnail-margin;
@@ -488,7 +493,7 @@ button.item-button-right:after,
     width: 100%;
   }
 }
-.item-thumbnail-left.item-complex {
+.item-thumbnail-right.item-complex {
   padding-right: 0;
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index abc980d318..bab9d661d6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -289,8 +289,8 @@ $item-button-line-height:         32px !default;
 $item-icon-font-size:             32px !default;
 $item-icon-fill-font-size:        28px !default;
 
-$item-avitar-width:               40px !default;
-$item-avitar-height:              40px !default;
+$item-avatar-width:               40px !default;
+$item-avatar-height:              40px !default;
 
 $item-thumbnail-width:            80px !default;
 $item-thumbnail-height:           80px !default;
diff --git a/test/html/cards.html b/test/html/cards.html
index a93490bed6..14abdff263 100644
--- a/test/html/cards.html
+++ b/test/html/cards.html
@@ -16,7 +16,7 @@
     </header>
 
     <ion-content has-header="true" class="ionic-pseudo">
-      
+
       <div class="card">
         <div class="item item-text-wrap">
           This is a basic Card with some wrapping text.
@@ -24,7 +24,7 @@
           This is a basic Card with some wrapping text.
         </div>
       </div>
-      
+
       <div class="card item-text-wrap">
         <div class="item">
           This is a basic Card with some wrapping text.
@@ -32,7 +32,7 @@
           This is a basic Card with some wrapping text.
         </div>
       </div>
-      
+
       <div class="card">
         <div class="item item-divider">
           I'm a Header in a Card!
@@ -77,6 +77,14 @@
           <p>Nine Inch Nails</p>
         </div>
 
+        <div class="item item-avatar item-complex">
+          <a class="item-content">
+            <img class="item-img" src="http://tutupash.com/site/assets/nin_logo.jpeg">
+            <h2>Pretty Hate Machine, .item-complex</h2>
+            <p>Nine Inch Nails</p>
+          </a>
+        </div>
+
         <div class="item item-image">
           <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
         </div>
@@ -102,12 +110,28 @@
           <p>November 05, 1955</p>
         </div>
 
+        <div class="item item-thumbnail-left item-complex">
+          <a class="item-content">
+            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+            <h2>Marty McFly, .item-complex</h2>
+            <p>November 05, 1955</p>
+          </a>
+        </div>
+
         <div class="item item-thumbnail-right">
           <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
           <h2>Marty McFly</h2>
           <p>November 05, 1955</p>
         </div>
 
+        <div class="item item-thumbnail-right item-complex">
+          <a class="item-content">
+            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+            <h2>Marty McFly, .item-complex</h2>
+            <p>November 05, 1955</p>
+          </a>
+        </div>
+
         <div class="item item-body">
           <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
           <p>