From 069ac65e24ca617a7bbb41f808ebcce34874f902 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 25 Aug 2015 13:17:29 -0500
Subject: [PATCH] list/item/button/card css overhaul

---
 .gitignore                                    |  11 +-
 ionic/components/app/app.ts                   |   6 +-
 ionic/components/badge/badge.scss             |   2 +-
 ionic/components/button/button-icon.scss      |  16 ++-
 ionic/components/button/button-size.scss      |  10 +-
 ionic/components/button/button.scss           |   7 +-
 ionic/components/button/modes/material.scss   |   8 +-
 ionic/components/card/card.scss               |   5 +-
 ionic/components/card/card.ts                 |   5 +-
 ionic/components/card/modes/ios.scss          |  56 ++++++----
 ionic/components/card/modes/material.scss     |  81 ++++++++------
 ionic/components/card/test/advanced/main.html |  17 ++-
 ionic/components/card/test/basic/main.html    |  42 +++++---
 ionic/components/card/test/images/main.html   |  21 ++--
 ionic/components/card/test/links/e2e.ts       |   1 -
 ionic/components/card/test/links/index.ts     |  10 --
 ionic/components/card/test/links/main.html    |  81 --------------
 ionic/components/checkbox/checkbox.ts         |   2 +-
 ionic/components/form/label.scss              |   6 +-
 ionic/components/item/item.scss               |  78 ++++----------
 ionic/components/item/modes/ios.scss          | 101 +++++++++---------
 ionic/components/item/modes/material.scss     |  80 ++++++++------
 ionic/components/item/test/buttons/main.html  |  33 +++++-
 ionic/components/item/test/icons/main.html    |  31 ++++--
 ionic/components/radio/radio.ts               |   2 +-
 ionic/components/switch/modes/ios.scss        |   2 +-
 ionic/components/switch/modes/material.scss   |   2 +-
 ionic/components/switch/switch.ts             |   2 +-
 ionic/components/text-input/modes/ios.scss    |   9 +-
 .../components/text-input/modes/material.scss |   9 +-
 .../test/fixed-inline-labels/main.html        |  10 +-
 .../text-input/test/inline-labels/main.html   |  12 +--
 .../text-input/test/inset-inputs/main.html    |  16 +--
 .../test/placeholder-labels/main.html         |   4 +-
 .../text-input/test/stacked-labels/main.html  |   3 -
 scripts/e2e/e2e.template.html                 |  12 ---
 36 files changed, 370 insertions(+), 423 deletions(-)
 delete mode 100644 ionic/components/card/test/links/e2e.ts
 delete mode 100644 ionic/components/card/test/links/index.ts
 delete mode 100644 ionic/components/card/test/links/main.html

diff --git a/.gitignore b/.gitignore
index 718092f0b1..f326d36052 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 *~
-.DS_Store
 *.sw[mnpcod]
 *.log
 *.tmp
@@ -7,14 +6,20 @@
 log.txt
 *.sublime-project
 *.sublime-workspace
-UserInterfaceState.xcuserstate
 
 .idea/
 .sass-cache/
+.versions/
+coverage/
+dist/
 node_modules/
 tmp/
 temp/
-dist/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
 
 scripts/resources/web-animations-js/test/
 scripts/resources/web-animations-js/inter-*
diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts
index b5d9b66cfb..63986448ce 100644
--- a/ionic/components/app/app.ts
+++ b/ionic/components/app/app.ts
@@ -87,11 +87,11 @@ export class IonicApp {
 
       let platformVersion = versions[platformName];
       if (platformVersion) {
-        // platform-ios_8
-        platformClass += '_' + platformVersion.major;
+        // platform-ios9
+        platformClass += platformVersion.major;
         bodyEle.classList.add(platformClass);
 
-        // platform-ios_8_3
+        // platform-ios9_3
         bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
       }
     });
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index 2e6cd204d1..af56ee6889 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -7,7 +7,7 @@ $badge-font-weight:               bold !default;
 $badge-border-radius:             10px !default;
 
 
-.badge {
+item-badge {
   display: inline-block;
 
   padding: 3px 8px;
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index 73e4e8512d..443cd4870e 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -7,20 +7,21 @@ button,
 [button] {
 
   &.icon-left icon {
-    margin-left: -0.6rem;
-    padding-right: 0.6rem;
+    margin-left: -0.2em;
+    padding-right: 0.4em;
   }
 
   &.icon-right icon {
-    margin-right: -0.6rem;
-    padding-left: 0.6rem;
+    margin-right: -0.2em;
+    padding-left: 0.3em;
   }
 
   &.icon-only {
     padding: 0;
+    min-width: 0.9em;
 
     icon {
-      padding: 0 1.6rem;
+      padding: 0 0.9em;
     }
   }
 
@@ -29,11 +30,6 @@ button,
     border: none;
   }
 
-  &[large] icon {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   &[small] icon {
     margin-left: 0;
     margin-right: 0;
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
index a1800e0d4a..a414cb6eab 100644
--- a/ionic/components/button/button-size.scss
+++ b/ionic/components/button/button-size.scss
@@ -3,12 +3,12 @@
 // --------------------------------------------------
 
 $button-large-font-size:          2rem !default;
-$button-large-height:             5.4rem !default;
-$button-large-padding:            1.4rem !default;
+$button-large-height:             2.8em !default;
+$button-large-padding:            1.0em !default;
 
 $button-small-font-size:          1.3rem !default;
-$button-small-height:             2.8rem !default;
-$button-small-padding:            1.1rem !default;
+$button-small-height:             2.1em !default;
+$button-small-padding:            0.9em !default;
 
 
 button,
@@ -16,14 +16,12 @@ button,
 
   &[large] {
     padding: 0 $button-large-padding;
-    min-width: ($button-large-padding * 4);
     min-height: $button-large-height;
     font-size: $button-large-font-size;
   }
 
   &[small] {
     padding: 0 $button-small-padding;
-    min-width: ($button-small-padding * 3);
     min-height: $button-small-height;
     font-size: $button-small-font-size;
   }
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 6f7af095a3..2319e5b20e 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -4,13 +4,12 @@
 
 $button-font-size:                1.6rem !default;
 $button-margin:                   0.4rem 0 !default;
-$button-padding:                  0 2rem !default;
-$button-height:                   4.4rem !default;
-$button-border-width:             1px !default;
+$button-padding:                  0 1em !default;
+$button-height:                   2.8em !default;
 $button-border-radius:            4px !default;
 
-$button-round-border-radius:      64px !default;
 $button-round-padding:            0 2.6rem !default;
+$button-round-border-radius:      64px !default;
 
 $button-color:                    color(primary) !default;
 $button-color-activated:          darken-or-lighten($button-color) !default;
diff --git a/ionic/components/button/modes/material.scss b/ionic/components/button/modes/material.scss
index ffc696672c..9a98e42ef6 100644
--- a/ionic/components/button/modes/material.scss
+++ b/ionic/components/button/modes/material.scss
@@ -4,7 +4,7 @@
 
 $button-md-font-size:                1.4rem !default;
 $button-md-min-height:               3.6rem !default;
-$button-md-padding:                  0 1.6rem !default;
+$button-md-padding:                  0 1.2em !default;
 $button-md-box-shadow:               0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default;
 $button-md-box-shadow-active:        0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
 $button-md-border-radius:            2px !default;
@@ -72,14 +72,12 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
 
   &[large] {
     padding: 0 $button-large-padding;
-    min-width: ($button-large-padding * 4);
     min-height: $button-large-height;
     font-size: $button-large-font-size;
   }
 
   &[small] {
     padding: 0 $button-small-padding;
-    min-width: ($button-small-padding * 3);
     min-height: $button-small-height;
     font-size: $button-small-font-size;
   }
@@ -90,10 +88,6 @@ $button-md-clear-active-bg-color:    rgba(158, 158, 158, 0.2);
 
   &.icon-only {
     padding: 0;
-
-    icon {
-      padding: 0 1.6rem;
-    }
   }
 
   // Generate iOS Checkbox Auxiliary Colors
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 614c3d6786..f5aa26f32d 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -3,11 +3,12 @@
 // --------------------------------------------------
 
 
-.card {
+ion-card {
   display: block;
 }
 
-.card img {
+ion-card img {
+  display: block;
   width: 100%;
 }
 
diff --git a/ionic/components/card/card.ts b/ionic/components/card/card.ts
index 8244aa5f14..845a5de832 100644
--- a/ionic/components/card/card.ts
+++ b/ionic/components/card/card.ts
@@ -8,10 +8,7 @@ import * as util from 'ionic/util';
 
 
 @IonicDirective({
-  selector: 'ion-card',
-  host: {
-    'class': 'list'
-  }
+  selector: 'ion-card'
 })
 export class Card extends Ion {
   constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index a64df34af4..e28a08aef7 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -12,6 +12,9 @@ $card-ios-padding-right:               16px !default;
 $card-ios-padding-bottom:              14px !default;
 $card-ios-padding-left:                16px !default;
 
+$card-ios-padding-media-top:           10px !default;
+$card-ios-padding-media-bottom:        10px !default;
+
 $card-ios-background-color:            $list-background-color !default;
 $card-ios-box-shadow:                  0 1px 2px rgba(0,0,0,.3) !default;
 $card-ios-border-radius:               2px !default;
@@ -28,31 +31,27 @@ $card-ios-header-padding:              16px !default;
 $card-ios-header-color:                #333 !default;
 
 
-.card.list[mode=ios] {
+ion-card[mode=ios] {
   margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
+  font-size: $card-ios-font-size;
 
   background: $card-ios-background-color;
   box-shadow: $card-ios-box-shadow;
   border-radius: $card-ios-border-radius;
-  font-size: $card-ios-font-size;
   overflow: hidden;
 
-  .item:first-child {
-    margin-top: 0;
+  .item {
+    padding-right: ($card-ios-padding-right / 2);
+    padding-left: ($card-ios-padding-left / 2);
   }
 
-  .item:last-child {
-    margin-bottom: 0;
+  ion-item-content {
+    padding: $card-ios-padding-top ($card-ios-padding-right / 2) $card-ios-padding-bottom ($card-ios-padding-left / 2);
   }
 
-  .item:first-child:before,
-  .item:last-child:after {
-    border: none;
-  }
-
-  .item:before,
-  .item:after {
-    left: 0;
+  ion-card-content {
+    padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
+    font-size: $card-ios-font-size;
   }
 
   ion-card-header {
@@ -62,9 +61,19 @@ $card-ios-header-color:                #333 !default;
     color: $card-ios-header-color;
   }
 
-  ion-card-content {
-    padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
-    font-size: $card-ios-font-size;
+  [item-left],
+  [item-right] {
+    margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2);
+  }
+
+  button[item-left],
+  button[item-right],
+  [button][item-left],
+  [button][item-right], {
+    margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2);
+    padding: 2px 6px;
+    min-height: 26px;
+    font-size: 1.3rem;
   }
 
   .card-title {
@@ -73,6 +82,17 @@ $card-ios-header-color:                #333 !default;
     color: $card-ios-title-text-color;
   }
 
+  .avatar {
+    max-width: $item-ios-avatar-size;
+    max-height: $item-ios-avatar-size;
+    border-radius: $item-ios-avatar-size / 2;
+  }
+
+  .thumbnail {
+    max-width: $item-ios-thumbnail-size;
+    max-height: $item-ios-thumbnail-size;
+  }
+
   h1 {
     margin: 0 0 2px;
     font-size: 2.4rem;
@@ -103,6 +123,6 @@ $card-ios-header-color:                #333 !default;
 
 }
 
-.card.list[mode=ios] + .card {
+ion-card[mode=ios] + ion-card {
   margin-top: 0;
 }
diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss
index 547bef2eb7..d7a480baab 100644
--- a/ionic/components/card/modes/material.scss
+++ b/ionic/components/card/modes/material.scss
@@ -12,6 +12,12 @@ $card-md-padding-right:               16px !default;
 $card-md-padding-bottom:              13px !default;
 $card-md-padding-left:                16px !default;
 
+$card-md-padding-media-top:           10px !default;
+$card-md-padding-media-bottom:        10px !default;
+
+$card-md-avatar-size:                 4rem !default;
+$card-md-thumbnail-size:              8rem !default;
+
 $card-md-background-color:            $list-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
@@ -28,45 +34,22 @@ $card-md-header-padding:              16px !default;
 $card-md-header-color:                #222 !default;
 
 
-.card.list[mode=md] {
+ion-card[mode=md] {
   margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
+  font-size: $card-md-font-size;
 
   background: $card-md-background-color;
   box-shadow: $card-md-box-shadow;
   border-radius: $card-md-border-radius;
-  font-size: $card-md-font-size;
   overflow: hidden;
 
-  .item:before,
-  .item:after {
-    left: 0;
+  .item {
+    padding-right: ($card-md-padding-right / 2);
+    padding-left: ($card-md-padding-left / 2);
   }
 
-  .item:first-child {
-    margin-top: 0;
-
-    &:before {
-      border-top: none;
-    }
-  }
-
-  .item:last-child {
-    margin-bottom: 0;
-
-    &:after {
-      border-top: none;
-    }
-  }
-
-  ion-item-content button:first-child,
-  ion-item-content [button]:first-child {
-    margin-left: 0;
-  }
-
-  ion-card-header {
-    padding: $card-md-header-padding;
-    font-size: $card-md-header-font-size;
-    color: $card-md-header-color;
+  ion-item-content {
+    padding: $card-md-padding-top ($card-md-padding-right / 2) $card-md-padding-bottom ($card-md-padding-left / 2);
   }
 
   ion-card-content {
@@ -75,21 +58,55 @@ $card-md-header-color:                #222 !default;
     line-height: $card-md-line-height;
   }
 
+  ion-card-header {
+    padding: $card-md-header-padding;
+    font-size: $card-md-header-font-size;
+    color: $card-md-header-color;
+  }
+
+  [item-left],
+  [item-right] {
+    margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2);
+  }
+
+  button[item-left],
+  button[item-right],
+  [button][item-left],
+  [button][item-right], {
+    margin: 0 ($card-md-padding-right / 2) 0 ($card-md-padding-left / 2);
+    padding: 2px 6px;
+    min-height: 26px;
+    font-size: 1.3rem;
+  }
+
   .card-title {
     padding: $card-md-title-padding;
     font-size: $card-md-title-font-size;
     color: $card-md-title-text-color;
   }
 
+  .avatar {
+    max-width: $card-md-avatar-size;
+    max-height: $card-md-avatar-size;
+    border-radius: $card-md-avatar-size / 2;
+  }
+
+  .thumbnail {
+    max-width: $card-md-thumbnail-size;
+    max-height: $card-md-thumbnail-size;
+  }
+
   h1 {
     margin: 0 0 2px;
     font-size: 2.4rem;
+    font-weight: normal;
     color: $card-md-text-color;
   }
 
   h2 {
     margin: 2px 0 2px;
     font-size: 1.6rem;
+    font-weight: normal;
     color: $card-md-text-color;
   }
 
@@ -99,6 +116,7 @@ $card-md-header-color:                #222 !default;
   h6 {
     margin: 2px 0 2px;
     font-size: 1.4rem;
+    font-weight: normal;
     color: $card-md-text-color;
   }
 
@@ -106,11 +124,12 @@ $card-md-header-color:                #222 !default;
     font-size: 1.4rem;
     margin: 0 0 2px;
     line-height: 1.5;
+    font-weight: normal;
     color: $card-md-text-color;
   }
 
 }
 
-.card.list[mode=md] + .card {
+ion-card[mode=md] + ion-card {
   margin-top: 0;
 }
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index bfa92b2077..a165042c68 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -4,11 +4,10 @@
 
 <ion-card>
 
-  <div class="item">
+  <div>
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </div>
 
-
   <ion-card-content>
     <h2 class="card-title">
       Card Title Goes Here
@@ -35,17 +34,15 @@
 
 <ion-card>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div item-left class="item-media">
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <ion-item-content>
-      <h2>Card With An Inset Picture</h2>
-      <p>Isn't it beautiful</p>
-    </ion-item-content>
-  </div>
+    <h2>Card With An Inset Picture</h2>
+    <p>Isn't it beautiful</p>
+  </ion-item>
 
-  <div class="item">
+  <div>
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </div>
 
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index e2835ef3c7..2abb23648f 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -18,17 +18,15 @@
 
 <ion-card>
 
-  <div class="item">
-    <icon name="ion-location"></icon>
-    <ion-item-content>
-      All Out Card
-    </ion-item-content>
-    <button outline>View</button>
-  </div>
+  <ion-item>
+    <icon name="ion-location" item-left></icon>
+    ion-iteam in a card, icon left, button right
+    <button outline item-right>View</button>
+  </ion-item>
 
   <ion-card-content>
-    This is a multiline content within a card that should
-    take up multiple lines and stuff.
+    This is content, without any paragraph or header tags,
+    within an ion-card-content element.
   </ion-card-content>
 
 </ion-card>
@@ -36,8 +34,28 @@
 
 <ion-card>
 
-  <ion-card-content>
-    Card, no header
-  </ion-card-content>
+  <a ion-item href="#">
+    <icon name="ion-ionic" item-left></icon>
+    Card Link Item 1
+    <icon forward item-right></icon>
+  </a>
+
+  <a ion-item href="#">
+    <icon name="ion-ionic" item-left></icon>
+    Card Link Item 2
+    <icon forward item-right></icon>
+  </a>
+
+  <button ion-item>
+    <icon name="ion-ionic" item-left></icon>
+    Card Button Item 1
+    <icon forward item-right></icon>
+  </button>
+
+  <button ion-item>
+    <icon name="ion-ionic" item-left></icon>
+    Card Button Item 2
+    <icon forward item-right></icon>
+  </button>
 
 </ion-card>
diff --git a/ionic/components/card/test/images/main.html b/ionic/components/card/test/images/main.html
index 727ae4fc6e..1ec08e325a 100644
--- a/ionic/components/card/test/images/main.html
+++ b/ionic/components/card/test/images/main.html
@@ -3,7 +3,7 @@
 
 
 <ion-card>
-  <div class="item">
+  <div>
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </div>
   <ion-card-content>
@@ -15,24 +15,19 @@
 
 <ion-card>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div item-left class="item-media">
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <ion-item-content>
-      <h2>Card With An Inset Picture, H2 text</h2>
-      <p>Isn't it beautiful.</p>
-    </ion-item-content>
-  </div>
+    <h2>Card With An Inset Picture, H2 text</h2>
+    <p>Isn't it beautiful.</p>
+  </ion-item>
 
-  <div class="item">
-    <ion-item-content>
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </ion-item-content>
-  </div>
+  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
 
 </ion-card>
 
+
 <style>
   .avatar {
     width: 80px !important;
diff --git a/ionic/components/card/test/links/e2e.ts b/ionic/components/card/test/links/e2e.ts
deleted file mode 100644
index 8b13789179..0000000000
--- a/ionic/components/card/test/links/e2e.ts
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/ionic/components/card/test/links/index.ts b/ionic/components/card/test/links/index.ts
deleted file mode 100644
index f02a733534..0000000000
--- a/ionic/components/card/test/links/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {App} from 'ionic/ionic';
-
-
-@App({
-  templateUrl: 'main.html'
-})
-class E2EApp {}
-
-
-document.body.style.background='#eee';
diff --git a/ionic/components/card/test/links/main.html b/ionic/components/card/test/links/main.html
deleted file mode 100644
index 6c995838e3..0000000000
--- a/ionic/components/card/test/links/main.html
+++ /dev/null
@@ -1,81 +0,0 @@
-
-<ion-toolbar><ion-title>Card with Links</ion-title></ion-toolbar>
-
-
-<ion-card>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 1
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 2
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-  <button class="item">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Button 1
-    </ion-item-content>
-    <icon forward></icon>
-  </button>
-
-  <button class="item">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Button 2
-    </ion-item-content>
-    <icon forward></icon>
-  </button>
-
-</ion-card>
-
-
-<ion-card>
-
-  <ion-card-header>
-    Card Header
-  </ion-card-header>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 1
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 2
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 3
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-  <a class="item" href="#">
-    <icon name="ion-ionic"></icon>
-    <ion-item-content>
-      Link 4
-    </ion-item-content>
-    <icon forward></icon>
-  </a>
-
-</ion-card>
-
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 7bda684ea8..c96315f165 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -33,7 +33,7 @@ import {TapClick} from '../button/button';
 })
 @IonicView({
   template:
-  '<div class="item-media media-checkbox">' +
+  '<div item-left class="item-media media-checkbox">' +
     '<div class="checkbox-icon"></div>' +
   '</div>' +
   '<ion-item-content id="{{labelId}}">' +
diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss
index 159d25df63..a616614d23 100644
--- a/ionic/components/form/label.scss
+++ b/ionic/components/form/label.scss
@@ -33,8 +33,8 @@ $input-label-color:         #888 !default;
     max-width: 100%;
   }
 
-  .input-label + .input {
-    margin-top: 0;
-    padding-left: 16px;
+  .text-input {
+    align-self: stretch;
+    width: auto;
   }
 }
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index fc6595e9c0..011d9b7540 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -22,16 +22,18 @@
 
 a.item,
 button.item.item {
-  border-radius: 0;
   margin: 0;
-  color: inherit;
-  text-decoration: none;
+  padding: 0;
   width: 100%;
-  min-height: 4.4rem;
-  line-height: normal;
   justify-content: inherit;
-  box-shadow: none;
+  min-height: 4.4rem;
   font-weight: normal;
+  line-height: normal;
+  text-decoration: none;
+  text-transform: none;
+  color: inherit;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 ion-item-content {
@@ -46,18 +48,18 @@ ion-item-content {
   white-space: normal;
 }
 
+.list .item > icon:first-child {
+  min-width: 24px;
+  text-align: center;
+}
+
+.list .item > icon[small]:first-child {
+  min-width: 18px;
+}
+
 .list .item {
   border-radius: 0;
 
-  icon:first-child {
-    min-width: 24px;
-    text-align: center;
-  }
-
-  icon[small]:first-child {
-    min-width: 18px;
-  }
-
   &.activated {
     background-color: #d9d9d9;
   }
@@ -69,34 +71,7 @@ ion-item-content {
 
 }
 
-.list .item.item {
-
-  ion-item-content + button,
-  ion-item-content + [button],
-  button + ion-item-content,
-  [button] + ion-item-content,
-  icon + icon,
-  ion-item-content + icon,
-  .item-media + ion-item-content,
-  ion-item-content + .item-media,
-  ion-item-content + ion-item-content,
-  icon + .input,
-  .input + icon,
-  icon + .input-label,
-  .input-label + .input {
-    margin-left: 0;
-  }
-
-}
-
-.list a.item.item,
-.list button.item.item {
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-}
-
-.item icon {
+.item > icon {
   font-size: 2.4rem;
 
   &[large] {
@@ -108,18 +83,6 @@ ion-item-content {
   }
 }
 
-.list .item button.icon-only,
-.item button.icon-only icon {
-  padding: 0;
-}
-
-.item > button.icon-left icon,
-.item > button.icon-right icon {
-  font-size: 1.2em;
-  margin: 0;
-  padding: 0;
-}
-
 .item {
 
   h1 {
@@ -171,10 +134,7 @@ ion-item-content {
   text-decoration: none;
 }
 
-.item.item.item.no-border-bottom:after {
-  border: none;
-}
-
+.item.item.item.no-border-bottom:after,
 .item.item.item.no-border-bottom + .item:before {
   border: none;
 }
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 231c131196..f208e9ee40 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -11,51 +11,51 @@ $item-ios-padding-bottom:         14px !default;
 $item-ios-padding-left:           16px !default;
 
 $item-ios-padding-media-top:      10px !default;
-$item-ios-padding-media-bottom:   11px !default;
+$item-ios-padding-media-bottom:   10px !default;
+
+$item-ios-padding-icon-top:       8px !default;
+$item-ios-padding-icon-bottom:    8px !default;
 
 $item-ios-avatar-size:            3.6rem !default;
 $item-ios-thumbnail-size:         5.6rem !default;
-$item-ios-note-color:             $item-ios-border-color !default;
+$item-ios-note-color:             darken($item-ios-border-color, 10%) !default;
 $item-ios-forward-icon-color:     $item-ios-border-color !default;
 
 
 .list[mode=ios] {
 
   .item {
-    font-size: $item-ios-font-size;
     margin-top: -1px;
+    padding-right: ($item-ios-padding-right / 2);
+    padding-left: ($item-ios-padding-left / 2);
+    font-size: $item-ios-font-size;
 
     &:before {
       position: absolute;
-      content: '';
       top: 0;
       right: 0;
       left: $item-ios-padding-left;
       border-top: 1px solid $item-ios-border-color;
+      content: '';
     }
 
     &:after {
       position: absolute;
-      content: '';
       right: 0;
       bottom: 0;
       left: $item-ios-padding-left;
       border-top: 1px solid $item-ios-border-color;
+      content: '';
     }
 
-    &:first-of-type {
-      &:before {
-        left: 0;
-      }
+    &:first-child:before,
+    &:last-child:after {
+      left: 0;
     }
+  }
 
-    &:last-of-type {
-      margin-bottom: -1px;
-
-      &:after {
-        left: 0;
-      }
-    }
+  ion-header + .item:before {
+    left: 0;
   }
 
   &[inset] .item {
@@ -65,53 +65,54 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     }
   }
 
-  .input-label,
-  ion-item-content,
-  .item-note {
-    margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  ion-item-content {
+    margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
   }
 
-  .item-media {
-    margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
+  [item-left],
+  [item-right] {
+    margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
+  }
+
+  icon[item-left],
+  icon[item-right] {
+    margin-top: $item-ios-padding-icon-top;
+    margin-bottom: $item-ios-padding-icon-bottom;
+  }
+
+  button[item-left],
+  button[item-right],
+  [button][item-left],
+  [button][item-right] {
+    padding: 0 0.6em;
+    font-size: 1.5rem;
+    min-height: 25px;
+  }
+
+  [item-left].icon-only icon,
+  [item-right].icon-only icon {
+    padding: 0;
+  }
+
+  [item-left].icon-left icon,
+  [item-right].icon-left icon {
+    padding-right: 0.2em;
+  }
+
+  [item-left].icon-right icon,
+  [item-right].icon-right icon {
+    padding-left: 0.2em;
   }
 
   .item-note {
     color: $item-ios-note-color;
   }
 
-  .item icon + ion-item-content {
-    margin-left: 0;
-  }
-
-  .item > icon {
-    margin-left: $item-ios-padding-left;
-    margin-right: $item-ios-padding-right;
-  }
-
-  .item-input > icon {
-    margin-top: $item-ios-padding-media-top - 1;
-  }
-
   icon[forward] {
     font-size: 2rem;
     color: $item-ios-forward-icon-color;
   }
 
-  button {
-    margin: 0 $item-ios-padding-right 0 $item-ios-padding-left;
-    padding: 2px 6px;
-    min-height: 26px;
-    font-size: 1.3rem;
-  }
-
-  .item-input .input + button {
-    margin-top: $item-ios-padding-media-top;
-  }
-
-  .badge {
-    margin-right: $item-ios-padding-right;
-  }
-
   .avatar {
     max-width: $item-ios-avatar-size;
     max-height: $item-ios-avatar-size;
diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index 558047293f..6ee08c1965 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -18,40 +18,73 @@ $item-md-body-text-line-height:  1.5 !default;
 
 $item-md-avatar-size:            4rem !default;
 $item-md-thumbnail-size:         8rem !default;
-$item-md-note-color:             $item-md-border-color !default;
+$item-md-note-color:             darken($item-md-border-color, 10%) !default;
 $item-md-forward-icon-color:     $item-md-border-color !default;
 
 
 .list[mode=md] {
 
   .item {
-    font-size: $item-md-font-size;
     margin-top: -1px;
+    padding-right: ($item-md-padding-right / 2);
+    padding-left: ($item-md-padding-left / 2);
+    font-size: $item-md-font-size;
     text-transform: none;
 
     &:before {
       position: absolute;
-      content: '';
       top: 0;
       right: 0;
       left: $item-md-padding-left;
       border-top: 1px solid $item-md-border-color;
+      content: '';
     }
 
     &:after {
       position: absolute;
-      content: '';
       right: 0;
       bottom: 0;
       left: 0;
       border-top: 1px solid $item-md-border-color;
+      content: '';
     }
   }
 
-  .input-label,
-  ion-item-content,
-  .item-note {
-    margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+  ion-header + .item:before {
+    left: 0;
+  }
+
+  ion-item-content {
+    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
+  }
+
+  [item-left],
+  [item-right] {
+    margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
+  }
+
+  button[item-left],
+  button[item-right],
+  [button][item-left],
+  [button][item-right] {
+    padding: 0 0.6em;
+    min-height: 26px;
+    font-size: 1.3rem;
+  }
+
+  [item-left].icon-only icon,
+  [item-right].icon-only icon {
+    padding: 0;
+  }
+
+  [item-left].icon-left icon,
+  [item-right].icon-left icon {
+    padding-right: 0.2em;
+  }
+
+  [item-left].icon-right icon,
+  [item-right].icon-right icon {
+    padding-left: 0.2em;
   }
 
   .item-text-wrap ion-item-content {
@@ -59,21 +92,16 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     line-height: $item-md-body-text-line-height;
   }
 
-  .item-media {
-    margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
-  }
-
   .item-note {
     color: $item-md-note-color;
   }
 
-  .item > icon {
-    margin-left: $item-md-padding-left;
-    margin-right: $item-md-padding-right;
+  .item[actions] ion-item-content {
+    margin: 4px;
   }
 
-  .item-input > icon {
-    margin-top: $item-md-padding-media-top;
+  icon + ion-item-content {
+    margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
   }
 
   icon[forward] {
@@ -81,24 +109,6 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     color: $item-md-forward-icon-color;
   }
 
-  .item > button {
-    margin: 0 $item-md-padding-right 0 $item-md-padding-left;
-    padding: 2px 6px;
-    min-height: 26px;
-  }
-
-  .item-input .input + button {
-    margin-top: $item-md-padding-media-top;
-  }
-
-  .item[actions] ion-item-content {
-    margin: 8px;
-  }
-
-  .badge {
-    margin-right: $item-md-padding-right;
-  }
-
   .avatar {
     max-width: $item-md-avatar-size;
     max-height: $item-md-avatar-size;
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index 137abefedd..9af8cefa9d 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -23,17 +23,40 @@
   </button>
 
   <ion-item>
-    <button item-left>Edit</button>
-    ion-item left button
+    <button item-left>Default</button>
+    Inner Buttons
+    <button outline item-right>Outline</button>
   </ion-item>
 
   <ion-item>
-    ion-item right button[outline][secondary]
-    <button secondary outline item-right>Open</button>
+    <button item-left>
+      <icon name="ion-home"></icon>
+      Left Icon
+    </button>
+    left icon buttons
+    <button outline item-right>
+      <icon name="ion-star"></icon>
+      Left Icon
+    </button>
   </ion-item>
 
   <ion-item>
-    ion-item icon only button
+    <button item-left>
+      Right Icon
+      <icon name="ion-home"></icon>
+    </button>
+    right icon buttons
+    <button outline item-right>
+      Right Icon
+      <icon name="ion-star"></icon>
+    </button>
+  </ion-item>
+
+  <ion-item>
+    <button item-left>
+      <icon name="ion-help-circled"></icon>
+    </button>
+    icon only buttons
     <button item-right>
       <icon name="ion-help-circled"></icon>
     </button>
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index 7e79766d98..e34cb98c68 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -8,43 +8,49 @@
   </ion-item>
 
   <a ion-item href="#">
-    a[ion-item] with forward icon
+    a[ion-item] w/ forward icon
     <icon forward item-right></icon>
   </a>
 
   <button ion-item>
-    button[ion-item] with forward icon
+    button[ion-item] w/ forward icon
     <icon forward item-right></icon>
   </button>
 
   <a ion-item href="#">
-    a[ion-item] with right side default icon
+    a[ion-item] w/ right side default icon
     <icon name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    a[ion-item] with right side large icon
+    a[ion-item] w/ right side large icon
     <icon large name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    a[ion-item] with right side small icon
+    a[ion-item] w/ 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[ion-item] with left side icon
+    button[ion-item] w/ left side icon
   </button>
 
   <button ion-item>
     <icon name="ion-flag" item-left></icon>
-    button[ion-item] with both side icons
+    button[ion-item] w/ both side icons
     <icon name="ion-ios-checkmark" item-right></icon>
   </button>
 
+  <ion-item>
+    <icon name="ion-flag" item-left></icon>
+    ion-item w/ both side icons
+    <icon name="ion-ios-checkmark" item-right></icon>
+  </ion-item>
+
   <a ion-item href="#">
-    a[ion-item] with two right side icons
+    a[ion-item] w/ two right side icons
     <icon name="ion-checkmark-circled" item-right></icon>
     <icon name="ion-shuffle" item-right></icon>
   </a>
@@ -52,12 +58,17 @@
   <button ion-item>
     <icon name="ion-clipboard" item-left></icon>
     <icon name="ion-minus-circled" item-left></icon>
-    button[ion-item] with two left side icons
+    button[ion-item] w/ two left side icons
   </button>
 
   <button ion-item>
     Red Balloons
-    <div class="badge" item-right>99</div>
+    <item-badge item-right>99</item-badge>
   </button>
 
+  <ion-item>
+    Problems
+    <item-badge item-right>99</item-badge>
+  </ion-item>
+
 </ion-list>
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index 9965de86c9..b2be5288d5 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -104,7 +104,7 @@ export class RadioGroup extends Ion {
   '<ion-item-content id="{{labelId}}">' +
     '<ng-content></ng-content>' +
   '</ion-item-content>' +
-  '<div class="item-media media-radio">' +
+  '<div item-right class="item-media media-radio">' +
     '<div class="radio-icon"></div>' +
   '</div>'
 })
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 43bb705ed1..abc0cfd613 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -26,7 +26,7 @@ $switch-ios-transition-duration:       300ms !default;
 
   .item-media {
     margin: 0;
-    padding: 6px $item-ios-padding-right 6px ($item-ios-padding-left + 20);
+    padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
   }
 
 
diff --git a/ionic/components/switch/modes/material.scss b/ionic/components/switch/modes/material.scss
index f8c64201ff..a0a274ca7a 100644
--- a/ionic/components/switch/modes/material.scss
+++ b/ionic/components/switch/modes/material.scss
@@ -22,7 +22,7 @@ $switch-md-transition-duration:       300ms !default;
 
   .item-media {
     margin: 0;
-    padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
+    padding: 6px ($item-md-padding-right / 2) 6px $item-md-padding-left;
   }
 
 
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index ae77cf9ef9..87b3145342 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -127,7 +127,7 @@ class MediaSwitch {
   '<ion-item-content id="{{labelId}}">' +
     '<ng-content></ng-content>' +
   '</ion-item-content>' +
-  '<div class="item-media media-switch">' +
+  '<div item-right class="item-media media-switch">' +
     '<div class="switch-icon"></div>' +
   '</div>',
   directives: [MediaSwitch]
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index 5d0fedd21f..7f26858584 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -3,10 +3,11 @@
 // --------------------------------------------------
 
 
-.list[mode=ios] {
+ion-list[mode=ios],
+ion-card[mode=ios] {
 
   .text-input {
-    margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+    margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
     padding: 0;
   }
 
@@ -15,4 +16,8 @@
     padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
   }
 
+  ion-label {
+    margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
+  }
+
 }
diff --git a/ionic/components/text-input/modes/material.scss b/ionic/components/text-input/modes/material.scss
index b205242ced..88b9fbb759 100644
--- a/ionic/components/text-input/modes/material.scss
+++ b/ionic/components/text-input/modes/material.scss
@@ -3,10 +3,11 @@
 // --------------------------------------------------
 
 
-.list[mode=md] {
+ion-list[mode=md],
+ion-card[mode=md] {
 
   .text-input {
-    margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
     padding: 0;
   }
 
@@ -15,4 +16,8 @@
     padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
   }
 
+  ion-label {
+    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
+  }
+
 }
diff --git a/ionic/components/text-input/test/fixed-inline-labels/main.html b/ionic/components/text-input/test/fixed-inline-labels/main.html
index 09a20505df..75b2c8be5a 100644
--- a/ionic/components/text-input/test/fixed-inline-labels/main.html
+++ b/ionic/components/text-input/test/fixed-inline-labels/main.html
@@ -19,7 +19,7 @@
     <ion-input fixed-label>
       <ion-label>From</ion-label>
       <input value="Text 3" type="text">
-      <button clear>
+      <button clear item-right>
         <icon name="ion-power"></icon>
       </button>
     </ion-input>
@@ -30,19 +30,19 @@
     </ion-input>
 
     <ion-input fixed-label>
-      <icon name="ion-earth"></icon>
+      <icon name="ion-earth" item-left></icon>
       <ion-label>Website</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
     <ion-input fixed-label>
-      <icon name="ion-email"></icon>
+      <icon name="ion-email" item-left></icon>
       <ion-label>Email</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input fixed-label>
-      <icon name="ion-earth"></icon>
+      <icon name="ion-earth" item-left></icon>
       <ion-label>Phone</ion-label>
       <input value="867-5309" type="tel">
     </ion-input>
@@ -55,7 +55,7 @@
     <ion-input fixed-label>
       <ion-label>Score</ion-label>
       <input value="10" type="number">
-      <button outline>Update</button>
+      <button outline item-right>Update</button>
     </ion-input>
 
     <ion-input fixed-label>
diff --git a/ionic/components/text-input/test/inline-labels/main.html b/ionic/components/text-input/test/inline-labels/main.html
index 0d99b075fa..f00c78e1d9 100644
--- a/ionic/components/text-input/test/inline-labels/main.html
+++ b/ionic/components/text-input/test/inline-labels/main.html
@@ -19,7 +19,7 @@
     <ion-input>
       <ion-label>From:</ion-label>
       <input value="Text 3" type="text">
-      <button clear>
+      <button clear item-right>
         <icon name="ion-power"></icon>
       </button>
     </ion-input>
@@ -30,19 +30,19 @@
     </ion-input>
 
     <ion-input>
-      <icon name="ion-earth"></icon>
+      <icon name="ion-earth" item-left></icon>
       <ion-label>Website:</ion-label>
       <input value="http://ionic.io/" type="url">
     </ion-input>
 
     <ion-input>
-      <icon name="ion-email"></icon>
+      <icon name="ion-email" item-left></icon>
       <ion-label>Email:</ion-label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input>
-      <icon name="ion-edit"></icon>
+      <icon name="ion-edit" item-left></icon>
       <ion-label>Feedback:</ion-label>
       <textarea placeholder="Placeholder Text"></textarea>
     </ion-input>
@@ -50,13 +50,13 @@
     <ion-input>
       <ion-label>More Info:</ion-label>
       <input placeholder="Placeholder Text" type="text">
-      <icon name="ion-flag"></icon>
+      <icon name="ion-flag" item-right></icon>
     </ion-input>
 
     <ion-input>
       <ion-label>Score:</ion-label>
       <input value="10" type="number">
-      <button outline>Update</button>
+      <button outline item-right>Update</button>
     </ion-input>
 
     <ion-input>
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 45850097f3..ffcecdefbd 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -8,13 +8,13 @@
   <ion-list inset>
 
     <ion-input>
-      <icon name="ion-search"></icon>
+      <icon name="ion-search" item-left></icon>
       <input value="Input inside an inset list" type="text">
     </ion-input>
 
     <ion-input>
       <input value="Input inside an inset list" type="text">
-      <icon name="ion-ios-mic"></icon>
+      <icon name="ion-ios-mic" item-right></icon>
     </ion-input>
 
   </ion-list>
@@ -23,13 +23,13 @@
   <ion-list inset>
 
     <ion-input inset>
-      <icon name="ion-search"></icon>
+      <icon name="ion-search" item-left></icon>
       <input value="Inset input inside an inset list" type="text">
     </ion-input>
 
     <ion-input inset>
       <input value="Inset input inside an inset list" type="text">
-      <icon name="ion-ios-mic"></icon>
+      <icon name="ion-ios-mic" item-right></icon>
     </ion-input>
 
   </ion-list>
@@ -38,9 +38,9 @@
   <ion-list>
 
     <ion-input inset>
-      <icon name="ion-search"></icon>
+      <icon name="ion-search" item-left></icon>
       <input value="Inset input inside a list" type="text">
-      <button outline>Search</button>
+      <button outline item-right>Search</button>
     </ion-input inset>
 
   </ion-list>
@@ -49,13 +49,13 @@
   <ion-card>
 
     <ion-input>
-      <icon name="ion-search"></icon>
+      <icon name="ion-search" item-left></icon>
       <input value="Input inside a card" type="text">
     </ion-input>
 
     <ion-input>
       <input value="Input inside a card" type="text">
-      <icon name="ion-ios-mic"></icon>
+      <icon name="ion-ios-mic" item-right></icon>
     </ion-input>
 
   </ion-card>
diff --git a/ionic/components/text-input/test/placeholder-labels/main.html b/ionic/components/text-input/test/placeholder-labels/main.html
index b748ea7ad4..80deeb35de 100644
--- a/ionic/components/text-input/test/placeholder-labels/main.html
+++ b/ionic/components/text-input/test/placeholder-labels/main.html
@@ -15,12 +15,12 @@
     </ion-input>
 
     <ion-input>
-      <icon name="ion-ios-telephone"></icon>
+      <icon name="ion-ios-telephone" item-left></icon>
       <input placeholder="Text Input Placeholder" type="text">
     </ion-input>
 
     <ion-input>
-    <icon name="ion-android-call"></icon>
+      <icon name="ion-android-call" item-left></icon>
       <input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
     </ion-input>
 
diff --git a/ionic/components/text-input/test/stacked-labels/main.html b/ionic/components/text-input/test/stacked-labels/main.html
index fa63df3df4..7a53d8acf7 100644
--- a/ionic/components/text-input/test/stacked-labels/main.html
+++ b/ionic/components/text-input/test/stacked-labels/main.html
@@ -59,6 +59,3 @@
   </ion-list>
 
 </ion-content>
-
-
-<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index d3a7a3d770..395cec5734 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -51,18 +51,6 @@
     <ion-loading-icon></ion-loading-icon>
   </ion-app>
 
-<!--  <script src="../../../lib/traceur-runtime.js"></script>
-  <script src="../../../lib/system.js"></script>
-  <script src="../../../lib/e2e.config.js"></script>
-
-  <script src="../../../lib/angular2.dev.js"></script>
-
-  <script src="index.js"></script>
-
-  <script src="../../../lib/ionic.bundle.js"></script>
-
-  <script src="../../../lib/web-animations.min.js"></script> -->
-
   <script src="../../../js/ionic.bundle.js"></script>
 
   <script>System.config({"baseURL": "../../../"})</script>