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 - +
- Madison, WI + Not a link so no default right arrow
-
+
- Driving Directions + Auto Right side arrow cuz its a link +
+
+ + +
+ Custom Right Icon +
@@ -74,28 +81,25 @@
- +
Madison, WI -
- +
Driving Directions -
- +
Computers 3 -
@@ -162,19 +166,17 @@
- +
Madison, WI -
- +
Driving Directions -
@@ -202,52 +204,45 @@
-
-
- +

Pretty Hate Machine

Nine Inch Nails

-
- +

Siamese Dream

Smashing Pumpkins

-
- +

Nevermind

Nirvana

-
- +

License To Ill

Bestie Boys

-
- +

Dookie

Green Day

-