feat(ion-item-sliding): style icons on top of text in an option button

closes #5352
ionic-team · Feb 7, 2016 · 4e57fcf · 4e57fcf
1 parent 5c21b93
commit 4e57fcf
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git 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
@@ -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
@@ -31,7 +31,9 @@ <h3>Adam Bradley</h3>
       </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 @@ <h3>Ben Sperry</h3>
       </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 @@ <h3>Ben Sperry</h3>
         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 @@ <h3>ng-for {{data}}</h3>
   img {
     height: 100px;
   }
-</style>
+</style>