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

closes #5352
This commit is contained in:
Manu Mtz.-Almeida
2016-02-08 00:41:19 +01:00
parent 5c21b933df
commit 4e57fcf98a
3 changed files with 34 additions and 7 deletions

View File

@@ -29,7 +29,7 @@ $button-round-border-radius: 64px !default;
@include appearance(none);
}
span.button-inner {
.button-inner {
width: 100%;
height: 100%;
display: flex;

View File

@@ -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 {

View File

@@ -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>