diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index d3dc9f7d9d..dbfd0c240b 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1119,7 +1119,8 @@ a.list-item {
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
- padding: 15px;
+ padding: 15px 45px 15px 15px;
+ font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i {
@@ -1135,14 +1136,36 @@ a.list-item {
.list-icon-left .list-item-content i {
left: 7.5px; }
-.list-icon-right .list-item-content {
- padding-right: 45px; }
- .list-icon-right .list-item-content i {
- right: 7.5px; }
+.list-icon-right .list-item-content i {
+ right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
+a .list-item-content:after,
+button .list-item-content:after {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ display: flex;
+ height: 100%;
+ color: #ccc;
+ content: "\e0fc";
+ text-transform: none;
+ font-weight: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-size: 16px;
+ font-family: 'ionicons';
+ line-height: 1;
+ speak: none;
+ -webkit-font-smoothing: antialiased;
+ align-items: center; }
+
+a.list-icon-right .list-item-content:after,
+button.list-icon-right .list-item-content:after {
+ display: none; }
+
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index a2ddf42465..9ed925c27f 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1818,7 +1818,8 @@
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
- padding: 15px;
+ padding: 15px 45px 15px 15px;
+ font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.ionic .list-item-content i {
position: absolute;
@@ -1831,12 +1832,32 @@
padding-left: 45px; }
.ionic .list-icon-left .list-item-content i {
left: 7.5px; }
- .ionic .list-icon-right .list-item-content {
- padding-right: 45px; }
- .ionic .list-icon-right .list-item-content i {
- right: 7.5px; }
+ .ionic .list-icon-right .list-item-content i {
+ right: 7.5px; }
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
+ .ionic a .list-item-content:after,
+ .ionic button .list-item-content:after {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ display: flex;
+ height: 100%;
+ color: #ccc;
+ content: "\e0fc";
+ text-transform: none;
+ font-weight: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-size: 16px;
+ font-family: 'ionicons';
+ line-height: 1;
+ speak: none;
+ -webkit-font-smoothing: antialiased;
+ align-items: center; }
+ .ionic a.list-icon-right .list-item-content:after,
+ .ionic button.list-icon-right .list-item-content:after {
+ display: none; }
.ionic .list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 07387c84b5..72c10dc2de 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2228,7 +2228,8 @@ a.list-item {
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
- padding: 15px;
+ padding: 15px 45px 15px 15px;
+ font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i {
@@ -2244,14 +2245,36 @@ a.list-item {
.list-icon-left .list-item-content i {
left: 7.5px; }
-.list-icon-right .list-item-content {
- padding-right: 45px; }
- .list-icon-right .list-item-content i {
- right: 7.5px; }
+.list-icon-right .list-item-content i {
+ right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
+a .list-item-content:after,
+button .list-item-content:after {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ display: flex;
+ height: 100%;
+ color: #ccc;
+ content: "\e0fc";
+ text-transform: none;
+ font-weight: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-size: 16px;
+ font-family: 'ionicons';
+ line-height: 1;
+ speak: none;
+ -webkit-font-smoothing: antialiased;
+ align-items: center; }
+
+a.list-icon-right .list-item-content:after,
+button.list-icon-right .list-item-content:after {
+ display: none; }
+
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 7762b077c1..fb0495db83 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -110,7 +110,8 @@ a.list-item {
z-index: 2;
margin-top: $list-item-border-width * -1;
- padding: $list-item-padding;
+ padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
+ font-size: $list-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}
@@ -132,18 +133,44 @@ a.list-item {
}
}
-.list-icon-right .list-item-content {
- padding-right: ($list-item-padding * 3);
-
- i {
- right: $list-item-padding / 2;
- }
+.list-icon-right .list-item-content i {
+ right: $list-item-padding / 2;
}
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto;
}
+a .list-item-content:after,
+button .list-item-content:after {
+ position: absolute;
+ top: 0;
+ right: $list-item-padding;
+ display: flex;
+ height: 100%;
+ color: #ccc;
+ content: "\e0fc"; // icon-chevron-right
+ text-transform: none;
+ font-weight: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-size: 16px;
+ font-family: 'ionicons';
+ line-height: 1;
+ speak: none;
+ -webkit-font-smoothing: antialiased;
+ align-items: center;
+}
+
+// do not show the default right arrow when they want their own right side icon
+a.list-icon-right,
+button.list-icon-right {
+ .list-item-content:after {
+ display: none;
+ }
+}
+
+
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 533998369c..cb84ebf2de 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -337,6 +337,8 @@ $tabs-dark-border-color: $button-dark-border;
// Lists
// -------------------------------
+$list-font-size: 16px;
+
$list-header-bg: transparent;
$list-header-color: #222;
$list-header-padding: 5px 15px;
diff --git a/test/lists.html b/test/lists.html
index a8cd4fcd3b..ee0606a3a5 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -22,15 +22,22 @@
List Header
-
+