Highlight selected item

src/components/list-view.html

@@ -72,6 +72,16 @@
                     var direction = event.animationName == "slideOutToLeft" ? "out" : "in";
                     this.fire("animation-end", {direction: direction});
                 }
+            },
+            selectedChanged: function() {
+                var selected = this.selected;
+                this.$.list.children.array().forEach(function(item) {
+                    if (item.record == selected) {
+                        item.classList.add("selected");
+                    } else {
+                        item.classList.remove("selected");
+                    }
+                });
             }
         });
     </script>

src/components/record-item.html

@@ -44,6 +44,7 @@
                 background: #fff;
                 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
                 margin-top: 5px;
+                -webkit-transition: background 0.2s;
             }
 
             /*:host:not(:last-child) {
@@ -54,8 +55,12 @@
                 background: rgba(0, 0, 0, 0.05);
             }
 
-            :host:active:hover:not(.disabled) .inner {
+            /*:host:active:hover:not(.disabled) .inner {
                 background: rgba(0, 0, 0, 0.1);
+            }*/
+
+            :host.selected .inner {
+                background: orange;
             }
 
             .delete {