From 16be6d0e3f1ad93ed6fa6d71a35308f464a4b5f3 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 25 Mar 2015 13:54:53 -0500
Subject: [PATCH] list iOS borders

---
 src/components/app/_z-index.scss              |  3 ++
 src/components/app/ionic.scss                 |  4 ++
 src/components/app/mixins/_colors.scss        |  4 ++
 src/components/app/mixins/_flex.scss          |  2 +
 src/components/app/mixins/_transform.scss     | 39 ++++++++++++++++
 src/components/app/mixins/_transition.scss    |  2 +
 .../item/extensions/ios/item-ios.scss         | 22 +++++++++-
 .../list/extensions/android/list-android.scss |  0
 .../list/extensions/ios/list-ios.scss         | 44 +++++++++++++++++++
 src/components/list/list.scss                 |  1 +
 10 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 src/components/app/_z-index.scss
 create mode 100644 src/components/app/mixins/_transform.scss
 create mode 100644 src/components/list/extensions/android/list-android.scss
 create mode 100644 src/components/list/extensions/ios/list-ios.scss

diff --git a/src/components/app/_z-index.scss b/src/components/app/_z-index.scss
new file mode 100644
index 0000000000..f864949b9c
--- /dev/null
+++ b/src/components/app/_z-index.scss
@@ -0,0 +1,3 @@
+
+
+$z-index-list-border:     50;
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index b428db8e18..6ff632a037 100644
--- a/src/components/app/ionic.scss
+++ b/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";
 
 
diff --git a/src/components/app/mixins/_colors.scss b/src/components/app/mixins/_colors.scss
index ea8bd002c9..0e2991167e 100644
--- a/src/components/app/mixins/_colors.scss
+++ b/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);
 }
diff --git a/src/components/app/mixins/_flex.scss b/src/components/app/mixins/_flex.scss
index 2335f220fd..b15f0dd859 100644
--- a/src/components/app/mixins/_flex.scss
+++ b/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;
diff --git a/src/components/app/mixins/_transform.scss b/src/components/app/mixins/_transform.scss
new file mode 100644
index 0000000000..71c764331e
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/app/mixins/_transition.scss b/src/components/app/mixins/_transition.scss
index 573a5e7566..6f80d1c691 100644
--- a/src/components/app/mixins/_transition.scss
+++ b/src/components/app/mixins/_transition.scss
@@ -1,6 +1,8 @@
+
 // Transition Mixins
 // --------------------------------------------------
 
+
 @mixin transition($transition...) {
   -webkit-transition: $transition;
           transition: $transition;
diff --git a/src/components/item/extensions/ios/item-ios.scss b/src/components/item/extensions/ios/item-ios.scss
index e48a8a8657..5fe4718ec7 100644
--- a/src/components/item/extensions/ios/item-ios.scss
+++ b/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;
   }
 
 }
diff --git a/src/components/list/extensions/android/list-android.scss b/src/components/list/extensions/android/list-android.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/list/extensions/ios/list-ios.scss b/src/components/list/extensions/ios/list-ios.scss
new file mode 100644
index 0000000000..92d928db1a
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index b1f7ed0150..a8cc07c685 100644
--- a/src/components/list/list.scss
+++ b/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;