Dev: Touch visual effects

src/Elements/Elements.es6

@@ -249,7 +249,7 @@ export default class Elements extends Tool
 
         var settings = this._parent.get('settings');
         settings.text('Elements')
-                .add(cfg, 'overrideEventTarget', 'Catch Event Listeners')
+                .switch(cfg, 'overrideEventTarget', 'Catch Event Listeners')
                 .separator();
     }
 }
@@ -326,6 +326,7 @@ function formatChildNodes(nodes)
         {
             ret.push({
                 text: formatElName(child),
+                isEl: true,
                 idx: i
             });
         }

src/Elements/Elements.hbs

@@ -4,7 +4,7 @@
 {{#if children}}
     <ul class="eruda-children">
         {{#each children}}
-            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
+            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}} {{#if isEl}}eruda-active-effect{{/if}}" data-idx="{{idx}}" ontouchstart>{{{text}}}</li>
         {{/each}}
     </ul>
 {{/if}}
@@ -31,7 +31,7 @@
 </div>
 {{#if computedStyle}}
     <div class="eruda-computed-style eruda-section">
-        <h2 class="toggle-all-computed-style">Computed Style</h2>
+        <h2 class="toggle-all-computed-style eruda-active-effect">Computed Style</h2>
         <div class="eruda-table-wrapper">
             <table>
                 <tbody>

src/Elements/Elements.scss

@@ -11,9 +11,12 @@
         }
         .breadcrumb {
             background: #fff;
-            padding: $padding;
             margin-bottom: 10px;
             word-break: break-all;
+            padding: $padding;
+            font-size: $font-size-l;
+            min-height: 40px;
+            border-bottom: 1px solid $gray-light;
         }
         .section {
             h2 {
@@ -21,6 +24,10 @@
                 padding: $padding;
                 color: #fff;
                 font-size: $font-size;
+                transition: background $anim-duration;
+                &.active-effect:active {
+                    background: $blue-dark;
+                }
             }
             margin-bottom: 10px;
         }
@@ -33,6 +40,17 @@
                 padding: $padding;
                 border-top: 1px solid $gray-light;
                 white-space: nowrap;
+                transition: background $anim-duration, color $anim-duration;
+                span {
+                    transition: color $anim-duration;
+                }
+                &.active-effect:active {
+                    background: $blue;
+                    color: #fff;
+                    span {
+                        color: #fff;
+                    }
+                }
             }
         }
         .attributes {
@@ -76,7 +94,7 @@
                     padding: 5px 10px;
                     &.key {
                         white-space: nowrap;
-                        color: $red-dark;
+                        color: $red;
                     }
                 }
             }
@@ -96,7 +114,7 @@
                         padding-left: 2em;
                         word-break: break-all;
                         span {
-                            color: $red-dark;
+                            color: $red;
                         }
                     }
                     &:last-child {
@@ -148,7 +166,12 @@
                 line-height: 40px;
                 width: 20%;
                 display: inline-block;
-                &:active, &.active {
+                transition: background $anim-duration, color $anim-duration;
+                &:active {
+                    background: $blue;
+                    color: #fff;
+                }
+                &.active {
                     color: $blue;
                 }
             }