List view and dividers

dist/framework-with-theme.css

@@ -14,6 +14,10 @@ body {
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 
+ul {
+  margin: 0;
+  padding: 0; }
+
 .content {
   position: fixed;
   top: 0;
@@ -30,14 +34,6 @@ a {
   -webkit-transform: translateZ(0px);
   transform: translateZ(0px); }
 
-/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
-   Note: For these to work, content must come after both bars in the markup */
-.bar ~ .content {
-  top: 44px; }
-
-.bar ~ .content {
-  bottom: 51px; }
-
 .bar {
   position: fixed;
   right: 0;
@@ -88,6 +84,14 @@ a {
 .bar-footer {
   bottom: 0; }
 
+/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+   Note: For these to work, content must come after both bars in the markup */
+.bar ~ .content {
+  top: 50px; }
+
+.bar ~ .content {
+  bottom: 51px; }
+
 .button {
   position: relative;
   display: inline-block;
@@ -110,7 +114,7 @@ a {
     margin-bottom: 0; }
   .list-item > .badge {
     float: right; }
-  .list-item > i {
+  .list-item > i:last-child {
     float: right; }
   .list-item > .badge + .badge {
     margin-right: 5px; }
@@ -122,6 +126,9 @@ a {
 a.list-item:hover, a.list-item:focus {
   text-decoration: none; }
 
+.list-divider {
+  padding: 5px 15px; }
+
 .list-item-heading {
   margin-top: 0;
   margin-bottom: 5px; }
@@ -157,3 +164,8 @@ a.list-item:hover, a.list-item:focus {
   border: 1px solid #dddddd; }
   .button-default:active {
     background-color: #eeeeee; }
+
+.list-divider {
+  background-color: whitesmoke;
+  color: #222222;
+  font-weight: bold; }

example/index.html

@@ -42,6 +42,15 @@
           Sasafras
           <i class="icon-arrow-right"></i>
         </a>
+        <a href="#" class="list-item">
+          Candy
+          <i class="icon-arrow-right"></i>
+        </a>
+        <li class="list-divider">Other things</li>
+        <a href="#" class="list-item">
+          Cheese cords
+          <i class="icon-arrow-right"></i>
+        </a>
       </ul>
       <p>
         Here is some content

scss/framework/structure/_bar.scss

@@ -73,3 +73,11 @@
 }
 
 
+/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+   Note: For these to work, content must come after both bars in the markup */
+.bar ~ .content {
+  top: $barHeight;
+}
+.bar ~ .content {
+  bottom: 51px;
+}

scss/framework/structure/_base.scss

@@ -19,6 +19,8 @@ a {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+ul { margin: 0; padding: 0; }
+
 .content {
 	position: fixed;
   top: 0;
@@ -37,12 +39,3 @@ a {
   -webkit-transform: translateZ(0px);
           transform: translateZ(0px);
 }
-
-/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
-   Note: For these to work, content must come after both bars in the markup */
-.bar ~ .content {
-  top: 44px;
-}
-.bar ~ .content {
-  bottom: 51px;
-}

scss/framework/structure/_listview.scss

@@ -31,7 +31,8 @@
     float: right;
   }
 
-  > i {
+  // Align icons to the right
+  > i:last-child {
     float: right;
   }
 
@@ -76,6 +77,10 @@ a.list-item {
   }
 }
 
+.list-divider {
+  padding: 5px 15px;
+}
+
 // Custom content options
 // -------------------------
 
@@ -86,4 +91,4 @@ a.list-item {
 .list-item-text {
   margin-bottom: 0;
   line-height: 1.3;
-}
+}

scss/framework/theme/default/_listview.scss

@@ -0,0 +1,5 @@
+.list-divider {
+  background-color: $listDividerBackground;
+  color: $listDividerColor;
+  font-weight: bold;
+}

scss/framework/theme/default/_variables.scss

@@ -23,4 +23,11 @@ $barDefaultBackground: #fff;
 $barDefaultBorderBottom: 1px solid #ddd;
 
 $barSecondaryBackground: #f5f5f5;
-$barSecondaryBorderBottom: 1px solid #ccc;
+$barSecondaryBorderBottom: 1px solid #ccc;
+
+//
+// Lists
+$listDividerBackground: #f5f5f5;
+$listDividerColor: #222;
+
+