fix(item): sliding item works with and without borders

closes #7081

Author: manucorporat

src/components/item/item-sliding.scss

@@ -83,10 +83,14 @@ ion-item-sliding.active-slide {
   }
 
   &.active-options-left ion-item-options[side=left] {
+    width: 100%;
+
     visibility: visible;
   }
 
   &.active-options-right ion-item-options:not([side=left]) {
+    width: 100%;
+
     visibility: visible;
   }
 }
@@ -102,13 +106,6 @@ ion-item-sliding.active-slide {
   transition-timing-function: cubic-bezier(.65, .05, .36, 1);
 }
 
-ion-item-sliding.active-swipe-right,
-ion-item-sliding.active-swipe-left {
-  ion-item-options {
-    width: 100%;
-  }
-}
-
 ion-item-sliding.active-swipe-right .button-expandable {
   order: 1;
 

src/components/item/test/sliding/main.html

@@ -221,7 +221,7 @@ <h2>Normal button (no sliding)</h2>
   </ion-list>
 
 
-  <ion-list>
+  <ion-list no-lines>
     <ion-item-sliding *ngFor="let data of items" #item9>
       <ion-item text-wrap detail-push>
         <h3>ng-for {{data}}</h3>

src/components/list/list.ios.scss

@@ -182,6 +182,7 @@ ion-list[inset] + ion-list[inset] {
 ion-list[no-lines],
 &.hairlines ion-list[no-lines] {
   ion-list-header,
+  ion-item-options,
   .item,
   .item .item-inner {
     border-width: 0;

src/components/list/list.md.scss

@@ -63,6 +63,10 @@ ion-list {
     left: 0;
   }
 
+  ion-item-options {
+    border-bottom: 1px solid $list-md-border-color;
+  }
+
   ion-item-options button,
   ion-item-options [button] {
     display: inline-flex;
@@ -143,6 +147,7 @@ ion-list[inset] {
 
 ion-list[no-lines] {
   .item,
+  ion-item-options,
   .item .item-inner {
     border-width: 0;
   }