From 4e57fcf98a65e83a36d08cdc9478a7bfd7074b6d Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Mon, 8 Feb 2016 00:41:19 +0100
Subject: [PATCH] feat(ion-item-sliding): style icons on top of text in an
 option button

closes #5352
---
 ionic/components/button/button.scss          |  2 +-
 ionic/components/item/item-sliding.scss      | 16 +++++++++++++-
 ionic/components/item/test/sliding/main.html | 23 +++++++++++++++-----
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 3b26fc0234..8184beac68 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -29,7 +29,7 @@ $button-round-border-radius:      64px !default;
   @include appearance(none);
 }
 
-span.button-inner {
+.button-inner {
     width: 100%;
     height: 100%;
     display: flex;
diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index 11a56bf6a9..0787b8336f 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -32,8 +32,22 @@ ion-item-options .button {
   height: 100%;
 }
 
-ion-item-sliding.active-slide {
+ion-item-sliding:not([horizontal]) {
+  .button.button-icon-left {
+    font-size: 14px;
 
+    .button-inner {
+      flex-direction: column;
+    }
+    ion-icon {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      padding-bottom: 0.3em;
+    }
+  }
+}
+
+ion-item-sliding.active-slide {
 
   .item,
   .item.activated {
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index 9240f6b270..bfa79cc813 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -31,7 +31,9 @@
       </ion-item>
       <ion-item-options>
         <button primary (click)="archive(item)">Archive</button>
-        <button danger (click)="del(item)"><ion-icon name="trash"></ion-icon></button>
+        <button danger (click)="del(item)">
+          <ion-icon name="trash"></ion-icon>
+        </button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -48,13 +50,15 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding #item>
+    <ion-item-sliding #item horizontal>
       <ion-item>
         <ion-icon name="mail" item-left></ion-icon>
         One Line w/ Icon, div only text
       </ion-item>
       <ion-item-options>
-        <button primary (click)="archive(item)">Archive</button>
+        <button primary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>Archive
+        </button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -66,7 +70,16 @@
         One Line w/ Avatar, div only text
       </ion-item>
       <ion-item-options>
-        <button primary (click)="archive(item)">Archive</button>
+        <button primary>
+          <ion-icon name="more"></ion-icon>More
+        </button>
+        <button secondary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>Archive
+        </button>
+        <button danger (click)="del(item)">
+          <ion-icon name="trash"></ion-icon>Delete
+        </button>
+
       </ion-item-options>
     </ion-item-sliding>
 
@@ -104,4 +117,4 @@
   img {
     height: 100px;
   }
-</style>
+</style>
\ No newline at end of file