refactor(item): simplifying item css and removing unused css

Added a item with multiple buttons references #856

ionic/components/item/item.ios.scss

@@ -103,8 +103,7 @@ ion-item-content {
   margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
 }
 
-icon[item-left],
-icon[item-right] {
+.item-icon {
   margin-top: $item-ios-padding-icon-top;
   margin-bottom: $item-ios-padding-icon-bottom;
 }
@@ -119,38 +118,18 @@ ion-thumbnail[item-right] {
   margin: ($item-ios-padding-right / 2);
 }
 
-button[item-left],
-button[item-right],
-[button][item-left],
-[button][item-right] {
+.item-button {
   padding: 0 0.5em;
   font-size: 1.3rem;
   min-height: 25px;
   margin-top: 9px;
 }
 
-[item-left].button-icon-only,
-[item-right].button-icon-only,
-[item-left].button-icon-only icon,
-[item-right].button-icon-only icon,
-[item-left][clear],
-[item-right][clear] {
+.button-icon-only icon,
+.button-icon-only {
   padding: 0 1px;
 }
 
-[item-left].icon-left icon,
-[item-right].icon-left icon {
-  margin-left: 0;
-  margin-bottom: 1px;
-  padding-right: 0.3em;
-}
-
-[item-left].icon-right icon,
-[item-right].icon-right icon {
-  margin-right: 0;
-  margin-bottom: 1px;
-}
-
 ion-avatar {
   min-width: $item-ios-avatar-size;
   min-height: $item-ios-avatar-size;
@@ -231,6 +210,6 @@ ion-item-sliding {
       // todo
 
     }
-    
+
   }
 }

ionic/components/item/item.md.scss

@@ -96,40 +96,17 @@ icon[item-right] {
   margin-left: 0;
 }
 
-button[item-left],
-button[item-right],
-[button][item-left],
-[button][item-right] {
+.item-button {
   padding: 0 0.6em;
   min-height: 26px;
   font-size: 1.2rem;
 }
 
-[item-left].button-icon-only,
-[item-right].button-icon-only,
-[item-left].button-icon-only icon,
-[item-right].button-icon-only icon {
+.button-icon-only icon,
+.button-icon-only {
   padding: 0 1px;
 }
 
-[item-left][clear],
-[item-right][clear] {
-  padding: 0 8px;
-}
-
-[item-left].icon-left icon,
-[item-right].icon-left icon {
-  margin-bottom: 1px;
-  margin-left: 0;
-  padding-right: 0.3em;
-}
-
-[item-left].icon-right icon,
-[item-right].icon-right icon {
-  margin-right: 0;
-  margin-bottom: 1px;
-}
-
 [text-wrap] ion-item-content {
   font-size: $item-md-body-text-font-size;
   line-height: $item-md-body-text-line-height;

ionic/components/item/item.ts

@@ -50,7 +50,7 @@ import {Icon} from '../icon/icon';
   template:
     '<ng-content select="[item-left]"></ng-content>' +
     '<div class="item-inner">' +
-      '<ng-content select="ion-item-content"></ng-content>' +
+      '<ng-content select="ion-item-content,[item-content]"></ng-content>' +
       '<ion-item-content cnt>' +
         '<ng-content></ng-content>'+
       '</ion-item-content>' +

ionic/components/item/test/buttons/main.html

@@ -48,6 +48,13 @@
     </button>
   </ion-item>
 
+  <ion-item>
+    <button item-left (click)="testClick($event)">Button 1</button>
+    <button item-content (click)="testClick($event)">Button 2</button>
+    <button item-content (click)="testClick($event)">Button 3</button>
+    <button item-right (click)="testClick($event)">Button 4</button>
+  </ion-item>
+
   <ion-item>
     <button clear item-left (click)="testClick($event)">
       <icon navigate></icon>
@@ -87,5 +94,5 @@
     and a <a href="#" (click)="testClick($event)">link</a>.
     <button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
-  
+
 </ion-content>