e2e

src/components/app/ionic.scss

@@ -18,7 +18,7 @@
   "typography";
 
 
-// Components
+// Default Components
 @import
   "../aside/aside",
   "../button/button",
@@ -30,6 +30,16 @@
   "../toolbar/toolbar";
 
 
+// Android Components
+@import
+  "../item/extensions/android/item-android";
+
+
+// iOS Components
+@import
+  "../item/extensions/ios/item-ios";
+
+
 // Icons
 @import
   "../icon/icon";

src/components/item/examples/item-default/index.html

@@ -1,57 +0,0 @@
-<div class="pane">
-
-  <div class="pane-container">
-
-    <div class="bar">
-      List/Item Default CSS Tests
-    </div>
-
-    <div class="content">
-
-      <div class="list-header">
-        List Header
-      </div>
-
-      <ul class="list">
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 1
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 2
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 3
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-      </ul>
-
-
-    </div>
-
-  </div>
-
-</div>

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

@@ -0,0 +1,31 @@
+
+// iOS Item
+// --------------------------------------------------
+
+$item-ios-min-height:           44px !default;
+$item-ios-padding-top:          8px !default;
+$item-ios-padding-right:        15px !default;
+$item-ios-padding-bottom:       7px !default;
+$item-ios-padding-left:         15px !default;
+$item-ios-accessory-color:      #8e8e93 !default;
+
+
+
+.list-ios {
+
+  .item {
+    min-height: $item-ios-min-height;
+    padding-left: $item-ios-padding-left;
+  }
+
+  .item-content {
+    min-height: $item-ios-min-height;
+    padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom 0;
+  }
+
+  .item-accessory {
+    color: $item-ios-accessory-color;
+    color: red;
+  }
+
+}

src/components/item/item.scss

@@ -3,12 +3,24 @@
 // --------------------------------------------------
 
 $item-min-height:         44px !default;
-$item-padding-top:        8px !default;
+$item-padding-top:        15px !default;
 $item-padding-right:      15px !default;
-$item-padding-bottom:     7px !default;
+$item-padding-bottom:     15px !default;
 $item-padding-left:       15px !default;
 
 
+//  <li class="item">
+//    <div class="item-content">
+//      <div class="item-title">
+//        Item Title
+//      </div>
+//      <div class="item-accessory">
+//        Badge
+//      </div>
+//    </div>
+//  </li>
+
+
 .item {
   position: relative;
 
@@ -17,8 +29,8 @@ $item-padding-left:       15px !default;
   @include flex-align-items(center);
 
   min-height: $item-min-height;
-
-  padding-left: $item-padding-left;
+  margin: 0;
+  padding: 0;
 }
 
 .item-content {
@@ -32,9 +44,7 @@ $item-padding-left:       15px !default;
   width: 100%;
   min-height: $item-min-height;
 
-  padding-right: $item-padding-right;
-  padding-top: $item-padding-top;
-  padding-bottom: $item-padding-bottom;
+  padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
 }
 
 .item-title {

src/components/item/test/item-default/index.html

@@ -0,0 +1,64 @@
+<div class="pane">
+
+  <div class="pane-container">
+
+    <div class="bar">
+      List/Item Default CSS Tests
+    </div>
+
+    <div class="content">
+
+      <div class="list">
+
+        <div class="list-header">
+          List Header
+        </div>
+
+        <ul class="list-content">
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 1
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 2
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 3
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+        </ul>
+
+        <div class="list-footer">
+          List Footer
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/components/item/test/item-ios-default/index.html

@@ -0,0 +1,65 @@
+<div class="pane">
+
+  <div class="pane-container">
+
+    <div class="bar">
+      iOS List/Item Default CSS Tests
+    </div>
+
+    <div class="content">
+
+      <div class="list list-ios">
+
+        <div class="list-header">
+          List Header
+        </div>
+
+        <ul class="list-content">
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 1
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 2
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 3
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+        </ul>
+
+        <div class="list-footer">
+          List Footer
+        </div>
+
+      </div>
+
+
+    </div>
+
+  </div>
+
+</div>

src/components/list/list.scss

@@ -2,25 +2,49 @@
 // List
 // --------------------------------------------------
 
-$list-margin: 35px 0 !default;
+$list-margin: 35px             0 !default;
+$list-content-margin:          10px 0 !default;
 
 
+//  <div class="list">
+//    <div class="list-header">
+//      List Header
+//    </div>
+//    <ul class="list-content">
+//      ...
+//    </ul>
+//    <div class="list-footer">
+//      List Footer
+//    </div>
+//  </div>
+
 
 .list {
+  position: relative;
+  display: block;
   margin: $list-margin;
-  padding: 0;
-  list-style-type: none;
+  width: 100%;
 }
 
 .list-header {
   position: relative;
-  margin: 35px 15px 10px;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.list-header + .list {
-  margin-top: 10px;
+.list-header + .list-content {
+  margin: $list-content-margin;
 }
+
+.list-content {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.list-footer {
+  margin: 10px 0;
+}
+

src/components/modal/modal.html

@@ -1,3 +0,0 @@
-<div class="modal">
-  <h2>I'm a modal!</h2>
-</div>