refactor(list): removed absolutely positioned borders, changed to an inner div

references #437

ionic/components/item/item.scss

@@ -5,7 +5,6 @@
 
 
 .item {
-  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -31,7 +30,7 @@
   font-weight: 500;
   width: 100%;
   z-index: 1000;
-  
+
   &.sticky {
     position: -webkit-sticky;
     position: sticky;
@@ -56,6 +55,12 @@ button.item.item {
   will-change: initial;
 }
 
+.item-inner {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
 ion-item-content {
   margin: 0;
   flex: 1;

ionic/components/item/item.ts

@@ -21,10 +21,12 @@ import {Component} from 'angular2/angular2';
   selector: 'ion-item,[ion-item]',
   template:
     '<ng-content select="[item-left]"></ng-content>' +
-    '<ng-content select="[item-right]"></ng-content>' +
+    '<div class="item-inner">' +
-    '<ion-item-content>' +
+      '<ng-content select="[item-right]"></ng-content>' +
-      '<ng-content></ng-content>'+
+      '<ion-item-content>' +
-    '</ion-item-content>',
+        '<ng-content></ng-content>'+
+      '</ion-item-content>' +
+    '</div>',
   host: {
     '[class.item]': 'isItem'
   }

ionic/components/item/modes/ios.scss

@@ -40,68 +40,69 @@ ion-note {
   color: $item-ios-note-color;
 }
 
-.list {
+.item-group {
+  ion-item-group-title {
+    border-bottom: 1px solid $item-ios-border-color;
+  }
 
-  .item-group {
+  .item:first-child {
-    // Make sure the first and last items don't have borders
+    .item-inner {
-    > .item:first-of-type:before {
+      border-top-width: 0;
-      border-top: none !important;
-    }
-    > .item:last-of-type:after {
-      border-top: none !important;
     }
   }
+}
+
+.list {
 
   .item {
     margin-top: -1px;
-    padding-right: ($item-ios-padding-right / 2);
+    padding-left: $item-ios-padding-left;
-    padding-left: ($item-ios-padding-left / 2);
     font-size: $item-ios-font-size;
 
-    &:before {
+    &:first-child {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: $item-ios-padding-left;
       border-top: 1px solid $item-ios-border-color;
-      content: '';
+
-      pointer-events: none;
+      .item-inner {
+        border-top-width: 0;
+      }
     }
 
-    &:after {
+    &:last-child {
-      position: absolute;
+      border-bottom: 1px solid $item-ios-border-color;
-      right: 0;
+    }
-      bottom: 0;
+
-      left: $item-ios-padding-left;
+    .item-inner {
+      padding-right: ($item-ios-padding-right / 2);
       border-top: 1px solid $item-ios-border-color;
-      content: '';
-      pointer-events: none;
     }
 
-    &:first-child:before,
+    ion-item-content {
-    &:last-child:after {
+      margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
-      left: 0;
     }
   }
 
-  ion-header + .item:first-of-type:before {
+  // If the item has the no-lines attribute we want to remove the border from it
-    left: 0;
+  // and the border from the next item if there is one
-  }
+  .item[no-lines] {
+    border-width: 0;
 
-  &[inset] .item {
+    .item-inner {
-    &:before,
+      border-width: 0;
-    &:after {
+    }
-      left: 0;
+
+    + .item {
+      .item-inner {
+        border-width: 0;
+      }
     }
   }
 
-  ion-item-content {
+  [item-left] {
-    margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
+    margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0;
   }
 
-  [item-left],
   [item-right] {
-    margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
+    margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
   }
 
   icon[item-left],
@@ -224,7 +225,7 @@ ion-card {
     background-repeat: no-repeat;
     background-position: right ($item-ios-padding-right - 2) center;
     background-size: 14px 14px;
-    padding-right: 32px;
+    margin-right: 32px;
   }
 
   ion-item-sliding[detail-push] {
@@ -234,11 +235,12 @@ ion-card {
       background-repeat: no-repeat;
       background-position: right ($item-ios-padding-right - 2) center;
       background-size: 14px 14px;
-      padding-right: 32px;
+      margin-right: 32px;
     }
   }
 }
 
+// Hairlines for iOS need to be set at 0.55px to show on iPhone 6 and 6 Plus
 &.hairlines .list {
 
   ion-item-options {
@@ -255,28 +257,26 @@ ion-card {
     margin-bottom: 0.55px;
   }
 
+  ion-header + .item {
+    border-top-width: 0.55px;
+
+    .item-inner {
+      border-width: 0;
+    }
+  }
+
   .item {
     margin-top: -0.55px;
+    border-width: 0.55px;
 
-    &:last-child {
+    .item-inner {
-      margin-bottom: -0.55px;
+      border-width: 0.55px;
     }
 
-    &:before,
+    &:first-child {
-    &:after {
+      .item-inner {
-      border-top-width: 0.55px;
+        border-top-width: 0px;
+      }
     }
   }
-
-}
-
-.item[no-lines] {
-  &:before,
-  &:after {
-    border-width: 0;
-  }
-
-  + .item:before {
-    border-width: 0;
-  }
 }

ionic/components/list/modes/ios.scss

@@ -31,25 +31,18 @@ $list-ios-header-color:               #333 !default;
     letter-spacing: $list-ios-header-letter-spacing;
     text-transform: uppercase;
     color: $list-ios-header-color;
+  }
 
-    &:after {
+  ion-header + .item {
-      position: absolute;
+    border-top: 1px solid $item-ios-border-color;
-      z-index: 1;
+
-      right: 0;
+    .item-inner {
-      bottom: 0;
+      border-top-width: 0;
-      left: 0;
-      border-top: 1px solid $item-ios-border-color;
-      content: '';
-      pointer-events: none;
     }
   }
 
 }
 
-&.hairlines .list ion-header:after {
-  border-top-width: 0.55px;
-}
-
 .list + .list {
   margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
 }
@@ -63,24 +56,22 @@ $list-ios-header-color:               #333 !default;
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
   border-radius: $list-inset-ios-border-radius;
 
+  ion-header {
+    border-radius: inherit;
+  }
+
   .item:first-child {
     margin-top: 0;
     border-top-right-radius: $list-inset-ios-border-radius;
     border-top-left-radius: $list-inset-ios-border-radius;
-
+    border-top: none;
-    &:before {
-      border-top: none;
-    }
   }
 
   .item:last-child {
     margin-bottom: 0;
     border-bottom-right-radius: $list-inset-ios-border-radius;
     border-bottom-left-radius: $list-inset-ios-border-radius;
-
+    border-bottom: none;
-    &:after {
-      border-top: none;
-    }
   }
 }
 
@@ -90,9 +81,8 @@ $list-ios-header-color:               #333 !default;
 
 &.hairlines .list[no-lines],
 .list[no-lines] {
-  ion-header:after,
+  .item,
-  .item:before,
+  .item .item-inner {
-  .item:after {
     border-width: 0;
   }
 }

ionic/components/list/test/no-lines/main.html

@@ -27,4 +27,94 @@
       </ion-note>
     </ion-item>
   </ion-list>
+
+  <ion-list>
+    <ion-header>
+      List With No Lines First Item
+    </ion-header>
+
+    <ion-item no-lines>
+      <icon pizza item-left></icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-header>
+      List With No Lines Middle Item
+    </ion-header>
+
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item no-lines>
+      <icon beer item-left></icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-header>
+      List With No Lines Last Item
+    </ion-header>
+
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item no-lines>
+      <icon wine item-left></icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
 </ion-content>