diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index 1179755611..56bae7ba8b 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -941,6 +941,9 @@ address {
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #52a329; }
 
+/**
+ * An individual list item.
+ */
 .list-item {
   position: relative;
   display: block;
@@ -1070,12 +1073,21 @@ a.list-item {
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
 
+/**
+ * List editing styles. These trigger when the entire list goes into
+ * "edit mode"
+ */
 .list-editing .list-item-content {
-  margin-left: 48px; }
+  margin-left: 30px; }
 .list-editing .list-item-edit {
   left: 0px;
   opacity: 1; }
 
+/**
+ * The content area of a complex list item. This area can
+ * Slide left and right and be dragged to support different
+ * UI interactions.
+ */
 .list-item-content {
   position: relative;
   background-color: #fff;
@@ -1088,6 +1100,10 @@ a.list-item {
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
+/**
+ * The left-side edit area of a complex list item. This area shows
+ * whe the list item is in edit mode.
+ */
 .list-item-edit {
   position: absolute;
   z-index: 0;
@@ -1098,10 +1114,16 @@ a.list-item {
   line-height: 100%;
   opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+  .list-item-edit .button {
+    height: 100%; }
   .list-item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
 
+/**
+ * The hidden right-side buttons that can be exposed under a list item
+ * with dragging.
+ */
 .list-item-buttons {
   position: absolute;
   z-index: 0;
@@ -1113,6 +1135,9 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
+/**
+ * A list divider.
+ */
 .list-divider {
   padding: 5px 15px;
   background-color: whitesmoke;
diff --git a/dist/ionic.css b/dist/ionic.css
index 17e218f997..8fcf065fb4 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -2028,6 +2028,9 @@ address {
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
       border-color: #52a329; }
 
+/**
+ * An individual list item.
+ */
 .list-item {
   position: relative;
   display: block;
@@ -2157,12 +2160,21 @@ a.list-item {
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
 
+/**
+ * List editing styles. These trigger when the entire list goes into
+ * "edit mode"
+ */
 .list-editing .list-item-content {
-  margin-left: 48px; }
+  margin-left: 30px; }
 .list-editing .list-item-edit {
   left: 0px;
   opacity: 1; }
 
+/**
+ * The content area of a complex list item. This area can
+ * Slide left and right and be dragged to support different
+ * UI interactions.
+ */
 .list-item-content {
   position: relative;
   background-color: #fff;
@@ -2175,6 +2187,10 @@ a.list-item {
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
+/**
+ * The left-side edit area of a complex list item. This area shows
+ * whe the list item is in edit mode.
+ */
 .list-item-edit {
   position: absolute;
   z-index: 0;
@@ -2185,10 +2201,16 @@ a.list-item {
   line-height: 100%;
   opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+  .list-item-edit .button {
+    height: 100%; }
   .list-item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
 
+/**
+ * The hidden right-side buttons that can be exposed under a list item
+ * with dragging.
+ */
 .list-item-buttons {
   position: absolute;
   z-index: 0;
@@ -2200,6 +2222,9 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
+/**
+ * A list divider.
+ */
 .list-divider {
   padding: 5px 15px;
   background-color: whitesmoke;
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 10559aabe8..fcb402d00c 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -10,9 +10,9 @@
   }
 }
 
-// Individual list items
-// -------------------------
-
+/**
+ * An individual list item.
+ */
 .list-item {
   position: relative;
   display: block;
@@ -65,6 +65,7 @@
     }
   }
 
+  // Different themes for list items
   &.list-item-default { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
   &.list-item-secondary { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
   &.list-item-primary { @include list-item-style-active($brand-primary, $gray-dark, $white); }
@@ -88,9 +89,13 @@ a.list-item {
   }
 }
 
+/**
+ * List editing styles. These trigger when the entire list goes into
+ * "edit mode"
+ */
 .list-editing {
   .list-item-content {
-    margin-left: 48px;
+    margin-left: 30px;
   }
   .list-item-edit {
     left: 0px;
@@ -99,6 +104,12 @@ a.list-item {
 }
 
 
+
+/**
+ * The content area of a complex list item. This area can
+ * Slide left and right and be dragged to support different
+ * UI interactions.
+ */
 .list-item-content {
   position: relative;
 
@@ -120,6 +131,10 @@ a.list-item {
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
 }
 
+/**
+ * The left-side edit area of a complex list item. This area shows
+ * whe the list item is in edit mode.
+ */
 .list-item-edit {
   position: absolute;
   z-index: 0;
@@ -132,12 +147,20 @@ a.list-item {
 
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
+  .button {
+    height: 100%;
+  }
+
   i {
     color: $brand-danger;
     font-size: 24px;
   }
 }
 
+/**
+ * The hidden right-side buttons that can be exposed under a list item
+ * with dragging.
+ */
 .list-item-buttons {
   position: absolute;
   z-index: 0;
@@ -153,6 +176,9 @@ a.list-item {
 }
 
 
+/**
+ * A list divider.
+ */
 .list-divider {
   padding: 5px 15px;
   background-color: $list-divider-bg;
@@ -161,9 +187,6 @@ a.list-item {
 }
 
 
-// Custom content options
-// -------------------------
-
 .list-item-heading {
   margin-top: 0;
   margin-bottom: 5px;