From 33d9589700b84789349172d28a7037025f2e9d9a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 25 Mar 2015 14:23:23 -0500
Subject: [PATCH] iOS lists

---
 .../item/extensions/ios/item-ios.scss         |   5 +-
 .../item/test/item-ios-default/index.html     |   2 +-
 .../list/extensions/ios/list-ios.scss         | 103 ++++++++++++------
 3 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/src/components/item/extensions/ios/item-ios.scss b/src/components/item/extensions/ios/item-ios.scss
index 5fe4718ec7..4c24ff0ffb 100644
--- a/src/components/item/extensions/ios/item-ios.scss
+++ b/src/components/item/extensions/ios/item-ios.scss
@@ -28,17 +28,16 @@ $item-ios-border-color:         $list-ios-border-color !default;
       right: auto;
       bottom: 0;
       left: 0;
+      z-index: $z-index-list-border;
+      display: block;
 
       width: 100%;
       height: 1px;
       @include transform-origin(50%, 0);
 
       background-color: $item-ios-border-color;
-      display: block;
 
       content: '';
-
-      z-index: $z-index-list-border;
     }
   }
 
diff --git a/src/components/item/test/item-ios-default/index.html b/src/components/item/test/item-ios-default/index.html
index d55514cbfc..b41ace4001 100644
--- a/src/components/item/test/item-ios-default/index.html
+++ b/src/components/item/test/item-ios-default/index.html
@@ -1,4 +1,4 @@
-<div class="pane">
+<div class="pane" style="background: #efeff4">
 
   <div class="pane-container">
 
diff --git a/src/components/list/extensions/ios/list-ios.scss b/src/components/list/extensions/ios/list-ios.scss
index 92d928db1a..3f50ac3d61 100644
--- a/src/components/list/extensions/ios/list-ios.scss
+++ b/src/components/list/extensions/ios/list-ios.scss
@@ -2,43 +2,80 @@
 // iOS List
 // --------------------------------------------------
 
-$list-ios-border-color:      #c8c7cc !default;
+$list-ios-background-color:      #fff !default;
+$list-ios-border-color:          #c8c7cc !default;
+
+$list-ios-header-margin:         35px 15px 10px 15px !default;
+$list-ios-header-font-size:      14px !default;
+$list-ios-header-color:          #6d6d72 !default;
+
+$list-ios-footer-margin:         10px 0 35px 0 !default;
+$list-ios-footer-padding:        0 15px !default;
+$list-ios-footer-font-size:      14px !default;
+$list-ios-footer-color:          #8f8f94 !default;
 
 
-.list-ios .list-content:before {
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: auto;
-  left: 0;
+.list-ios {
 
-  width: 100%;
-  height: 1px;
-  @include transform-origin(50%, 0);
+  .list-content {
+    background: $list-ios-background-color;
+  }
 
-  background-color: $list-ios-border-color;
-  display: block;
+  .list-content:before {
+    position: absolute;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    z-index: $z-index-list-border;
+    display: block;
 
-  content: '';
+    width: 100%;
+    height: 1px;
+    @include transform-origin(50%, 0);
+
+    background-color: $list-ios-border-color;
+
+    content: '';
+  }
+
+  .list-content:after {
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    z-index: $z-index-list-border;
+    display: block;
+
+    width: 100%;
+    height: 1px;
+    @include transform-origin(50%, 0);
+
+    background-color: $list-ios-border-color;
+
+    content: '';
+  }
+
+  .list-header {
+    position: relative;
+    margin: $list-ios-header-margin;
+
+    font-size: $list-ios-header-font-size;
+    text-transform: uppercase;
+
+    color: $list-ios-header-color;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .list-footer {
+    margin: $list-ios-footer-margin;
+    padding: $list-ios-footer-padding;
+    font-size: $list-ios-footer-font-size;
+    color: $list-ios-footer-color;
+  }
 
-  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;
 }