list iOS borders

src/components/app/_z-index.scss

@@ -0,0 +1,3 @@
+
+
+$z-index-list-border:     50;

src/components/app/ionic.scss

@@ -4,11 +4,13 @@
 // Mixins
 @import
   "mixins/flex",
+  "mixins/transform",
   "mixins/transition";
 
 
 // Globals
 @import
+  "z-index",
   "normalize",
   "globals",
   "colors",
@@ -32,11 +34,13 @@
 
 // Android Components
 @import
+  "../list/extensions/android/list-android",
   "../item/extensions/android/item-android";
 
 
 // iOS Components
 @import
+  "../list/extensions/ios/list-ios",
   "../item/extensions/ios/item-ios";
 
 

src/components/app/mixins/_colors.scss

@@ -1,4 +1,8 @@
 
+// Color Functions/Mixins
+// --------------------------------------------------
+
+
 @function get-color($color, $tone: base) {
   @return map-get(map-get($colors, $color), $tone);
 }

src/components/app/mixins/_flex.scss

@@ -1,8 +1,10 @@
+
 // Flexbox Mixins
 // --------------------------------------------------
 // http://philipwalton.github.io/solved-by-flexbox/
 // https://github.com/philipwalton/solved-by-flexbox
 
+
 @mixin flex-display {
   display: -webkit-box;
   display: -webkit-flex;

src/components/app/mixins/_transform.scss

@@ -0,0 +1,39 @@
+
+// Transform Mixins
+// --------------------------------------------------
+
+
+@mixin transform($val) {
+  -webkit-transform: $val;
+          transform: $val;
+}
+
+@mixin translate($x, $y) {
+  @include transform( translate($x, $y) );
+}
+
+@mixin translate3d($x, $y, $z) {
+  @include transform( translate3d($x, $y, $z) );
+}
+
+@mixin translateZ($z) {
+  @include transform( translateZ($z) );
+}
+
+@mixin rotate($degrees) {
+  @include transform( rotate($degrees) );
+}
+
+@mixin scale($ratio) {
+  @include transform( scale($ratio) );
+}
+
+@mixin skew($x, $y) {
+  @include transform( skew($x, $y) );
+  -webkit-backface-visibility: hidden;
+}
+
+@mixin transform-origin($left, $top) {
+  -webkit-transform-origin: $left $top;
+          transform-origin: $left $top;
+}

src/components/app/mixins/_transition.scss

@@ -1,6 +1,8 @@
+
 // Transition Mixins
 // --------------------------------------------------
 
+
 @mixin transition($transition...) {
   -webkit-transition: $transition;
           transition: $transition;

src/components/item/extensions/ios/item-ios.scss

@@ -8,7 +8,7 @@ $item-ios-padding-right:        15px !default;
 $item-ios-padding-bottom:       7px !default;
 $item-ios-padding-left:         15px !default;
 $item-ios-accessory-color:      #8e8e93 !default;
-
+$item-ios-border-color:         $list-ios-border-color !default;
 
 
 .list-ios {
@@ -21,11 +21,29 @@ $item-ios-accessory-color:      #8e8e93 !default;
   .item-content {
     min-height: $item-ios-min-height;
     padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom 0;
+
+    &:after {
+      position: absolute;
+      top: auto;
+      right: auto;
+      bottom: 0;
+      left: 0;
+
+      width: 100%;
+      height: 1px;
+      @include transform-origin(50%, 0);
+
+      background-color: $item-ios-border-color;
+      display: block;
+
+      content: '';
+
+      z-index: $z-index-list-border;
+    }
   }
 
   .item-accessory {
     color: $item-ios-accessory-color;
-    color: red;
   }
 
 }

src/components/list/extensions/ios/list-ios.scss

@@ -0,0 +1,44 @@
+
+// iOS List
+// --------------------------------------------------
+
+$list-ios-border-color:      #c8c7cc !default;
+
+
+.list-ios .list-content:before {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+
+  width: 100%;
+  height: 1px;
+  @include transform-origin(50%, 0);
+
+  background-color: $list-ios-border-color;
+  display: block;
+
+  content: '';
+
+  z-index: $z-index-list-border;
+}
+
+.list-ios .list-content:after {
+  position: absolute;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 1px;
+  @include transform-origin(50%, 0);
+
+  background-color: $list-ios-border-color;
+  display: block;
+
+  content: '';
+
+  z-index: $z-index-list-border;
+}

src/components/list/list.scss

@@ -39,6 +39,7 @@ $list-content-margin:          10px 0 !default;
 }
 
 .list-content {
+  position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;