fix item-sliding bg bug

This commit is contained in:
Adam Bradley
2015-12-08 13:48:27 -06:00
parent f07d7ac520
commit 6a7f5fadc9
3 changed files with 26 additions and 8 deletions

View File

@@ -1,7 +1,10 @@
@import "../../globals.core";
// Item Sliding
// --------------------------------------------------
// The hidden right-side buttons that can be exposed under a list item with dragging.
ion-item-sliding {
display: block;
position: relative;
@@ -31,13 +34,15 @@ ion-item-options .button {
ion-item-sliding.active-slide {
.item,
.item.item.activated {
.item.activated {
position: relative;
z-index: $z-index-item-options + 1;
opacity: 1;
transition: all 300ms cubic-bezier(0.36,0.66,0.04,1);
pointer-events: none;
}
ion-item-options {

View File

@@ -14,8 +14,7 @@ $item-ios-divider-bg: #f7f7f7 !default;
$item-ios-divider-color: #222 !default;
$item-ios-divider-padding: 5px 15px !default;
$item-ios-sliding-content-bg: $background-ios-color !default;
$item-ios-sliding-transition: transform 250ms ease-in-out !default;
$item-ios-sliding-content-bg: $list-ios-background-color !default;
// iOS Item
@@ -82,6 +81,10 @@ $item-ios-sliding-transition: transform 250ms ease-in-out !default;
border-bottom: 1px solid $list-ios-border-color;
}
&.hairlines .item-inner {
border-bottom-width: 0.55px;
}
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
@@ -209,6 +212,9 @@ ion-item-divider {
}
&.hairlines .item-inner {
border-bottom-width: 0.55px;
// iOS Item Sliding
// --------------------------------------------------
ion-item-sliding {
background-color: $item-ios-sliding-content-bg;
}

View File

@@ -16,8 +16,7 @@ $item-md-divider-bg: #fff !default;
$item-md-divider-color: #222 !default;
$item-md-divider-padding: 5px 15px !default;
$item-md-sliding-content-bg: $background-md-color !default;
$item-md-sliding-transition: transform 250ms ease-in-out !default;
$item-md-sliding-content-bg: $list-md-background-color !default;
.item {
@@ -184,3 +183,11 @@ ion-item-divider {
background-color: $item-md-divider-bg;
color: $item-md-divider-color;
}
// Material Design Item Sliding
// --------------------------------------------------
ion-item-sliding {
background-color: $item-md-sliding-content-bg;
}