diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss index 4d46151b7b..11a56bf6a9 100644 --- a/ionic/components/item/item-sliding.scss +++ b/ionic/components/item/item-sliding.scss @@ -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 { diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index baf7060866..71f9ad3cb0 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -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; } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index a7bdc45beb..83066f77fc 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -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; +}